Frontend Wiki: Проект аренды транспорта

Общая структура

Проект написан с использованием React.

frontend/
├── public/               # HTML-шаблон и статические ресурсы
├── src/                  # Основной код приложения
│   ├── components/       # React-компоненты (MapView, VehicleSelector и др.)
│   ├── App.js            # Корневой компонент
│   ├── index.js          # Точка входа
├── package.json          # Зависимости и скрипты

Установка

cd frontend
npm install
npm start

Основные компоненты

App.js (Осман)

Был разработан как скелет и главная страница всего проекта. Разрабатывался на основе дизайна на Figma c некоторыми изменениями.

Header.js (Осман)

Второй по важности компонент после App.js. В проекте Header реализован в виде бокового меню. Именно с помощью этой компоненты реализовано почти все перемещение по интерфейсу приложения. Она содержит в себе компоненты Profile.js, Payment.js, RideHistory.js, Support.js, Settings.js.. Из Header можно перейти практически в любую часть приложения. Были реализованы все окна для пунктов из Header.js. Идея реализовать Header именно в таком виде пришла из других популярных сервисов по аренде транспорта.

MapView.js (Осман)

Отображает карту с маркерами транспорта. Было решено использовать библиотеку @pbe/react-yandex-maps, так как она удовлетворяет условиям нашего проекта, хоть и возможностей меньше чем у использования Яндекс Карт через API. Карту можно двигать приближать, для проекта этого было достаточно.

VehicleSelector.js (Осман)

Компонент с информацией о типах транспорта и их цене (велосипед, электровелосипед, электросамокат). Планировалось реализовать выбор транспорта через эту компоненту, как это сделано у популярных сервисов по аренде трансопрта, но в итоге было решено использовать вариант выбора транспорта с помощью меток, это быстрее и проще. Так как при реализации выбора транспорта с помощью селектора логично было бы подвязать автоматический выбор ближайшего транспорта, а для этого нужно запрашивать местоположение пользователя, учитывая затраты времененого и человеческого ресурса, такое решение было бы не целесообразно.

RideButton.js (Осман)

Большая красивая кнопка GO RIDE снизу главного экрана. На начальных этапах так-же планировалось взаимодействие с этой кнопкой. Пользователь должен был выбрать интересующий его вид транспорта с помощью компоненты VehicleSelector.js и при нажатии на кнопку GO RIDE транспортное средство бронировалось и начиналась аренда транспорта. В последствии так-же было решено отказаться от этой идеи в пользу аренды с помощью меток, по причинам описанным ранее.

RideHistory.js (Осман, Ильдар)

Была реализована история поездок, сначала как заглушка, для разработки дизайна. История поездок содержит всю необходимую информацию, такую как дата начала поездки, длительность поездки, расстояние, маршрут, стоимость и вид транспорта. В последствии Ильдар связал Историю поездок с Backend и синхронизировал ее с историей платежей.

Адаптивность

Была реализована адаптивность с помощью медиа запросов CSS.

Для смартфонов:

@media (max-width: 360px)

@media (max-width: 480px)

Для планшетов:

@media (max-width: 768px)

Тестирование

Автоматическое

Тесты (только App.js), написаны с использованием @testing-library/react.

Запуск:

npm test

Ручное

См. файл TESTING.md

Стили

Используются CSS-файлы, подключённые напрямую к компонентам.

Зависимости

• react
• react-scripts
• @pbe/react-yandex-maps
• @testing-library/react

Запуск сборки

npm run build

Артефакты сборки будут в папке build/.

Разработка и деплой

• React-приложение запускается локально через npm start
• Для деплоя можно использовать Vercel, Netlify или собственный сервер Nginx