🌟 Поддержать автора: https://boosty.to/teacoder
🔗 Проект на сайте: https://teacoder.ru/courses/prilozhenie-dlya-dostavki-edy
📢 Присоединяйтесь к Telegram каналу: https://t.me/TeaCoder_official
В этом крутом видео я покажу как создать крутое мобильное приложение. В целом мы реализуем полноценное приложение для доставки еды на React Native, с использованием огромного количества технологий. Также структура проекта будет максимально масштабируемой.
🎯 Что реализуем в видео:
- 🛠️ Full-stack реализация
- 💳 Реализация оплаты
- 🛒 Полноценная корзина и оформление заказа
- 🔑 Авторизация пользователей
🛠️ Стэк проекта: React Native, Nest.js, PostgreSQL, Prisma, React Hook Form, Redux Toolkit, TypeScript
🕒 Таймкоды:
00:00:00 - Начало
00:00:32 - Стэк проекта
00:01:35 - ДЕМО
00:04:26 - Разворачиваем бэкэнд
00:06:58 - Настройка VS Code
00:08:41 - Создание БД
00:14:18 - Первая генерация
00:16:29 - Как будет работать авторизация
00:18:00 - Авторизация
00:36:40 - Декораторы
00:39:00 - Заканчиваем описывать схему БД
00:43:11 - Генерируем все сущности
00:44:00 - Сервис для категорий
00:50:27 - Контроллер для категорий
00:53:27 - Проверка работы контроллера
00:55:18 - Сервис для продуктов
01:02:42 - Контроллер для продуктов
01:03:36 - Тестируем
01:06:18 - Описываем юзера
01:08:18 - Проверяем контроллер для юзера
01:10:15 - Что такое React Native?
01:11:02 - Разворачиваем фронтенд
01:11:57 - Структура проекта
01:13:20 - Как запустить проект?
01:16:53 - Настройка prettier, babel, tsconfig
01:21:26 - Навигация в приложении
01:30:47 - Tailwind в React Native
01:32:26 - Страница входа React hook form
01:40:25 - Компонент Button
01:45:27 - Компонент Field и Generic
01:50:40 - Компонент AuthFields
01:54:43 - AuthContext и Splash Screen
02:00:56 - useAuth
02:01:23 - Доделываем навигацию
02:03:10 - Нижнее меню и слушатель роутов
02:14:55 - Компонент Toast
02:16:48 - api request
02:20:17 - api interceptors
02:23:43 - Создаём работу с токенами
02:29:35 - Продолжаем работать с интерсепторами
02:35:03 - Auth service
02:37:23 - Хук useCheckAuth
02:37:23 - useCheckAuth
02:40:12 - Доделываем AuthProvider
02:41:25 - Подключаем Tanstack Query
02:42:51 - Пишем первые мутации
02:47:11 - User Service
02:48:27 - Хук useProfile
02:49:26 - Layout приложения
02:50:28 - Компонент Heading
02:51:10 - Страница профиля
02:54:08 - Переходим к главной странице
02:56:44 - Category Service
02:58:40 - Хук useGetAllCategories
02:59:30 - Категории на главной
03:03:44 - Делаем каталог
03:15:57 - Страница поиска
03:21:31 - Страница Explorer
03:23:13 - Хук useTypedRoute
03:24:10 - Хук useCategory
03:26:58 - Отдельная страница с категорией
03:28:40 - Хук useProduct
03:29:24 - Отдельная страница с продуктом
03:36:22 - Список избранного
03:36:55 - Добавление в избранное
03:39:20 - store.ts
03:41:00 - Redux корзина
03:43:47 - Хук useTypedSelector
03:44:16 - Хук useActions
03:44:45 - Хук useCart
03:45:31 - Добавление товаров в корзину
03:49:00 - Страница корзины
03:54:37 - Заканчиваем описание схемы БД
03:57:40 - Подключаем Stripe
03:59:02 - Order Service
04:01:01 - Order Dto
04:01:57 - Заканчиваем Order Service
04:03:11 - Order Controller
04:03:57 - Тестируем оплату
04:05:44 - Оплата на клиенте
04:11:45 - Финал
#react #reactnative #typescript #teacoder