Интернет магазин одежды Ростелеком с нуля до деплоя: Next.js + React-admin + OAuth + MongoDB
Рет қаралды 37,268
Күн бұрынВ этом выпуске мы напишем крутой интернет-магазин одежды Ростелеком + Админку и зальем все это на бесплатный хостинг. Ставьте лайки и подписывайтесь на канал!)
Телеграм канал: t.me/vftuijgd
Чат для помощи: t.me/skillblog1
Исходники: clck.ru/38uF7s
Исходники админки: clck.ru/38uFBQ
Макет: clck.ru/37Up2P
Результат v0.1: rostelecom-shop.vercel.app/
Форма авторизации: codepen.io/uiswarup/pen/zYvGKed
Статья про Nodemailer: clck.ru/37Upcz
Каталог меню: clck.ru/37UpCw
Донат:
QIWI Кошелек: qiwi.com/n/DARYR422
Сбер: 2202206162066448
Тинькофф: 5536913842446219
(00:00) Начало
(00:57) Описание технологий
(03:22) Описание функционала и макета
Настройка проекта
(14:48) Инициализация проекта Next.js
(16:08) Настройка Eslint/Prettier
(17:59) Создание папок
(19:55) Базовый CSS
Общие компоненты
(21:42) Header
(38:35) Основное меню
(1:17:56) Мобильный навбар
(1:22:18) Каталог меню
(1:44:50) Модалка поиска
(1:57:55) Пупап корзины
(2:07:11) Footer
Главная страница
(2:15:39) Секция Hero
(2:33:20) Секция Категории
Сервер
(2:57:27) Создание БД
(2:59:55) Создание миграций
(3:17:20) Эндпоинт для получения новинок
(3:20:31) Эндпоинт для получения хитов
Главная страница
(3:25:24) Секции Новинки и Хиты
(3:33:15) Карточка товара
(4:10:05) Секция Жизнь нашего бренда
(4:15:15) Модалка быстрого просмотра
(5:12:30) Таблица размеров
Авторизация
(5:29:01) Создание папок
(5:29:51) Установка пакетов
(5:34:15) Эндпоинт регистрации
(5:35:30) Эндпоинт логина
(5:38:15) Модалка авторизации
(6:29:30) Авторизация OAuth
(6:42:59) Логика отправки Email
(7:05:15) Эндпоинт login-check
(7:25:31) Эндпоинт refresh-token
Корзина
(7:32:01) Создание коллекции на БД
(7:41:30) Добавление товаров
(8:47:53) Счетчик добавления товаров
(9:19:07) Удаление товаров
Админка
(9:27:05) Инициализация проекта React-admin
(9:36:30) Получение всех товаров
(9:46:13) Получение одного товара
(9:52:00) Удаление одного товара
(9:56:04) Удаление нескольких товаров
Общие компоненты
(10:00:45) Алерт соглашения с политикой Cookie
Страница корзины
(10:07:39) Создание страницы
Общие компоненты
(10:14:26) Хлебные крошки
(10:52:33) Контент для пустых страниц
(11:10:25) Страница 404
Страницы с политикой
(11:18:30) Политика обработки данных
(11:20:25) Политика конфиденциальности
Оптимизация
(11:25:19) Проверка через Lighthouse
(11:27:22) Добавление manifest файла
Деплой
(11:33:18) Залив на github
(11:36:23) Залив на vercel
(11:42:14) Правки и доработки
(11:50:12) Продолжение следует...
#nextjs #nextjs14 #js #nodejs #reactjs #mongodb #oauth #oauth2 #vercel #effector #typescript
@raydo8680 4 ай бұрын
Почти 12 часов… !!!! фантастическая подача!!! За таймкода, отдельное 👍 … Контент- пушка! ✊
@user-kh1ly2fl9w 4 ай бұрын
Поздравляю с отлично выполненной задачей! Твои усилия заслуживают громких аплодисментов и искренней признательности!
@igorsenichev3779 4 ай бұрын
Спасибо за полезное видео! Надеюсь увидеть продолжение - это будет шикарно 😇🤗
@AbukaPaintOzd5627 4 ай бұрын
Дэни, наконец-то новый ролик!!🎉🎉 Почти 12 часов!!! Такого количество времени я не ожидал!!😮 Поздравляю тебя с 5 тыс.подписчиками!!:)
@1982RUFF 4 ай бұрын
Наконец-то дождались! 🥳 Спасибо огромное за суперский контент! 🔥
@motodriverrf 4 ай бұрын
Обязательно продолжай снимать видео! Такие курсы обычно продают за большие деньги!
@mrtopal89 4 ай бұрын
Выглядит чудесно! Надеюсь, уложусь в месяц. Ты крут, спасибо!
@chilldontrage4771 4 ай бұрын
Очень сильно :) Не так давно писал магазин по прошлым двум выпускам, спасибо за видео!
@user-ll2lt6ki4f 3 ай бұрын
Спасибо большое за такую трудную работу. Очень мало видео не только в ру, но и в юа сегменте, где столько практической информации показывается👍
@AndreyEmelianovv 4 ай бұрын
Ура! Новый видос. Сразу лайк не глядя. Спасибо за твой труд!
@ArchakovBlog 4 ай бұрын
Пушка! 🔥Этот титанический труд заслуживает ещё больше лайков!
@ivanhurbatov4307 4 ай бұрын
ого, Арчаков дал рецензию, значит это точно стоит смотреть и вникать)) Начинаю 12 часовой пробег)
@myveritasforever 4 ай бұрын
Если мастеру понравилось то ТОЧНО годнота !
@Ivan-ee4pz 2 ай бұрын
И Сенсей тут, вот это я понимаю годноту нашёл
@Eva_White 4 ай бұрын
Бро, какой же ты все таки трудоголик!Молодец! Ты наша гордость! ❤
@PornTraktr01 4 ай бұрын
Спасибо за такую большую проделанную работу! Очень полезное видео!
@artems5802 4 ай бұрын
Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?
@iuseronline 4 ай бұрын
Фантастика! Не видел раньше канал. В рекомендации попал
@maxblock5233 4 ай бұрын
Очень круто, спасибо огромное за такой контент!
@amvfromken6645 4 ай бұрын
автор просто мужик😁,проект бомба, самое прикольное узнавать новые фишки
@geroigamechannel222 4 ай бұрын
Мужиииииик, ты Мега круто, спасибо за бесплатный контент, продвижения тебе 🔥🔥🔥🔥🔥
@natanrock4358 4 ай бұрын
Спасибо большое! Крутой материал для просмотра
@S-craY 3 ай бұрын
Очень крутой контент, который заслуживает неимоверное количество лайков, спасибо за титанический труд!!!
@JED4109 4 ай бұрын
Ты просто космос, просто красавчик, спасибо большое за такой объем полезных знаний.
@aliicomua1369 4 ай бұрын
Супер. Есть чем на месяц себя занять. Спасибо за контент
@user-eo3gn3td1f 4 ай бұрын
Невероятно интересный ролик... Тот кто все это сидел писал - знай ты достоин большего!
@alextotun 4 ай бұрын
Очень познавательно, с глубоким погружением! Интересно, сколько по факту времени ушло, да, с учетом что это только половина проекта.) Спасибо! Всех Благ!
@butyrskiy 3 ай бұрын
Огромное спасибо за контент! Очень жду продолжения. Когда уже?)
@dorin6880 15 күн бұрын
Контент огонь! Благодарим
@RAaaa777 4 ай бұрын
The best ecommerce project tutorial on youtube!
@yakub8798 4 ай бұрын
отличный контент , лайк и коммент для продвижения офигенного контента !
@viacheslauabaimov3880 4 ай бұрын
Огромнейшее спасибо !
@unicoxr5tj417 4 ай бұрын
11 чтоб его часов и таймкодики, это до слез прекрасно👍
@kripsakrips 4 ай бұрын
Вой бро, это просто невероятно!
@artems5802 4 ай бұрын
Спасибо, ты лучший!
@user-em5ck3om5o 4 ай бұрын
Ну ничего себе что мне упало в рекомендации. Обязательно к просмотру
@IvanovJeniaIT 4 ай бұрын
Молодец, очень хорошее видео
@fckincummer4934 2 ай бұрын
ОГРОМНОЕ СПАСИБО ! ПРОСТО ЛУЧШИЙ🫂
@14m10st 4 ай бұрын
Это офигеть. Я просто в шоке. Ты гений и мастер своего дела!
@lightyagami4667 4 ай бұрын
I don't understand language but i respect your dedication 🙌
@kobakamladze4175 4 ай бұрын
Топ!!!
@user-yl5kn9gq4p 2 ай бұрын
ты крутой бро, сечас работаб над таким проекто (online-shop), твой видос просто к стати!!!!!!
@user-hk7td4dh1o Ай бұрын
Супер, просто бомба
@kudo6 4 ай бұрын
отличная работа
@marpusik1277 4 ай бұрын
Пасиба 😘
@user-uq7fd1qn9i Ай бұрын
Лучший!
@VN1337 4 ай бұрын
Спасибо тебе есть к чему идти 😅
@yaroslavzef7267 3 ай бұрын
Крепкий профессионал
@tigranharutyunyan7674 4 ай бұрын
Great job, but catalog, product details pages are missing from demo.Thanks
@Commondore 4 ай бұрын
Материал бомба! К БЭМу есть вопросы. Классы элементов имеют большую вложенность. Т.е элементы элементов это бэм не любит
@aizen1252 4 ай бұрын
Привет, мне сразу зашла подача и объяснение материала на твоём канале. Такой качественный контент хорошо выстреливает, желаю дальнейшего продвижения каналу. Есть единственный вопрос, что если я не использую yarn, а пользуюсь npm пакетами. Этот проект мне не удастся повторить? Такое чувство что словлю миллион ошибок.
@skillblog-web 4 ай бұрын
Можно и npm использовать, проблем быть не должно
@aizen1252 4 ай бұрын
@@skillblog-webспасибо, как выучу все технологии на видео, обязательно попробую👍
@MenuMoscow 4 ай бұрын
как ты мог так круто придумать
@user-qe2ec5sr8f Ай бұрын
Спасибо
@sardorsultanov3409 4 ай бұрын
Проект хороший но надо чуть чуть увеличить шрифт редактора
@SibirFreestyler Ай бұрын
При регистрации через другие серверы выдаёт ошибку: TypeError: Cannot read properties of undefined (reading 'displayName') Перепробывал уже много всего, ошибка остаётся. Никто не сталкивался с этим?
@MrBenedig 2 ай бұрын
каааак? каааак дойти до такого уровня?))) у меня щас затык на затыке))))
@user-yq7xx2vy9v 5 күн бұрын
Подскажите, пожалуйста, при нажатии сочетания Ctrl+. появляется окно с Извлечь, Переписать, Переместить, никаких автофиксов нет, что делаю не так?
@sergeishmelev8000 4 ай бұрын
Привет )) А сколько всего по времени ушло на такой проект +- с учётом решения всяких багов и т.д.?
@skillblog-web 4 ай бұрын
Привет, он пока не закончен, продолжение в процессе. А то что уже выложил заняло около полутора месяца +-
@versusn9me 3 ай бұрын
А где отслеживание товаров?( П.С Может я просто не заметил, подскажите
@peacedeath999 4 ай бұрын
крутое видео, интересно узнать, а какой паттерн проектирования использовался в данном проекте?
@skillblog-web 4 ай бұрын
Например Headless Component
@peacedeath999 4 ай бұрын
@@skillblog-web спасибо! Когда ждать следующую часть?
@skillblog-web 4 ай бұрын
@@peacedeath999 Через пару недель где-то, точно не могу сказать)
@Geo-jh5dx 4 ай бұрын
Now it's time for me to learn new things hah
@evstafyevandrew2198 4 ай бұрын
Ура! Сайт на русском!!! Спасибо!!! Меня всё время мучил вопрос - а почему наши горе-лекторы разрабатывают сайты in English? А потом понял! Берут чужие малоизвестные уроки, показывают нам на английском. Типа каждый программист должен знать... А потом им всё равно что при локализации лезут ошибки из всех щелей. А здесь сайт по русски... PS Только прошу а) избавиться от слава-паразита «также», которое Вы повторяете безчётное число раз б) имена вводимых пакетов («@typescript-eslint/...») дописать либо в описание видео, а лучше - в md репозитария
@kudo6 4 ай бұрын
this is completed ???????????
@alexdor5425 3 ай бұрын
Я как раз искал все это
@tohachannel5621 4 ай бұрын
может я что-то не понимаю, но разве нельзя было сделать навешивания класса для body в элементе rootlayout? получая состояние бургера и изменения стиль)
@skillblog-web 4 ай бұрын
Помимо бургеров есть ещё куча других модалок. Большое условие получится, и к тому же в некоторых местах нужно падинг справа изменять. Поэтому функция удобнее)
@vibhukarnwal4926 4 ай бұрын
hats off ,add cation in english if possible
@mquix_x 2 ай бұрын
курьера найдем)
@versusn9me 2 ай бұрын
Глупый вопрос наверное. Почему все ведет в ошибку 404 и как исправить?
@user-vp3rt2lr3l 4 ай бұрын
а с 13 версией NextJs есть смысл знакомиться, или 14 версия уже полностью его заменила?
@skillblog-web 4 ай бұрын
Там разница небольшая можно с 14 начать сразу
@user-vp3rt2lr3l 4 ай бұрын
спасибо за ответ@@skillblog-web
@user-mg1mu1sn7z 4 ай бұрын
Привет, друг, когда будет продолжение?
@skillblog-web 4 ай бұрын
Привет. Думаю через несколько недель +-
@user-eo3gn3td1f 4 ай бұрын
Скажи пожалуйста какие плагины ты используешь?
@skillblog-web 4 ай бұрын
В описании есть ссылка на чат для помощи и общения, давай туда, а то тут неудобно
@dopetag 4 ай бұрын
3:00:11 Почему ты используешь NEXT_PUBLIC_DB_URL, если запросы нужно отправлять только с сервера?
@skillblog-web 4 ай бұрын
Чтобы к монге подключиться)
@user-db4ec6rx4n 4 ай бұрын
Бутстрап? Tailwind же есть)
@skillblog-web 4 ай бұрын
5:28:45 😅
@lyudmilagvozdeva2605 4 ай бұрын
Привет! Как скачать svg-иконки из исходников? Не отображаются((
@skillblog-web 4 ай бұрын
Привет! Если ты про репозиторий, то скопируй код svg. Если речь про макет, то сохрани макет в свои файлы и потом можешь скачивать
@amvfromken6645 3 ай бұрын
помогите пожалуйста, есть такая вот ошибка module@0.0.1: The engine "node" is incompatible with this module. Expected version ">= 0.2.9 < 0.7.0". Got "21.7.0" error Found incompatible module. как исправить данную ошибку? облазил весь интернет но ничего не нашел
@skillblog-web 3 ай бұрын
Перейди в чат для помощи по ссылке в описании и опиши подробней там проблему
@sergeevalexander4695 4 ай бұрын
Привет, я так понимаю это полноценный фронт и бэк?
@skillblog-web 4 ай бұрын
О да
@user-em5ck3om5o 3 ай бұрын
Посмотрел меньше часа, много копипаста. Толком нет объяснения. Понимаю если все разжевывать, то видео получится огромное, но все же лучше сделать несколько больших видео или несколько частей, чем просто копировать и вставлять код в редактор. Смысл тогда этого видео? Для новичков сложно, для продвинутых я думаю не будет так актуально. Шрифты подключаются странно, в доке по Next по другому, зачем делать отдельные лайоуты и подключать их в общем лайоуте? В next это реализовано по другому. Какой БЭМ в Next? Есть же tailwind (рекомендован Next), ну на крайний случай есть page.module.css. Это первые моменты которые бросаются в глаза. Про effector нет понимания для чего он, в чем удобство. Или мне еще рановато подходить к этому проекту или автор хотел просто показать, а не научить. Может быть вернусь позже, а пока больше непонимания, чем пользы. Не в обиду автору. Труд титанический, проект крутой!!!
@narwhal6422 Ай бұрын
Наверно верстка просто готовая есть, заказал у верстальщика, они по бэм в основном делают
@user-bf8sh3nn5y 4 ай бұрын
Видео ctrl C , ctrl V
@antonsha2027 4 ай бұрын
помню был node.js , он сейчас работает ?
@skillblog-web 4 ай бұрын
Если речь про Некст, то да, под капотом там nodejs
@NoName-ee7eq 4 ай бұрын
Привет, спасибо за макет, но есть жесткие вопросы "почему так..." 1. Почему ты решил делать много стейтов с булевыми переменными для ссылок на одежду, акссесуары и т.п.? (CatalogMenu, Menu) вместо одного стейта который бы хранил айдишку активного элемента. 2. Почему ты решил делать массивы объектов внутри FC? Когда перерендеривается реактом компонент, массив тоже заново будет делаться) (нужно было вынести хотя бы до функции, а еще лучше в другой файл и делать просто импорт, дабы не засорять код компонента.) Я понимаю, может время, но рутину ты копипастил, почему это нет? Да и если бы ты сделал 1 пункт более правильно, то времени меньше бы потратил
@skillblog-web 4 ай бұрын
Не такие уж и жёсткие вопросы, вполне адекватные и по делу👍
@NoName-ee7eq 4 ай бұрын
@@skillblog-web + у тебя в деплое баг с модалкой аутентификации, ты забыл добавить проверку на активную модалку. коротко: signIn === true? signIn modal : signUp modal ибо сейчас у тебя если нажмешь на авторизацию, то регистрация остается не закрытой и будет видна её нижняя часть
@NoName-ee7eq 4 ай бұрын
@@skillblog-web а почему тебе так не нравится адаптировать через CSS? этот(useMediaQuer) хук же полная гг по оптимизации..
@NoName-ee7eq 4 ай бұрын
@@skillblog-web если тебе такое нравится, то могу еще раскритиковать момент касаемо твоей верстки и стилизации.. почему так много position absolute??? Например заголовки секций с продуктами. Вместо позишина, ты мог засунуть в 1 див условно заголовок секции + ссылку. Этот див помещается внутрь контейнера, задаешь ему display: flex, justify-content: space-between. Всё. А если уж душнить, то в идеале нужно было еще вынести русский и англ язык для работы с переводами в разные файлы. А в проде в таких случаях юзают готовые решения по типу lingui UPD: касаемо первого, связ с дивом еще офк align-items: center, чтобы ровно было. UPD2: Посмотрел еще больше для интереса уже и нашел ProductsListItem. Зачем там тернарник? Почему ты решил что это лучше, если можно например просто выводить передаваемый заголовок, как ты делал это в других компонентах? P.S.: Я не смотрел фулл этот курс, не могу знать точно, может ты это показал для ознакомления, или еще чего и забыл потом переделать на более лучший подход. И нет, я не хейтер. Просто сделал а-ля ревью, вдруг тебе было действительно интересно увидеть все ошибки. Да и судя по комментариям, смотрят тебя новички, которые хотят чему-то научиться. Такой код явно не лучший показатель для обучения, надеюсь что покажешь в следующем видео в начале небольшую вставку, редакцию или что-то подобное, дабы люди смогли увидеть как лучше и почему.
@skillblog-web 4 ай бұрын
@@NoName-ee7eq Спасибо за обратную связь, обязательно учту твои рекомендации и в продолжении по возможности внесу правки👍✊
@likluklak 2 ай бұрын
почему Ростелеком название?
@Zublan 3 ай бұрын
Хотел бы знать, стоит ли писать на чистом React или на Nextjs?
@skillblog-web 3 ай бұрын
Лучше на некст
@Zublan 3 ай бұрын
@@skillblog-web я изучаю чисто реакт пока только месяц, стоит ди уже перейти на nextjs?
@skillblog-web 3 ай бұрын
Да, можно начать
@constyak9031 3 ай бұрын
Это уровень стажер, я так понимаю?😊
@skillblog-web 3 ай бұрын
Местами да)
@mquix_x 2 ай бұрын
Искал медь (Next.js), нашел золото (полный курс)
@mrunderson983 4 ай бұрын
деплой во второй?
@skillblog-web 4 ай бұрын
В этой тоже, в описании ссылка даже есть на результат
@vovapirotskiy5031 4 ай бұрын
а ссылки не работают?
@skillblog-web 4 ай бұрын
Какие именно? У всех работает вроде
@user-eo3gn3td1f 4 ай бұрын
Сколько нужно учиться что бы знать это все?)
@skillblog-web 4 ай бұрын
Сложно однозначно сказать, у каждого индивидуально. Год точно думаю надо
@user-eo3gn3td1f 4 ай бұрын
@@skillblog-web Ты красавчик! Сколько получил за этот сайт?
@user-eo3gn3td1f 4 ай бұрын
@@skillblog-web Я сейчас только доучил HTML и иду к CSS но все равно очень интересно)
@skillblog-web 4 ай бұрын
@@user-eo3gn3td1f Желаю феерических успехов✊
@user-eo3gn3td1f 4 ай бұрын
@@skillblog-web 😳😳😳
@advokats086 4 ай бұрын
СИСТЕМА ОПЛАТЫ ТОВАРОВ В МАГАЗИНЕ --- ИНТЕГРИРОВАНА ???
@skillblog-web 4 ай бұрын
В общем - да)
@kudo6 4 ай бұрын
это завершенный проект???
@skillblog-web 4 ай бұрын
Почти, будет продолжение
@ivloper 3 ай бұрын
Отличный контент, жаль не наткнулся раньше. Не как у @ArchakovBlog, где все по полочкам. Тутава уже планка знаний повыше требуется. Лайк, подписка, хорошего вечера! день 4: дошел до 2:24:00 Частенько ставлю на паузу, чтобы разобраться в стилях.
@samratguha7053 4 ай бұрын
plz make in english
@palkan2590 4 ай бұрын
локализация сделана очень странным образом
@Fs-xj2gu 4 ай бұрын
сделай выпуск с reatom + react
@deuxego 4 ай бұрын
В смысле курьера не будет? Дизлайк отписка :)
@morzemorze8787 4 ай бұрын
Вот только версель не пускает русских. Можно уроки представлять не на иностранных сервисах? Как обойди версель?
@skillblog-web 4 ай бұрын
Я успешно залил на версель, живу в России. Попробуй впн
@amvfromken6645 3 ай бұрын
если кто-то знает помогите пожалуйста🙏!!! Автор похоже удаляет этот коментарий. после команды yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plagin-prettier prettier у меня выдает вот такую ошибку - info No lockfile found. warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. с чем это связано? помогите пожалуйста🙏
@skillblog-web 3 ай бұрын
Привет. В самой ошибке решение написано. Удали package-lock.json и переустанови пакеты
@amvfromken6645 3 ай бұрын
Так у вас же на видео не выдает такой ошибки, и на протяжении видео вы его не удаляете. это в будущем никакой ошибки не повлечёт за собой?
@amvfromken6645 3 ай бұрын
Заранее спасибо за ответ
@skillblog-web 3 ай бұрын
@@amvfromken6645 Я его у себя просто не заметил и поэтому не удалил. Из-за него не всегда появляются ошибки, но lock файл всегда должен быть один в проекте. Либо yarn-lock либо package-lock, ну или ещё какой-нибудь, смотря какой пакет менеджер.
@amvfromken6645 3 ай бұрын
удалил этот файл, теперь осталось только выдает info No lockfile found, тип команда не распознана, может какие-то команды для yarn прописать? чтоб все распознавалось@@skillblog-web
@Sexy4erru Ай бұрын
Все сделал по твоему видео, но что-то у меня не работает либо неустановленно, а хотя видео написанно что с нуля хоть бы сказали что делать если пакеты или программы не установленны и как их установить нифига не работает!
@erdauletbayangali7470 4 ай бұрын
Спасибо
Skill Blog: Веб-разработка
Рет қаралды 2,6 М.
ЭМПАТИЯ МАНУЧИ
Рет қаралды 370 М.