Главная страницаКатегория next.jsСоздайте лучший интернет-магазин с React и Next

Создайте лучший интернет-магазин с React и Next

Name: Создайте лучший интернет-магазин с React и Next
Price: 12.5 USD
Rating: 4.1 (29 reviews)

BUILD THE BEST ECOMMERCE WEBSITE EVER with REACT JS NEXT JS

udemy

★4.1 (всего оценок - 29)

Продолжительность

46 ч 26 мин

Категория

Next.js

Количество уроков

212 Видео

Дата добавления

2 мар. 2023 г., 20:06

Язык

Английский

Дата выхода

11 янв. 2023 г., 01:00

Дата обновления

29 апр. 2026 г., 17:14

Создайте полнофункциональный, современный и по-настоящему продвинутый интернет-магазин с использованием React, Next.js, MongoDB, Redux и других мощных инструментов. Этот курс поможет вам уверенно пройти путь от идеи до полностью рабочего eCommerce‑проекта уровня Amazon или eBay.

Что вас ждет в этом курсе

Курс создан для тех, кто хочет глубоко понять архитектуру интернет-магазинов, освоить современные технологии и научиться применять лучшие практики, используемые крупнейшими платформами.

Уникальный подход к отображению продуктов

Мы используем необычную и реалистичную концепцию работы с товарами, которая включает:

динамические свайперы для демонстрации всех вариаций товара;
поддержку разных цветов, размеров, количества и цен;
максимальную визуализацию продукта — как на реальных маркетплейсах.

Продвинутая продуктовая страница

Каждый товар имеет собственную детальную страницу с:

функцией зума для увеличения изображения;
расширенной статистикой отзывов;
возможностью добавлять свой отзыв и изображения;
таблицей отзывов с фильтрами, пагинацией и сортировкой.

Корзина, оформление заказа и оплата

Интеллектуальная корзина

Корзина автоматически обновляет данные о наличии товара и актуальности цены, обеспечивая надежный и точный процесс покупки.

Страница checkout

На этапе оформления заказа вы увидите сводку корзины, сможете выбрать нужные товары или добавить новые.

Методы оплаты

После размещения заказа доступны три способа оплаты:

PayPal
Stripe — прямая оплата банковской картой
Наложенный платеж

Главная страница, поиск и фильтрация

Вы создадите динамический каталог с функционалом, сопоставимым с крупными eCommerce‑площадками. Мы реализуем:

категории, бренды, размеры, стили и цвета;
комбинированные фильтры;
ценовые и рейтинговые диапазоны;
гибкую сортировку товаров.

Геолокация, рассылки и взаимодействие с пользователями

Геолокация

Определяйте страну пользователя и показывайте ему только релевантные товары и предложения — как это делают топовые онлайн‑магазины.

Система email‑рассылок

Интеграция с Mailchimp позволяет собирать подписчиков и отправлять им маркетинговые кампании.

Аутентификация и безопасность

NextAuth и гибкая авторизация

Мы создам продвинутую систему входа и регистрации с:

валидацией форм;
email‑подтверждением;
входом через Google, Twitter, GitHub;
middleware для защиты маршрутов;
возможностью сброса пароля.

Профиль пользователя

Пользователь сможет:

обновить профиль;
просмотреть историю заказов и статусы;
управлять своими товарами;
настроить способ оплаты по умолчанию;
изменить пароль.

Административная панель

Инструменты администратора

В панели администратора вы получите:

сводку статистики;
просмотр последних заказов и пользователей;
полноценный CRUD‑интерфейс для товаров;
загрузку изображений через Cloudinary.

Управление заказами и пользователями

Вы сможете:

просматривать детали заказа, включая пользователя, доставку и товары;
управлять всеми пользователями;
работать со всеми категориями и подкатегориями продуктов.

Размер и ценность курса

Около 50 часов контента и 220+ подробных уроков делают этот курс одним из самых полных руководств по созданию интернет‑магазинов на React и Next.js. Он подходит как новичкам в eCommerce, так и разработчикам, стремящимся повысить уровень.

