Интернет магазин одежды Ростелеком с нуля до деплоя: Next.js + React-admin + OAuth + MongoDB

[@ArchakovBlog]

Пушка! 🔥Этот титанический труд заслуживает ещё больше лайков!

[@ivanhurbatov4307]

ого, Арчаков дал рецензию, значит это точно стоит смотреть и вникать)) Начинаю 12 часовой пробег)

[@Ivan-ee4pz]

И Сенсей тут, вот это я понимаю годноту нашёл

[@LavandaKicK]

Это знак качества! Делаю

[@Фриск-о9с]

Поздравляю с отлично выполненной задачей! Твои усилия заслуживают громких аплодисментов и искренней признательности!

[@motodriverrf]

Обязательно продолжай снимать видео! Такие курсы обычно продают за большие деньги!

[@Eva_White]

Бро, какой же ты все таки трудоголик!Молодец! Ты наша гордость! ❤

[@AbukaPaintOzd5627]

Дэни, наконец-то новый ролик!!🎉🎉 Почти 12 часов!!! Такого количество времени я не ожидал!!😮 Поздравляю тебя с 5 тыс.подписчиками!!:)

[@artems5802]

Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?

[@mrtopal89]

Выглядит чудесно! Надеюсь, уложусь в месяц. Ты крут, спасибо!

[@beybell]

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

[@1982RUFF]

Наконец-то дождались! 🥳 Спасибо огромное за суперский контент! 🔥

[@AndreyEmelianovv]

Ура! Новый видос. Сразу лайк не глядя. Спасибо за твой труд!

[@igorsenichev3779]

Спасибо за полезное видео! Надеюсь увидеть продолжение - это будет шикарно 😇🤗

[@JED4109]

Ты просто космос, просто красавчик, спасибо большое за такой объем полезных знаний.

[@alextotun]

Очень познавательно, с глубоким погружением! Интересно, сколько по факту времени ушло, да, с учетом что это только половина проекта.) Спасибо! Всех Благ!

[@geroigamechannel222]

Мужиииииик, ты Мега круто, спасибо за бесплатный контент, продвижения тебе 🔥🔥🔥🔥🔥

[@FilipParfenov]

Невероятно интересный ролик... Тот кто все это сидел писал - знай ты достоин большего!

[@iuseronline]

Фантастика! Не видел раньше канал. В рекомендации попал

[@amvfromken6645]

автор просто мужик😁,проект бомба, самое прикольное узнавать новые фишки

[@ДмитрийС-ш9б]

Господи, как же интересно смотреть! P.S. Просто диву даюсь, какая же колоссальная работа проделана, браво! Охренеть просто, невероятно! P.P.S. Поражаюсь, как ты это всё помнишь, удивительно! P.P.P.S. Одним словом: охренеть! Супер крутой ролик. Очень хотелось бы перенять весь твой опыт. Поразительно!

[@S-craY]

Очень крутой контент, который заслуживает неимоверное количество лайков, спасибо за титанический труд!!!

[@unicoxr5tj417]

11 чтоб его часов и таймкодики, это до слез прекрасно👍

[@SergeyForeverOutoff]

Супер. Есть чем на месяц себя занять. Спасибо за контент

[@RAaaa777]

The best ecommerce project tutorial on youtube!

[@МихаилСабуров-ы1в]

Ну ничего себе что мне упало в рекомендации. Обязательно к просмотру

[@warpscore]

Очень круто, спасибо огромное за такой контент!

[@viacheslauabaimov3880]

Огромнейшее спасибо !

[@natanrock4358]

Спасибо большое! Крутой материал для просмотра

[@AurumCode-17]

отличный контент , лайк и коммент для продвижения офигенного контента !

[@FerisovGerman]

Вой бро, это просто невероятно!

[@14m10st]

Это офигеть. Я просто в шоке. Ты гений и мастер своего дела!

[@butyrskiy]

Огромное спасибо за контент! Очень жду продолжения. Когда уже?)

[@dorin6880]

Контент огонь! Благодарим

[@SibirFreestyler]

При регистрации через другие серверы выдаёт ошибку: TypeError: Cannot read properties of undefined (reading 'displayName') Перепробывал уже много всего, ошибка остаётся. Никто не сталкивался с этим?

[@artems5802]

Спасибо, ты лучший!

[@lightyagami4667]

