Главная страницаКатегория mongodbСоздание интернет-магазина с помощью React и Chakra UI - MERN

Создание интернет-магазина с помощью React и Chakra UI - MERN

Name: Создание интернет-магазина с помощью React и Chakra UI - MERN
Price: 12.5 USD
Rating: 5 (9 reviews)

Build an e-commerce app with React and Chakra UI MERN

udemy

★5 (всего оценок - 9)

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

20 ч 33 мин

Категория

MongoDB

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

205 Видео

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

16 мая 2023 г., 22:48

Язык

Английский

Дата выхода

23 февр. 2023 г., 01:00

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

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

Освойте практическое создание современного интернет-магазина на стеке MERN, используя React, Chakra UI, Redux Toolkit, Node.js, Express и MongoDB. Курс построен вокруг реального проекта — вы будете писать код вместе с преподавателем и шаг за шагом собирать полноценное приложение Techlines.

Что представляет собой этот курс

Курс ориентирован на практику: более 90% материала — это программирование в реальном времени. Вы создадите интернет-магазин с функционалом поиска, корзины, авторизации, каталогов и административной панели. Все технологии и подходы объясняются простым языком и закрепляются в процессе разработки.

Кому подойдёт этот курс

Новичкам в IT, которые хотят начать с создания реальных проектов
Тем, кто изучает веб-разработку и стремится понять полный цикл создания приложения
Студентам и начинающим программистам, осваивающим JavaScript и React
Разработчикам, желающим прокачать навыки работы с Redux Toolkit и Chakra UI
Тем, кто хочет научиться создавать адаптивные интерфейсы и работать с компонентными библиотеками
Тем, кто хочет разобраться, как работает backend на Node.js + Express

Навыки, которые вы освоите

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

Фронтенд: React и интерфейсы

React Hooks и функциональные компоненты
Управление состоянием с Redux Toolkit
Создание современного UI с Chakra UI
Адаптивная верстка и проектирование интерфейсов
Работа с формами, запросами и пользовательскими событиями

Бэкенд и работа с данными

Создание REST API на Node.js и Express
Проектирование моделей данных
Хранение данных в MongoDB
Авторизация и регистрация пользователей
Безопасность и обработка ошибок

Дополнительные навыки

Git и GitHub для управления версиями
Работа с окружением разработки
Организация структуры проекта
Оптимизация и улучшение производительности приложения

Каким будет итоговый проект

Вы создадите интернет-магазин Techlines с каталогом товаров, системой корзины, оформлением заказов, регистрацией и авторизацией пользователей, а также административной панелью. Это проект, который можно использовать в портфолио или развивать дальше.

Что понадобится для начала

Вам нужен только компьютер, стабильный интернет и желание научиться создавать современные веб‑приложения. Все инструменты и программы будут подробно объяснены по ходу курса.

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

