Финальный проект

Вам предстоит самостоятельно написать приложение для заказа такси.

Пример приложения

Логин: test@test.com Пароль: 123123

Работа с сервером

Для получения данных о маршруте и списка доступных адресов - вы можете использовать сервер.

Так же на сервере реализована простейшая система авторизации с захардкоженными данными.

Доступные запросы

/auth - позволяет авторизоваться (test@test.com / 123123)
/route - возвращает список точек для маршрута
/addressList - возвращает список доступных адресов

Более подробное описание на странице сервера.

Для сервера использован сервис glitch, так что вы можете взять существующий сервис за основу, сделать его ремикс и улучшить на своё усмотрение. Например добавить регистрацию и хранение данных пользователя.

Работа с картой

Для работы с картой предлагается использовать сервис mapbox. Он предоставляют библиотеку для Javascript, её довольно удобно использовать для отображения карты и маршрутов на ней.

Документация для Jаvascript библиотеки

Для работы с картой вам потребуется зарегистрироваться на mapbox и получить токен.

Пример использования карты в приложении

export default class Map extends Component {
  map = null;
  mapContainer = React.createRef();

  componentDidMount() {
    mapboxgl.accessToken = "ВАШ ТОКЕН С mapbox";
    this.map = new mapboxgl.Map({
      container: this.mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v9",
      center: [30.2656504, 59.8029126],
      zoom: 15
    });
  }

  componentWillUnmount() {
    this.map.remove();
  }

  render() {
    return <div ref={this.mapContainer} />;
  }
}

Так же вам потребуются методы map.flyTo и map.addLayer.

Работа со стилями

Для реализации приложения предлагается использовать библиотеку компонентов.

Я рекомендую использовать Material UI. Именно эта библиотека была использована для демо.

Помимо неё есть множество других библиотек компонентов:

semantic-ui
ant.design
lihtning design
grommet
primer - библотека компонентов на базе дизайн системы гитхаба.
purecss
foundation
clarity

Задачи

Необходимо реализовать приложение со следующим функционалом:

Как пользователь:
- Я могу авторизоваться в приложении
- При неверном логине или пароле я получу ошибку валидации
- При попытке перейти на любую страницу кроме /login я буду перенаправлен обратно на страницу /login
Как авторизованный пользователь:
- Я имею доступ к странице с картой (/map)
- При незаполненных платёжных данных на странице карты я вижу сообщение о необходимости их заполнить и ссылку на профиль.
- Я имею доступ к странице профиля (/profile)
- На странице профиля (/profile) я могу указать данные банковской карты
  - Поля cardName, cardNumber, expDate, cvv обязательны для заполнения
  - Поле cardName может содержать только буквы латинского алфавита
  - Поле cardNumber может содержать только цифры и должно иметь длину 8 символов.
  - Поле expDat должно иметь формат даты
  - Поле CVV может содержать только цифры. Состоит из 3 символов.
  - Я получаю оповещение при успешном сохранении данных карты.
- Я могу выйти из аккаунта нажав кнопку "Выйти".
Как авторизованный пользователь с указанными платёжными данными:
- На странице с картой я могу выбрать адрес отправления и прибытия из списка доступных.
- При указанных адресах отправления и прибытия я могу нажать на кнопку "Выполнить заказ".
  - Карта переместится к точке отправления.
  - Будет построен маршрут от адреса отправления к адресу прибытия.
  - Я получу сообщение об успешно выполненном заказе.
  - Мне будет доступна кнопка выполнения нового заказа.

Условия выполнения

Необходимо реализовать приложение используя библиотеку ReactJS.
Для управлением состоянием приложения должен быть использован Redux.
Сайд-эффекты могут быть реализованы с помощью Redux Saga либо Redux Thunk, в крайнем случае с помощью middleware.

Бонусные условия

Код редьюсеров покрыт тестами.
Сайд эффекты покрыты тестами.
Если в компоненте есть логика - она протестирована.

okplatova/react-final-project