I don't understand language but i respect your dedication 🙌

[@Commondore]

Материал бомба! К БЭМу есть вопросы. Классы элементов имеют большую вложенность. Т.е элементы элементов это бэм не любит

[@ВсеволодЗахаров-я1ы]

Не совсем понял почему для header и некоторых компонентов создаются общие стили, а не модульные...

[@IvanovJeniaIT]

Молодец, очень хорошее видео

[@amvfromken6645]

не получается подключиться к mongodb, кто знает из-за чего может быть? И не создаются папка миграции с джейсон файлом

[@sshorins]

у тебя получилось это пофиксить? у меня просто тоже error 500

[@amvfromken6645]

@@sshorins не

[@tigranharutyunyan7674]

Great job, but catalog, product details pages are missing from demo.Thanks

[@люблюшаверму-ы2ь]

Подскажите, пожалуйста, при нажатии сочетания Ctrl+. появляется окно с Извлечь, Переписать, Переместить, никаких автофиксов нет, что делаю не так?

[@fckincummer4934]

ОГРОМНОЕ СПАСИБО ! ПРОСТО ЛУЧШИЙ🫂

[@ДмитрийСитников-ш2х]

Может, разместить эту серию видео на других платформах? На ютубе проблематично смотреть

[@vit944]

Это просто прекрасное видео. Спасибо братишка). Можешь подсказать, какой паттерн структуры проекта ты применяешь в этом видео?

[@skillblog-web]

@@vit944 скорее, модульная архитектура тут просто

[@kudo6]

this is completed ???????????

[@МихаилСабуров-ы1в]

Посмотрел меньше часа, много копипаста. Толком нет объяснения. Понимаю если все разжевывать, то видео получится огромное, но все же лучше сделать несколько больших видео или несколько частей, чем просто копировать и вставлять код в редактор. Смысл тогда этого видео? Для новичков сложно, для продвинутых я думаю не будет так актуально. Шрифты подключаются странно, в доке по Next по другому, зачем делать отдельные лайоуты и подключать их в общем лайоуте? В next это реализовано по другому. Какой БЭМ в Next? Есть же tailwind (рекомендован Next), ну на крайний случай есть page.module.css. Это первые моменты которые бросаются в глаза. Про effector нет понимания для чего он, в чем удобство. Или мне еще рановато подходить к этому проекту или автор хотел просто показать, а не научить. Может быть вернусь позже, а пока больше непонимания, чем пользы. Не в обиду автору. Труд титанический, проект крутой!!!

[@narwhal6422]

Наверно верстка просто готовая есть, заказал у верстальщика, они по бэм в основном делают

[@lovelaravel1140]

Effector используется на полную катушку. Объяснений ноль. Руководств нормальных по effector просто нет. Труд титанический, а польза лично для меня нулевая. Перед этим курсом нужен очень подробный курс по Effector.

[@yaroslavzef7267]

Крепкий профессионал

[@dopetag]

3:00:11 Почему ты используешь NEXT_PUBLIC_DB_URL, если запросы нужно отправлять только с сервера?

[@skillblog-web]

Чтобы к монге подключиться)

[@aizen1252]

Привет, мне сразу зашла подача и объяснение материала на твоём канале. Такой качественный контент хорошо выстреливает, желаю дальнейшего продвижения каналу. Есть единственный вопрос, что если я не использую yarn, а пользуюсь npm пакетами. Этот проект мне не удастся повторить? Такое чувство что словлю миллион ошибок.

[@skillblog-web]

Можно и npm использовать, проблем быть не должно

[@aizen1252]

​@@skillblog-webспасибо, как выучу все технологии на видео, обязательно попробую👍

[@dahz7]

@@aizen1252 и как оно?

[@marpusik1277]

Пасиба 😘

[@VN1337]

Спасибо тебе есть к чему идти 😅

[@tohachannel5621]

может я что-то не понимаю, но разве нельзя было сделать навешивания класса для body в элементе rootlayout? получая состояние бургера и изменения стиль)

[@skillblog-web]

Помимо бургеров есть ещё куча других модалок. Большое условие получится, и к тому же в некоторых местах нужно падинг справа изменять. Поэтому функция удобнее)

[@Мишаня-х1я]

