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

КАРЛ! Я ВСЕ ЕЩЕ ЖЫВ! Возвращаюсь с очень крутой инфой! 🍕🔥

Мы начинаем новый туториал по NextJS + TypeScript 🔥
На этот раз мы будем разрабатывать полноценный интернет-магазин продуктов, проще говоря реальную копию ДодоПицца (и даже круче чем додопицца).

Подпишись на Telegram-канал https://t.me/archakov_im, тут будут доступны все исходники и другая полезная информация.

☕️ Поддержать донатом: https://boosty.to/archakov_blog

Курс длится около 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

💾 Ссылка на исходник и дизайн: https://t.me/archakovblog/601
🎉 Как задеплоить Vue Sneakers:    • Как задеплоить фронтенд проект на Ver...  
👟 Ссылка на JSON-товаров: https://604781a0efa572c1.mokky.dev/items

🔗 Ссылки на мои ресурсы:
— Telegram-канал: https://t.me/archakov_im
— Поддержать донатом: https://boosty.to/archakov_blog
— GitHub: https://github.com/Archakov06
— Моё резюме: https://career.habr.com/archakovim

⏰ Таймкоды:

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