🍕 NextPizza / Разработка FullStack интернет-магазина (клон ДодоПиццы) [NextJS, TS, Prisma, NextAuth]

КАРЛ! Я ВСЕ ЕЩЕ ЖЫВ! Возвращаюсь с очень крутой инфой! 🍕🔥 Мы начинаем новый туториал по NextJS TypeScript 🔥 На этот раз мы будем разрабатывать полноценный интернет-магазин продуктов, проще говоря реальную копию ДодоПицца (и даже круче чем додопицца). Подпишись на Telegram-канал , тут будут доступны все исходники и другая полезная информация. ☕️ Поддержать донатом: Курс длится около 23 часов 👀 и да, офигенного контента там очень много. 🧐 Для кого этот курс? Курс предназначен для уровня Junior / Pre-middle / Middle 👨🏻‍🎓. В данном курсе не объясняется NextJS с нуля, это важно учитывать перед просмотром тутроиала. Также, если ты не знаешь реакт, советую сначала перейти к изучению React Pizza v2 и потом уже смотреть в сторону NextJS 🤔 Что входит в курс? 1. Полноценная фильтрация товаров с серверным рендерингом и хранением параметров в URI 2. Вывод товаров, добавление товаров в корзину 3. Авторизация и регистрация с помощью логин-пароля / GitHub / Google 4. Подтверждение аккаунта через письмо на E-Mail 5. Редактирование профиля 6. Покупка товаров с помощью Yookassa 7. Вывод товара в модальном окне или в отдельной странице (Parallel Routes) 8. Отправка писем на почту при: регистрации, создании заказа и после успешной оплаты 9. Vercel для хранения данных БД и деплоя приложения 10. Как работают клиентские и серверные компоненты на реальных примерах (не инфа с доки) ⚙️Что по технологиям? 1. NextJS (Parallel Routes, Group Routes, Server Actions, API) 2. TypeScript 3. TailwindCSS ShadCN 4. Prisma PostgreSQL 5. NextAuth 6. React Hook Form Zod 7. Zustand 8. react-use 9. nextjs-toploader 10. react-hot-toast 11. react-insta-stories 12. lucide-react 13. Resend 💾 Ссылка на исходник и дизайн: 🎉 Как задеплоить Vue Sneakers: 👟 Ссылка на JSON-товаров: 🔗 Ссылки на мои ресурсы: — Telegram-канал: — Поддержать донатом: — GitHub: — Моё резюме: ⏰ Таймкоды: 00:00:00 Введение 00:03:20 Начало 00:13:55 Figma-дизайн приложения 00:16:55 Настраиваем стили, используем готовый исходник 00:18:25 Подключаем TailwindCSS ShadCN 00:31:55 Подключаем Lucide icons 00:32:50 Вёрстка Header 00:53:10 Вёрстка Categories 01:04:20 Вёрстка фильтров 01:28:00 Что такое Client Component / Server Component 01:37:10 Исправляем ошибку с помощью ’use client’ 01:44:10 Доделываем фильтры 01:51:50 Вёрстка списка продуктов 02:07:50 Используем Intersection Observer для подсветки категорий 02:16:00 Подключаем ЗУСТАНД 02:26:30 Подключаем Prisma, объясняю как писать схему 02:56:00 Пробуем получить данные из БД через наш API 03:10:30 Связи в Prisma. One-to-One, One-to-Many, Many-to-One, Many-to-Many (Relations ships) 03:25:10 Доделываем основную часть схемы 04:17:00 Пишем скрипт для генерации тестовых данных (Seeding) 05:15:30 Создаем API для ингредиентов 05:18:30 Создаем API для продуктов 05:24:30 Делаем поиск на фронтенде 05:56:25 Доделываем основную логику фильтров 07:24:20 Отображаем группу продуктов и категории с БД 07:56:00 NextJS: Group Routes / Layouts 08:17:00 Создаем модальное окно продукта (Parallel Routes) 10:32:45 Реализация корзины 13:13:15 Подключаем react-hot-toast 13:21:10 Доделываем модальное окно продукта 13:44:30 Как NextJS рендерит JS-код клиентских и серверных компонентов (оптимизация) 14:00:00 Доделываем фильтрацию товаров с хранением параметров в URL 14:36:00 Отображение страницы товара (как в модальном окне) 15:52:30 Докручиваем логику корзины 15:30:00 Делаем страницу оформления заказа 17:41:00 NextJS: Server Actions 17:48:00 Создание заказа 18:15:20 Подключаем сервис Resend для отправки E-Mail писем 18:39:00 Подключаем оплату через Yookassa 19:05:10 Доделываем функционал обработки заказа 19:45:10 Реализация авторизации, регистрации, профиля через NextAuth 21:46:00 Подтверждение аккаунта с помощью проверочного кода на E-Mail 22:06:35 Дорабатываем контактную форму оформления заказа 22:12:30 Разработка сторисов с помощью react-insta-stories 22:34:20 Деплой проекта в Vercel 22:54:00 Конец список донатеров #Nextjs #Zustand #Resend #NextAuth #React #Postgresql #Prisma