Присоединяйтесь и создайте интернет-магазин, которым действительно можно гордиться.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:09:43
Project Showcase
Урок 2. 00:06:38
Create next app
Урок 3. 00:04:50
Explaining css in next js and mixing sass with modules
Урок 4. 00:09:50
Reset Css styles
Урок 5. 00:05:58
Create a Mongodb Atlas cluster and get the connection url
Урок 6. 00:11:44
Connect,Disconnect to the database
Урок 7. 00:13:17
Let's setup Redux toolkit with Redux Persist
Урок 8. 00:05:37
Making global variables accessible in next config
Урок 9. 00:07:16
Ad header
Урок 10. 00:14:15
Ad top
Урок 11. 00:16:44
Top Menu part 1
Урок 12. 00:05:44
Top Menu part 2
Урок 13. 00:13:14
Search component
Урок 14. 00:09:03
Footer links
Урок 15. 00:09:38
Footer Socials & Newsletter
Урок 16. 00:09:01
Footer Payment & Copyright
Урок 17. 00:05:32
Responsive Footer
Урок 18. 00:12:35
Detect user location using IpRegistry
Урок 19. 00:08:31
Next auth setup
Урок 20. 00:08:15
JSON web tokens & Mongodb adapter
Урок 21. 00:05:56
Github provider
Урок 22. 00:05:02
Google provider
Урок 23. 00:05:09
Header session
Урок 24. 00:05:05
Twitter provider
Урок 25. 00:06:11
Auth0 provider
Урок 26. 00:12:22
Sign in page 1
Урок 27. 00:16:58
Sign in page 2
Урок 28. 00:17:03
Sign in page 3 - Custom input with yup
Урок 29. 00:14:12
Sign in page 4 button submit
Урок 30. 00:13:42
Sign in page 5 Socials
Урок 31. 00:12:16
Sign in page 6 sign in and yup validation
Урок 32. 00:12:30
Sign up 1
Урок 33. 00:09:16
Sign up 2 User model
Урок 34. 00:14:09
Sign up 3
Урок 35. 00:09:40
Sign up 4 Send email 1
Урок 36. 00:09:28
Sign up 5 Send email 2
Урок 37. 00:13:47
Sign up 6 Send email 3
Урок 38. 00:09:02
Sign up 7 submit
Урок 39. 00:11:43
Sign up 8 loader, success, error, redirect ...
Урок 40. 00:17:19
Sign in with Next auth and submit
Урок 41. 00:05:11
Callbacks in Next auth
Урок 42. 00:11:06
csrfTOken redirect
Урок 43. 00:09:35
Forgot page 1
Урок 44. 00:17:52
Forgot page 2
Урок 45. 00:09:35
Reset password 1
Урок 46. 00:11:48
Reset password 2
Урок 47. 00:11:31
Home main structure
Урок 48. 00:16:20
Home swiper part 1
Урок 49. 00:05:28
Home swiper 3
Урок 50. 00:16:13
Home offers main
Урок 51. 00:10:18
Home menu
Урок 52. 00:11:24
Home user menu markup
Урок 53. 00:17:41
Home user menu markup styles
Урок 54. 00:03:25
Home main header
Урок 55. 00:17:12
Home main responsive
Урок 56. 00:14:11
Flash deals 1
Урок 57. 00:14:23
Flash deals 2
Урок 58. 00:09:09
Flash deals responsive
Урок 59. 00:26:47
Flash deals Countdown
Урок 60. 00:12:05
Category cards
Урок 61. 00:11:10
Category cards responsive
Урок 62. 00:13:57
Home products swiper
Урок 63. 00:07:13
Home products swiper extra
Урок 64. 00:18:14
Product model and explaining the most perfect approach for products
Урок 65. 00:06:38
Category and subcategory model
Урок 66. 00:09:04
Add and get products from database
Урок 67. 00:14:24
Product card 1
Урок 68. 00:10:33
Product card 2
Урок 69. 00:16:04
Product card 3
Урок 70. 00:18:53
Get, filter and prepare product data
Урок 71. 00:09:05
product page content start
Урок 72. 00:19:42
product images main swiper
Урок 73. 00:14:43
product infos 1
Урок 74. 00:19:28
product infos 2
Урок 75. 00:16:05
product infos 3
Урок 76. 00:14:27
product infos 4 & share to social media accounts
Урок 77. 00:09:21
product infos 5 accordian
Урок 78. 00:14:56
product simillar swiper
Урок 79. 00:19:57
product reviews overview card
Урок 80. 00:25:00
add review 1
Урок 81. 00:15:59
add review 2
Урок 82. 00:12:47
add review 3
Урок 83. 00:21:47
add review 4 working with images upload form
Урок 84. 00:12:10
reviews table : pagination functionality
Урок 85. 00:15:39
review card
Урок 86. 00:21:58
reviews table header
Урок 87. 00:18:01
cart page 1
Урок 88. 00:16:42
cart slice & add to cart 1
Урок 89. 00:18:06
03-add to cart and update cart 2
Урок 90. 00:23:10
cart product card markup
Урок 91. 00:13:54
cart product card styles
Урок 92. 00:08:12
update product qty & remove from cart
Урок 93. 00:06:13
cart header
Урок 94. 00:11:02
cart checkout card
Урок 95. 00:16:20
cart select and unselect products
Урок 96. 00:08:36
cart calculate total subtotal and shipping fee
Урок 97. 00:10:34
cart payment methods and swiper
Урок 98. 00:19:00
add cart to database 1
Урок 99. 00:06:53
add cart to database 2
Урок 100. 00:11:25
Keeping the cart updated always
Урок 101. 00:25:50
Checkout ,get cart, work on shipping address form 1
Урок 102. 00:17:39
custom shipping input
Урок 103. 00:17:35
shipping form full markup and styles
Урок 104. 00:09:56
custom select componenet with yup and formik validation
Урок 105. 00:07:49
save address to db
Урок 106. 00:15:23
list all addresses and change active status 1
Урок 107. 00:09:54
AUTH MIDDLEWARE (VERY IMPORTANT)
Урок 108. 00:28:06
list all addresses and change active status 2
Урок 109. 00:12:20
remove address and add shipping section header
Урок 110. 00:12:19
checkout cart
Урок 111. 00:23:11
Select a payment method
Урок 112. 00:09:02
Order model
Урок 113. 00:11:32
Coupon model and create coupons to test with
Урок 114. 00:21:38
Summary
Урок 115. 00:11:50
apply coupon
Урок 116. 00:14:46
create order
Урок 117. 00:07:14
create order page and adding coupon to order
Урок 118. 00:18:56
order header & products list
Урок 119. 00:09:05
order products total with coupon shown
Урок 120. 00:08:13
order shipping billing address
Урок 121. 00:22:01
paypal payment setup
Урок 122. 00:17:26
Stripe setup
Урок 123. 00:15:47
Stripe finish
Урок 124. 00:06:04
Finishing Paypal payment
Урок 125. 00:10:15
middlware
Урок 126. 00:11:36
cloudinary setup
Урок 127. 00:07:53
upload image middleware
Урок 128. 00:11:16
upload images to cloudinary
Урок 129. 00:09:58
admin dashboard setup + redux expand Sidebar setup
Урок 130. 00:07:24
admin dashboard layout
Урок 131. 00:17:07
Admin Dashboard Sidebar part 1
Урок 132. 00:18:04
Admin Dashboard Sidebar part 2
Урок 133. 00:09:13
admin Dashboard Sidebar part 3
Урок 134. 00:06:44
Toastify setup and explained
Урок 135. 00:07:33
categories page setup
Урок 136. 00:10:29
create category start
Урок 137. 00:16:28
Admin custom input with validation and fixing issues
Урок 138. 00:09:46
create category submit and api + fixing regex issue
Урок 139. 00:14:30
list all categories
Урок 140. 00:07:53
finish list item and delete a category
Урок 141. 00:06:04
update a category
Урок 142. 00:13:43
subcategories page setup & create subCategory
Урок 143. 00:18:17
list update and delete SubCategory
Урок 144. 00:09:25
coupons page setup
Урок 145. 00:10:34
coupons dates picker
Урок 146. 00:06:36
Submit coupon
Урок 147. 00:10:43
update, delete coupon
Урок 148. 00:07:51
all products page setup
Урок 149. 00:07:33
list products beautifully part 1
Урок 150. 00:09:20
list products beautifully part 2
Урок 151. 00:18:52
create product page setup & extra
Урок 152. 00:18:51
working on the form
Урок 153. 00:14:48
working on the form 2
Урок 154. 00:20:40
form validation, styles & select header and fixing issues
Урок 155. 00:16:06
Dialog modal
Урок 156. 00:15:53
Create product images 1
Урок 157. 00:16:00
Create product images 2
Урок 158. 00:10:08
Create product images 3
Урок 159. 00:20:57
extract colors and pick a product main color
Урок 160. 00:05:34
Product Style
Урок 161. 00:10:50
click to add - SIzes Qty Price 0
Урок 162. 00:17:20
click to add - SIzes Qty Price 1
Урок 163. 00:12:45
click to add - Details & Questions
Урок 164. 00:15:42
Full validation for all inputs and fixing issues 1
Урок 165. 00:09:32
Full validation for all inputs 2
Урок 166. 00:04:41
Admin middleware
Урок 167. 00:12:02
Submit create product 1
Урок 168. 00:13:27
Submit create product 2
Урок 169. 00:07:45
users page and advanced mui table setup
Урок 170. 00:12:18
filling the table data
Урок 171. 00:13:02
orders setup & Collapsible table
Урок 172. 00:10:53
Filling the orders table
Урок 173. 00:07:22
Filling the orders table - shipping informations
Урок 174. 00:14:16
Filling the orders table - list products
Урок 175. 00:19:12
dashboard header 1
Урок 176. 00:23:18
dashboard header 2
Урок 177. 00:14:38
dashboard status cards
Урок 178. 00:07:40
data tables markup
Урок 179. 00:16:25
data tables styles
Урок 180. 00:15:08
Add a review client side
Урок 181. 00:22:54
Add a review server side
Урок 182. 00:06:57
Add to whishlist
Урок 183. 00:14:05
Work on reviews and loader
Урок 184. 00:12:36
profile and layout setup
Урок 185. 00:09:01
profile sidebar
Урок 186. 00:15:21
profile sidebar 2
Урок 187. 00:11:46
profile - orders 1
Урок 188. 00:09:31
profile - orders 2
Урок 189. 00:15:39
profile - orders 3
Урок 190. 00:09:42
profile - addresses
Урок 191. 00:17:13
profile - default payment method
Урок 192. 00:07:40
profile - security (change password 1)
Урок 193. 00:11:09
profile - security (change password 2)
Урок 194. 00:15:19
Getting the data first
Урок 195. 00:14:18
Browse heading, tags, listing products
Урок 196. 00:12:11
Category filter component
Урок 197. 00:11:31
Colors & Sizes filter component
Урок 198. 00:20:14
Styles Patterns Materials Gender
Урок 199. 00:22:15
Heading Filters - Pricing & Sorting
Урок 200. 00:09:54
Heading Filters styles
Урок 201. 00:25:43
Filtering algorithm and full search feature
Урок 202. 00:26:59
filtering by category brand styles & working on multiple filtiring
Урок 203. 00:14:55
filtering by multiple brands sizes colors
Урок 204. 00:16:36
filtering by patterns materials gender
Урок 205. 00:18:08
filtering by price (live filtering and buttons)
Урок 206. 00:31:33
Re-Creating a global filtiring function with select unselect and active stat
Урок 207. 00:14:57
Apply the new QueryReplace function on filters
Урок 208. 00:10:37
Filtering by free shipping and ratings
Урок 209. 00:30:18
sorting
Урок 210. 00:11:02
Pagination
Урок 211. 00:11:03
fixed filters and clear button
Урок 212. 00:22:18
Newsletter full guide

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+198

