Полная копия Яндекс Такси на 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, так как появилась задача по разработке крупного проекта. Основная миссия – создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы меня поддержите и подпишитесь на мой канал. Спасибо 😊