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

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

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

Логин: [email protected] Пароль: 123123

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

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

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

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

• /auth - позволяет авторизоваться ([email protected] / 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.

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

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