Всем привет, оч понравился проект хотел бы с автором повторить, но ссылки на макет и исходники не работают( Проект актуален?

[@peacedeath999]

крутое видео, интересно узнать, а какой паттерн проектирования использовался в данном проекте?

[@skillblog-web]

Например Headless Component

[@peacedeath999]

@@skillblog-web спасибо! Когда ждать следующую часть?

[@skillblog-web]

@@peacedeath999 Через пару недель где-то, точно не могу сказать)

[@versusn9me]

А где отслеживание товаров?( П.С Может я просто не заметил, подскажите

[@СтефанРыбка]

а с 13 версией NextJs есть смысл знакомиться, или 14 версия уже полностью его заменила?

[@skillblog-web]

Там разница небольшая можно с 14 начать сразу

[@СтефанРыбка]

спасибо за ответ@@skillblog-web

[@kudo6]

отличная работа

[@sardorsultanov3409]

Проект хороший но надо чуть чуть увеличить шрифт редактора

[@sergeishmelev8000]

Привет )) А сколько всего по времени ушло на такой проект +- с учётом решения всяких багов и т.д.?

[@skillblog-web]

Привет, он пока не закончен, продолжение в процессе. А то что уже выложил заняло около полутора месяца +-

[@ivloper]

Отличный контент, жаль не наткнулся раньше. Не как у @ArchakovBlog, где все по полочкам. Тутава уже планка знаний повыше требуется. Лайк, подписка, хорошего вечера! день 4: дошел до 2:24:00 Частенько ставлю на паузу, чтобы разобраться в стилях.

[@MenuMoscow]

как ты мог так круто придумать

[@ПавелСвенин-ъ4в]

Супер, просто бомба

[@lyudmilagvozdeva2605]

Привет! Как скачать svg-иконки из исходников? Не отображаются((

[@skillblog-web]

Привет! Если ты про репозиторий, то скопируй код svg. Если речь про макет, то сохрани макет в свои файлы и потом можешь скачивать

[@FilipParfenov]

Скажи пожалуйста какие плагины ты используешь?

[@skillblog-web]

В описании есть ссылка на чат для помощи и общения, давай туда, а то тут неудобно

[@user-mg1mu1sn7z]

Привет, друг, когда будет продолжение?

[@skillblog-web]

Привет. Думаю через несколько недель +-

[@sadasd3826]

Здравствуйте,а есть GitHub репозиторий проэкта?

[@skillblog-web]

@@sadasd3826 Здравствуйте! Да, в описании ссылка

[@NoName-ee7eq]

Привет, спасибо за макет, но есть жесткие вопросы "почему так..." 1. Почему ты решил делать много стейтов с булевыми переменными для ссылок на одежду, акссесуары и т.п.? (CatalogMenu, Menu) вместо одного стейта который бы хранил айдишку активного элемента. 2. Почему ты решил делать массивы объектов внутри FC? Когда перерендеривается реактом компонент, массив тоже заново будет делаться) (нужно было вынести хотя бы до функции, а еще лучше в другой файл и делать просто импорт, дабы не засорять код компонента.) Я понимаю, может время, но рутину ты копипастил, почему это нет? Да и если бы ты сделал 1 пункт более правильно, то времени меньше бы потратил

[@skillblog-web]

Не такие уж и жёсткие вопросы, вполне адекватные и по делу👍

[@NoName-ee7eq]

@@skillblog-web + у тебя в деплое баг с модалкой аутентификации, ты забыл добавить проверку на активную модалку. коротко: signIn === true? signIn modal : signUp modal ибо сейчас у тебя если нажмешь на авторизацию, то регистрация остается не закрытой и будет видна её нижняя часть

[@NoName-ee7eq]

@@skillblog-web а почему тебе так не нравится адаптировать через CSS? этот(useMediaQuer) хук же полная гг по оптимизации..

[@NoName-ee7eq]

@@skillblog-web если тебе такое нравится, то могу еще раскритиковать момент касаемо твоей верстки и стилизации.. почему так много position absolute??? Например заголовки секций с продуктами. Вместо позишина, ты мог засунуть в 1 див условно заголовок секции + ссылку. Этот див помещается внутрь контейнера, задаешь ему display: flex, justify-content: space-between. Всё. А если уж душнить, то в идеале нужно было еще вынести русский и англ язык для работы с переводами в разные файлы. А в проде в таких случаях юзают готовые решения по типу lingui UPD: касаемо первого, связ с дивом еще офк align-items: center, чтобы ровно было. UPD2: Посмотрел еще больше для интереса уже и нашел ProductsListItem. Зачем там тернарник? Почему ты решил что это лучше, если можно например просто выводить передаваемый заголовок, как ты делал это в других компонентах? P.S.: Я не смотрел фулл этот курс, не могу знать точно, может ты это показал для ознакомления, или еще чего и забыл потом переделать на более лучший подход. И нет, я не хейтер. Просто сделал а-ля ревью, вдруг тебе было действительно интересно увидеть все ошибки. Да и судя по комментариям, смотрят тебя новички, которые хотят чему-то научиться. Такой код явно не лучший показатель для обучения, надеюсь что покажешь в следующем видео в начале небольшую вставку, редакцию или что-то подобное, дабы люди смогли увидеть как лучше и почему.

[@skillblog-web]

​@@NoName-ee7eq Спасибо за обратную связь, обязательно учту твои рекомендации и в продолжении по возможности внесу правки👍✊

[@evstafyevandrew2198]

Ура! Сайт на русском!!! Спасибо!!! Меня всё время мучил вопрос - а почему наши горе-лекторы разрабатывают сайты in English? А потом понял! Берут чужие малоизвестные уроки, показывают нам на английском. Типа каждый программист должен знать... А потом им всё равно что при локализации лезут ошибки из всех щелей. А здесь сайт по русски... PS Только прошу а) избавиться от слава-паразита «также», которое Вы повторяете безчётное число раз б) имена вводимых пакетов («@typescript-eslint/...») дописать либо в описание видео, а лучше - в md репозитария

