# Неделя #6 Выпускной проект

# Подготовка к выполнению задания

Изучить все материалы курса “React.js. Разработка веб-приложений” в Личном кабинете.

# Что нужно сделать?

# Создать веб-приложение “Loft Taxi”

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

Порядок работы

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

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

  1. Перейти по ссылке и приступить к выполнению выпускного проекта

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

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

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

  • /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. Именно эта библиотека была использована для демо. Помимо неё есть множество других библиотек компонентов:

# Задачи

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

Как пользователь:

  1. Я могу авторизоваться в приложении
  2. При неверном логине или пароле я получу ошибку валидации
  3. При попытке перейти на любую страницу кроме /login я буду перенаправлен обратно на страницу /login

Как авторизованный пользователь:

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

Как авторизованный пользователь с указанными платёжными данными:

  1. На странице с картой я могу выбрать адрес отправления и прибытия из списка доступных.
  2. При указанных адресах отправления и прибытия я могу нажать на кнопку "Выполнить заказ":
  • Карта переместится к точке отправления.
  • Будет построен маршрут от адреса отправления к адресу прибытия.
  • Я получу сообщение об успешно выполненном заказе.
  • Мне будет доступна кнопка выполнения нового заказа.

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

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

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

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

←