Комментарии

domname68
30 апр. 2025 г., 14:48
Не скачивается, ошибка
CourseHunter Team domname68
1 мая 2025 г., 21:23
Уже можно качать
domname68 CourseHunter Team
12 мая 2025 г., 21:25
Большое спасибо.
CourseHunter Team domname68
12 мая 2025 г., 23:33
Всегда пожалуйста
G-Fri
18 мар. 2023 г., 00:25
Don't buy this course, it's outdated for at least 4 years. Just add typescript and you going to spend a lot of time just to fix all bugs made by mentor. Words like "You don't need to know this thing, just copy-paste, believe me, it is needed" and then you go to official docs and this thing is deprecated for few years already...
Probably if you know all of this and just want to see new approaches, try it.
For me, mostly all setups I did from my background, things I used in production env, as I see old approaches. My opinion, mentor is using some stuff he was working with in some company without full understanding what and why was used, just philosophy "If it working - don't touch it!". It's more like a stackoverflow post with old way to do something. As long as course is without typescript - there probably are outdated things.
But in overall - course have ideas to give.
e.badmaev
9 мар. 2023 г., 15:19
курс неполный?
CourseHunter Team e.badmaev
10 мар. 2023 г., 22:54
Полный
Anonymous
7 мар. 2023 г., 09:26
Please update the materials zip file as it has only empty folders.
CourseHunter Team Anonymous
10 мар. 2023 г., 22:53
second folder has link to github, https://github.com/M74JJI/shoppay-course

if folders is empty, it means there was only videos.