[@erdauletbayangali7470]

Спасибо

[@kobakamladze4175]

Топ!!!

[@TaytsuBaku]

Хотел бы знать, стоит ли писать на чистом React или на Nextjs?

[@skillblog-web]

Лучше на некст

[@TaytsuBaku]

@@skillblog-web я изучаю чисто реакт пока только месяц, стоит ди уже перейти на nextjs?

[@skillblog-web]

Да, можно начать

[@AleksandrMaltsev-jm8ph]

Привет, сколько по времени у тебя ушло на этот проект?

[@skillblog-web]

@@AleksandrMaltsev-jm8ph Привет! Пару месяцев где-то +-

[@sergeevalexander4695]

Привет, я так понимаю это полноценный фронт и бэк?

[@skillblog-web]

О да

[@antonsha2027]

помню был node.js , он сейчас работает ?

[@skillblog-web]

Если речь про Некст, то да, под капотом там nodejs

[@Даниил0361Сизиков]

Лучший!

[@daffyteam]

Бутстрап? Tailwind же есть)

[@skillblog-web]

5:28:45 😅

[@versusn9me]

Глупый вопрос наверное. Почему все ведет в ошибку 404 и как исправить?

[@semenoff_dev]

404 - это ошибка, когда страница не существует. Надо создать страницу по аналогии с существующей и прокинуть путь до неё правильно. У автора сделана только одна страница.

[@likluklak]

почему Ростелеком название?

[@Geo-jh5dx]

Now it's time for me to learn new things hah

[@MrBenedig]

каааак? каааак дойти до такого уровня?))) у меня щас затык на затыке))))

[@mrundersson]

деплой во второй?

[@skillblog-web]

В этой тоже, в описании ссылка даже есть на результат

[@FilipParfenov]

Сколько нужно учиться что бы знать это все?)

[@skillblog-web]

Сложно однозначно сказать, у каждого индивидуально. Год точно думаю надо

[@FilipParfenov]

@@skillblog-web Ты красавчик! Сколько получил за этот сайт?

[@FilipParfenov]

@@skillblog-web Я сейчас только доучил HTML и иду к CSS но все равно очень интересно)

[@skillblog-web]

@@FilipParfenov Желаю феерических успехов✊

[@FilipParfenov]

@@skillblog-web 😳😳😳

[@ДмитрийС-ш9б]

Я опять смотрю этот ролик😂

[@advokats086]

СИСТЕМА ОПЛАТЫ ТОВАРОВ В МАГАЗИНЕ --- ИНТЕГРИРОВАНА ???

[@skillblog-web]

В общем - да)

[@vovapirotskiy5031]

а ссылки не работают?

[@skillblog-web]

Какие именно? У всех работает вроде

[@LavandaKicK]

Начал!

