КАРЛ! Я ВСЕ ЕЩЕ ЖЫВ! Возвращаюсь с очень крутой инфой! 🍕🔥 Мы начинаем новый туториал по 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: • Как задеплоить фронтенд проект на Ver... 👟 Ссылка на 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