Урок 1. 00:03:18
App demo
Урок 2. 00:02:15
Install Node & Npm
Урок 3. 00:02:31
Install Git
Урок 4. 00:01:22
Install Visual Studio Code
Урок 5. 00:02:31
Install Visual Studio Code Extensions
Урок 6. 00:02:29
Prettier Extensions Settings
Урок 7. 00:01:05
Initiating Folder Directory
Урок 8. 00:02:22
Create React App
Урок 9. 00:02:16
Npm start
Урок 10. 00:08:22
Client Content Explained
Урок 11. 00:03:48
Removing Files we don't need 1
Урок 12. 00:04:01
Removing Files we don't need 2
Урок 13. 00:08:10
Setting up Git
Урок 14. 00:02:55
High picture of our app
Урок 15. 00:02:15
In case you get stuck
Урок 16. 00:01:12
Overview
Урок 17. 00:03:15
Installing Dependencies
Урок 18. 00:03:21
Set up React Router Dom & Chakra Provider
Урок 19. 00:02:32
The concept of React
Урок 20. 00:12:55
Navbar Component Part 1
Урок 21. 00:03:13
The concept of Components
Урок 22. 00:07:57
Navbar Component Part 2
Урок 23. 00:07:52
Navbar Component Part 3
Урок 24. 00:04:49
Navbar Component Part 4
Урок 25. 00:03:25
Save your work to the remote repository
Урок 26. 00:00:34
Overview
Урок 27. 00:01:00
Download Materials
Урок 28. 00:08:02
ProductsScreen Component
Урок 29. 00:10:35
ProductCard Component Part 1
Урок 30. 00:11:22
ProductCard Component Part 2
Урок 31. 00:07:12
ProductCard Component Part 3
Урок 32. 00:01:54
Save your work to the remote repository
Урок 33. 00:00:58
Section overview
Урок 34. 00:05:19
Getting started with MongoDb
Урок 35. 00:00:58
MongoDbCompass
Урок 36. 00:03:21
Connect to our database in MongoDb Compass
Урок 37. 00:04:23
Initialize backend npm package & dependencies
Урок 38. 00:06:48
Creating database connection part 1
Урок 39. 00:03:41
Creating database connection part 2
Урок 40. 00:02:25
What we have done so far
Урок 41. 00:06:43
Add port listener
Урок 42. 00:08:43
Creating product schema
Урок 43. 00:06:02
Initiate product route
Урок 44. 00:02:06
Import product data
Урок 45. 00:02:14
Save your work to the remote repository
Урок 46. 00:00:38
Overview
Урок 47. 00:03:15
Running backend and frontend simultanously
Урок 48. 00:04:45
Creating Redux Store
Урок 49. 00:04:45
Products Slices
Урок 50. 00:04:06
Redux Slices & Actions
Урок 51. 00:02:20
Proxy and Store Activation
Урок 52. 00:02:33
Redux Devtools
Урок 53. 00:03:10
Store Provider
Урок 54. 00:04:22
Redux in ProductsScreen
Урок 55. 00:07:05
Redux Theorie
Урок 56. 00:02:53
Code Clean Up
Урок 57. 00:08:44
Loading Spinner & Error Message
Урок 58. 00:05:08
Test Error Message & Saving our work to the Remote Repository
Урок 59. 00:00:29
Overview
Урок 60. 00:01:55
Fixing Deprecation Warning
Урок 61. 00:04:18
Setting Favicon
Урок 62. 00:06:34
Creating Cart Screen part 1
Урок 63. 00:11:05
Cart Slices & Actions (Redux)
Урок 64. 00:08:58
Creating Cart Screen part 2
Урок 65. 00:08:18
Adding Redux to the ProductCard
Урок 66. 00:02:36
Fixing useColorModeValue
Урок 67. 00:12:47
CartItem Component part 1
Урок 68. 00:02:57
CartItem Component part 2
Урок 69. 00:14:50
CartOrderSummary Compononet
Урок 70. 00:05:29
Get Product Route
Урок 71. 00:09:49
Local storage
Урок 72. 00:01:29
Refining calculateSubtotal Function
Урок 73. 00:09:47
Remove Cart Item and Save Work to Remote Repository
Урок 74. 00:01:00
Overview
Урок 75. 00:05:26
Redux setup for single product
Урок 76. 00:04:58
Initialize Product Screen Component
Урок 77. 00:09:49
Product Screen part 1
Урок 78. 00:08:30
Product Screen part 2
Урок 79. 00:11:10
Product Screen part 3
Урок 80. 00:08:07
Product Screen part 4
Урок 81. 00:07:55
Product Screen part 5
Урок 82. 00:04:08
Product Screen part 6
Урок 83. 00:01:19
Saving work to our work repository
Урок 84. 00:01:22
1. Overview
Урок 85. 00:04:43
Footer Component Part One
Урок 86. 00:06:39
Footer Component Part Two
Урок 87. 00:04:32
Footer Component Part Three
Урок 88. 00:03:57
LandingScreen Component Part One
Урок 89. 00:07:11
LandingScreen Component Part Two
Урок 90. 00:01:38
Save work to our remote repository
Урок 91. 00:00:33
Overview
Урок 92. 00:08:30
User Model
Урок 93. 00:08:23
JSON Web Token and Login User Route
Урок 94. 00:07:30
Register User Route
Урок 95. 00:05:45
Postman & GET Products
Урок 96. 00:04:57
Register user in Postman
Урок 97. 00:06:37
Review of what we have done so far
Урок 98. 00:01:47
Login user in Postman
Урок 99. 00:11:46
Login Screen Part One & Two
Урок 100. 00:10:45
Login Screen Part Three
Урок 101. 00:08:38
Text Field and Password Component
Урок 102. 00:07:35
Login Screen Part Four
Урок 103. 00:09:05
Redux Set Up For User
Урок 104. 00:04:11
Login Screen Part Five
Урок 105. 00:04:56
Login Screen Part Six
Урок 106. 00:08:59
Login Screen Part Seven
Урок 107. 00:09:52
Login Screen Part Eight
Урок 108. 00:03:58
Registration Screen Part One
Урок 109. 00:07:40
Registration Screen Part Two
Урок 110. 00:10:09
Registration Screen Part Three
Урок 111. 00:03:58
ViewIcon Fix
Урок 112. 00:02:13
Save Your Work To The Remote Repository
Урок 113. 00:01:03
Overview
Урок 114. 00:10:08
Backend Middleware
Урок 115. 00:06:53
Update Profile Route
Урок 116. 00:04:59
Update Profile in Postman
Урок 117. 00:10:00
Update Profile In Redux
Урок 118. 00:08:30
Profile Screen Part One
Урок 119. 00:13:56
Profile Screen Part Two
Урок 120. 00:11:32
Profile Screen Part Three
Урок 121. 00:05:20
Profile Screen Part Four
Урок 122. 00:02:52
Profile Screen Part Five
Урок 123. 00:07:05
Cart Icon Refinement
Урок 124. 00:00:58
Save your work to the remote repository
Урок 125. 00:03:28
Profile Save Toaster Fix
Урок 126. 00:02:28
Overview
Урок 127. 00:11:14
Order Schema
Урок 128. 00:08:11
Order Route
Урок 129. 00:07:15
Redux Setup - Order Actions
Урок 130. 00:05:42
Redux setup - Order Slice
Урок 131. 00:09:26
Checkout Screen Part One
Урок 132. 00:15:16
Checkout Screen Part Two
Урок 133. 00:07:52
CheckoutScreen Part Three
Урок 134. 00:11:21
Checkout Screen Part Four
Урок 135. 00:13:04
Checkout Screen Part Five
Урок 136. 00:11:53
Checkout Screen Part Six
Урок 137. 00:07:35
Clear Order and Cart Actions
Урок 138. 00:08:17
Shipping Information Part One
Урок 139. 00:12:41
Shipping Information Part Two
Урок 140. 00:13:59
Shipping Information Part Three
Урок 141. 00:09:48
Payment Success Modal Part One
Урок 142. 00:08:19
Payment Success Modal Part Two
Урок 143. 00:10:46
Payment Success Modal Part Three
Урок 144. 00:04:20
Payment Success Modal Part Four
Урок 145. 00:03:31
Save your work to the remote repository
Урок 146. 00:01:39
PayPal Checkout Issues
Урок 147. 00:01:45
Overview
Урок 148. 00:05:55
Get Users Orders Route
Урок 149. 00:07:14
Redux Setup - User Orders
Урок 150. 00:06:24
Your Orders Screen Part One
Урок 151. 00:12:39
Your Orders Screen Part Two
Урок 152. 00:10:38
Create Product Reviews Route
Урок 153. 00:04:54
Redux Setup - Reviews
Урок 154. 00:02:32
Redux Setup Resetting Errors
Урок 155. 00:07:25
Review on Product Screen Part One
Урок 156. 00:08:28
Review on Product Screen Part Two
Урок 157. 00:03:58
Review on Product Screen Part Three
Урок 158. 00:01:01
Save your work to the remote repository
Урок 159. 00:01:14
Overview
Урок 160. 00:05:13
Admin Console in Nav Bar
Урок 161. 00:08:24
Initialize Admin Console Screen
Урок 162. 00:02:15
Initialize Users Tab
Урок 163. 00:08:01
Users Route for Admin
Урок 164. 00:08:37
Redux Setup - Admin Users
Урок 165. 00:10:10
Users Tab Part One
Урок 166. 00:08:30
Users Tab Part Two
Урок 167. 00:06:50
Confirm Removal Alert
Урок 168. 00:06:16
Users Tab Part Three
Урок 169. 00:00:36
Debug Remove User Button
Урок 170. 00:00:46
Save your work to the remote repository
Урок 171. 00:00:51
Overview
Урок 172. 00:06:23
Admin Orders Route
Урок 173. 00:06:08
Redux Setup - Get Orders & Remove Orders
Урок 174. 00:16:42
Orders Tab
Урок 175. 00:02:56
Debug Delivered Flag
Урок 176. 00:00:53
Save your work to the remote repository
Урок 177. 00:01:50
Overview
Урок 178. 00:13:03
Create Delete Update Product Route
Урок 179. 00:06:39
Redux Setup - Update Product
Урок 180. 00:03:08
Redux Setup - Delete Product
Урок 181. 00:01:32
Redux Setup - Upload Product
Урок 182. 00:04:58
Products Tab Part One
Урок 183. 00:09:23
Products Tab Part Two
Урок 184. 00:10:22
Product Table Item Part One
Урок 185. 00:13:03
Product Table Item Part Two
Урок 186. 00:05:10
Product Table Item Part Three
Урок 187. 00:02:38
Debugging 404
Урок 188. 00:12:22
Add New Product Part One
Урок 189. 00:07:34
Add New Product Part Two
Урок 190. 00:05:26
Add New Product Part Three
Урок 191. 00:08:15
Add New Product Part Four
Урок 192. 00:01:56
Save your work to the remove repository
Урок 193. 00:00:58
Overview
Урок 194. 00:06:18
Admin route - Remove Product Review
Урок 195. 00:04:14
Redux Setup - Remove Review
Урок 196. 00:08:29
Reviews Tab - Part One
Урок 197. 00:12:59
Reviews Tab - Part Two
Урок 198. 00:00:50
Save your work to the remote repository
Урок 199. 00:01:15
Overview
Урок 200. 00:11:50
Deployment Configuration Part 1
Урок 201. 00:09:46
Deployment Configuration Part 2
Урок 202. 00:12:11
Website Deployment on Render.com
Урок 203. 00:04:03
End of course - last words, recommendation, thoughts
Урок 204. 00:04:44
Displaying correct error messages
Урок 205. 00:14:06
PayPal Checkout Process Bugfix

Автор - udemy

udemy

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

+198

Комментарии

TuanTQ
30 янв. 2024 г., 01:59
Hi admin! Please update this course. Thanks!
Anonymous
19 мая 2023 г., 19:48
the code files are not there. There are only folders in the zipped code.zip folder. Please fix