[@harshayyy9]

hats off ,add cation in english if possible

[@alexdor5425]

Я как раз искал все это

[@Мазака]

Видео ctrl C , ctrl V

[@constyak9031]

Это уровень стажер, я так понимаю?😊

[@skillblog-web]

Местами да)

[@kudo6]

это завершенный проект???

[@skillblog-web]

Почти, будет продолжение

[@mquix_x]

курьера найдем)

[@mquix_x]

Искал медь (Next.js), нашел золото (полный курс)

[@palkan2590]

локализация сделана очень странным образом

[@crossovochka]

а как надо?

[@samratguha7053]

plz make in english

[@deuxego]

В смысле курьера не будет? Дизлайк отписка :)

[@Fs-xj2gu]

сделай выпуск с reatom + react

[@morzemorze8787]

Вот только версель не пускает русских. Можно уроки представлять не на иностранных сервисах? Как обойди версель?

[@skillblog-web]

Я успешно залил на версель, живу в России. Попробуй впн

[@richardleshik7477]

Ребят, кто-нибудь сталкивался с ошибкой (3:00:42) при инициализации migrate-mongo? $ migrate-mongo init node:internal/modules/cjs/loader:1228 throw err; ^ Error: Cannot find module 'mongodb' Require stack:...

[@skillblog-web]

@@richardleshik7477 установи монгу через npm глобально

[@richardleshik7477]

​@@skillblog-web уже. Попробовал снова, перезагружал комп - не помогло. На всякий приложу полный лог ошибки: $ migrate-mongo init node:internal/modules/cjs/loader:1228 throw err; ^ Error: Cannot find module 'mongodb' Require stack: - C:\Users\user\AppData\Local\Yarn\Data\global ode_modules\migrate-mongo\lib\env\database.js - C:\Users\user\AppData\Local\Yarn\Data\global ode_modules\migrate-mongo\lib\migrate-mongo.js - C:\Users\user\AppData\Local\Yarn\Data\global ode_modules\migrate-mongo\bin\migrate-mongo.js at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15) at Module._load (node:internal/modules/cjs/loader:1051:27) at Module.require (node:internal/modules/cjs/loader:1311:19) at require (node:internal/modules/helpers:179:18) at Object. (C:\Users\user\AppData\Local\Yarn\Data\global ode_modules\migrate-mongo\lib\env\database.js:1:25) at Module._compile (node:internal/modules/cjs/loader:1469:14) at Module._extensions..js (node:internal/modules/cjs/loader:1548:10) at Module.load (node:internal/modules/cjs/loader:1288:32) at Module._load (node:internal/modules/cjs/loader:1104:12) at Module.require (node:internal/modules/cjs/loader:1311:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\\Users\\user\\AppData\\Local\\Yarn\\Data\\global\ ode_modules\\migrate-mongo\\lib\\env\\database.js', 'C:\\Users\\user\\AppData\\Local\\Yarn\\Data\\global\ ode_modules\\migrate-mongo\\lib\\migrate-mongo.js', 'C:\\Users\\user\\AppData\\Local\\Yarn\\Data\\global\ ode_modules\\migrate-mongo\\bin\\migrate-mongo.js' ] } Node.js v20.17.0

[@skillblog-web]

Перейди в чат для помощи по ссылке в описании. Там удобнее будет разрулить

[@amvfromken6645]

если кто-то знает помогите пожалуйста🙏!!! Автор похоже удаляет этот коментарий. после команды 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]

Привет. В самой ошибке решение написано. Удали package-lock.json и переустанови пакеты

[@amvfromken6645]

Так у вас же на видео не выдает такой ошибки, и на протяжении видео вы его не удаляете. это в будущем никакой ошибки не повлечёт за собой?

[@amvfromken6645]

Заранее спасибо за ответ

[@skillblog-web]

@@amvfromken6645 Я его у себя просто не заметил и поэтому не удалил. Из-за него не всегда появляются ошибки, но lock файл всегда должен быть один в проекте. Либо yarn-lock либо package-lock, ну или ещё какой-нибудь, смотря какой пакет менеджер.

[@amvfromken6645]

удалил этот файл, теперь осталось только выдает info No lockfile found, тип команда не распознана, может какие-то команды для yarn прописать? чтоб все распознавалось@@skillblog-web

[@Вячеслав-е6ц4ь]

Спасибо