Полная копия Яндекс Такси на React (Next JS, Tailwind CSS, @reduxjs/toolkit, google maps api)
► Интенсив React с нуля (приложение для тренировок) - https://htmllessons.ru/int/show/3?utm...
В этом крутом ролике мы сделаем копию приложения Яндекс Такси на React + Next JS
Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 200 лайков и я снимаю следующую полную копию приложения
Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!
💰 Новый ролик для спонсоров доступен на Boosty https://boosty.to/redgroup или в нашей общей подписке (от 3 мес.) на сайте https://htmllessons.ru/premium
Скачать 🖥 исходник проекта в нашем хранилище - https://htmllessons.ru/storage#storag...
#React #NextJS #Typescript
Сегодня мы разработаем полную копию приложения Яндекс Такси. Разработка будет идти на React + Next JS (SSR, удобный роутинг...). Добавим немного типизации с помощью TypeScript для комфортной разработки. В качестве UI фреймворка будем использовать Tailwind CSS. Если говорить про стили, еще подключим библиотеку classnames, чтобы удобно делать проверки и устанавливать нужный class. Также будем использовать @reduxjs/toolkit и react redux для работы с состоянием, это нам позволить хранить откуда поедем, куда поедем и другие данные. Поставим библиотеку react-icons для вывода SVG иконок в приложении. Для реализации карты и подсказки адресов, будем использовать google maps api.
Тайм коды:
00:00:00 - Приветствие из солнечной Греции
00:00:20 - Дизайн
00:01:01 - На чем будем писать?
00:02:22 - ДЕМО
00:04:00 - Установка проекта + все библиотеки
00:05:13 - Иконки, тема редактора и шрифт VS Code
00:05:26 - Продолжаем установку библиотек
00:07:24 - Структура проекта
00:11:56 - Layout (preloader, компонент HEAD, компонент Script)
00:17:12 - Loader
00:19:00 - Как устроен роутинг в Next JS?
00:20:13 - Компонент Home
00:21:39 - Реализация карты
00:27:40 - Первое поле адреса (places autocomplete)
00:39:10 - Фокус на поле (useRef)
00:41:34 - Выпадающие подсказки в поле адреса
00:49:10 - Состояние Redux toolkit (slices)
00:55:47 - Удобный кастомные хуки для Redux
01:00:00 - Центрируем карту исходя из первого адреса
01:01:20 - Второе поле "куда поедем"
01:02:40 - Блок с тарифами
01:10:00 - Кнопка "Заказать" (свой UI компонент)
01:17:06 - Строим маршрут через Google Maps API
01:28:47 - Вывод времени поездки
01:29:25 - Считаем стоимость поездки
01:30:24 - Финальный тест
01:31:36 - Спасибо за просмотр!
► Интенсив Node.js + Express - Backend с нуля - https://htmllessons.ru/int/show/2?utm...
► Интенсив по верстке сайта с 0 - https://htmllessons.ru/int/show/1?utm...
👉 Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
► Оформить подписку на нашем сайте - https://htmllessons.ru/premium
► Эксклюзивный контент - https://boosty.to/redgroup
► Оформи спонсорство и получи уникальный значок и эмоджи - / @redgroup
► Хранилище (здесь все файлы к видео) *требуется авторизация - https://htmllessons.ru/storage
► Научим разрабатывать сайты - https://htmllessons.ru/
► Личный Instagram - / maxzbs
► Личный Youtube - / @maxhustleinsilence
► Получи до 4000 руб. на первое бронирование через Airbnb - https://abnb.me/e/Mgl6khUuN3
► Если хочешь улучшить качество видео - https://htmllessons.ru/ext/donate
► Мой сетап VS Code - • Настройка Visual Studio Code для раз...
Немного обо мне: меня зовут Максим, я уже 9 лет занимаюсь веб-разработкой. На данный момент являюсь основателем двух крутых проектов htmllessons.ru и еще одного глобального проекта. Первый, был моей дипломной работой в колледже. Как и все, начинал с изучения верстки html, css, js. Затем появилась потребность в изучении Laravel для разработки образовательного проекта. Затем я ушел от PHP и перешел на Javascript, так как появилась задача по разработке крупного проекта. Основная миссия – создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы меня поддержите и подпишитесь на мой канал. Спасибо 😊