🎯 Загружено автоматически через бота:
🚫 Оригинал видео:
📺 Данное видео принадлежит каналу (@ArchakovBlog). Оно представлено в нашем сообществе исключительно в информационных, научных, образовательных или культурных целях. Наше сообщество не утверждает никаких прав на данное видео. Пожалуйста, поддержите автора, посетив его оригинальный канал.
✉️ Если у вас есть претензии к авторским правам на данное видео, пожалуйста, свяжитесь с нами по почте support@, и мы немедленно удалим его.
📃 Оригинальное описание:
КАРЛ! Я ВСЕ ЕЩЕ ЖЫВ! Возвращаюсь с очень крутой инфой! 🍕🔥
Мы начинаем новый туториал по 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