КАРЛ! Я ВСЕ ЕЩЕ ЖЫВ! Возвращаюсь с очень крутой инфой! 🍕🔥
Мы начинаем новый туториал по 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
4,217 views
707
189
1 month ago 00:03:50 1
[엄마친구아들 (Love Next Door) OST Part 7] 정해인 (Jung Hae In) - 꺼내지 못한 말 (The truth) MV
1 month ago 00:12:26 1
Why Can’t Someone Look At Me The Way I Look At Pizza?
1 month ago 00:01:40 1
Dimensional Double Shift | Launch Trailer | Meta Quest Platform
1 month ago 00:10:01 1
NYC’s BEST Attraction ? Touring the Intrepid Museum ! (Things To Do in New York City)
1 month ago 00:00:59 1
[Trent Harrison] Chips To Snack on For Weight Loss‼️‼️
1 month ago 00:00:59 5
[HAUS PLANS™️] Cooking A Pizza On The Jobsite
1 month ago 00:14:42 1
How to Make the Best Italian TOMATO PASTA SAUCE Recipe EVER