Вам предстоит самостоятельно написать приложение для заказа такси.
Логин: 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.
- Код редьюсеров покрыт тестами.
- Сайд эффекты покрыты тестами.
- Если в компоненте есть логика - она протестирована.