https://github.com/satansdeer/loftschool-react-final-project
https://github.com/satansdeer/loftschool-react-final-project
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/satansdeer/loftschool-react-final-project
- Owner: satansdeer
- Created: 2019-01-10T21:00:37.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-18T11:58:54.000Z (about 6 years ago)
- Last Synced: 2025-02-05T05:28:14.766Z (4 months ago)
- Size: 2.1 MB
- Stars: 0
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Финальный проект
Вам предстоит самостоятельно написать приложение для заказа такси.
[Пример приложения](https://pensive-gates-d31754.netlify.com/)
Логин: [email protected]
Пароль: 123123
## Работа с сервером
Для получения данных о маршруте и списка доступных адресов - вы можете использовать [сервер](https://loft-taxi.glitch.me/).
Так же на сервере реализована простейшая система авторизации с захардкоженными данными.
### Доступные запросы
- `/auth` - позволяет авторизоваться ([email protected] / 123123)
- `/route` - возвращает список точек для маршрута
- `/addressList` - возвращает список доступных адресов
Более подробное описание на странице [сервера](https://loft-taxi.glitch.me/).
Для сервера использован сервис [glitch](https://glitch.com/), так что вы можете взять существующий сервис за основу, сделать его ремикс и улучшить на своё усмотрение. Например добавить регистрацию и хранение данных пользователя.
## Работа с картой
Для работы с картой предлагается использовать сервис [mapbox](https://www.mapbox.com/). Он предоставляют библиотеку для Javascript, её довольно удобно использовать для отображения карты и маршрутов на ней.
[Документация для Jаvascript библиотеки](https://docs.mapbox.com/mapbox-gl-js/api/)
Для работы с картой вам потребуется зарегистрироваться на [mapbox](https://www.mapbox.com) и получить токен.
### Пример использования карты в приложении
```jsx
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
;
}
}
```
Так же вам потребуются методы [map.flyTo](https://docs.mapbox.com/mapbox-gl-js/api/#map#flyto) и [map.addLayer](https://docs.mapbox.com/mapbox-gl-js/api/#map#addlayer).
## Работа со стилями
Для реализации приложения предлагается использовать библиотеку компонентов.
Я рекомендую использовать [Material UI](https://material-ui.com/). Именно эта библиотека была использована для демо.
Помимо неё есть множество других библиотек компонентов:
- [semantic-ui](https://react.semantic-ui.com/introduction)
- [ant.design](https://ant.design/docs/spec/introduce)
- [lihtning design](https://www.lightningdesignsystem.com/)
- [grommet](http://grommet.io/)
- [primer](https://primer.github.io/) - библотека компонентов на базе дизайн системы гитхаба.
- [purecss](https://purecss.io/)
- [foundation](https://foundation.zurb.com/)
- [clarity](https://vmware.github.io/clarity/)
## Задачи
Необходимо реализовать приложение со следующим функционалом:
- Как пользователь:
- Я могу авторизоваться в приложении
- При неверном логине или пароле я получу ошибку валидации
- При попытке перейти на любую страницу кроме `/login` я буду перенаправлен обратно на страницу `/login`
- Как авторизованный пользователь:
- Я имею доступ к странице с картой (`/map`)
- При незаполненных платёжных данных на странице карты я вижу сообщение о необходимости их заполнить и ссылку на профиль.
- Я имею доступ к странице профиля (`/profile`)
- На странице профиля (`/profile`) я могу указать данные банковской карты
- Поля `cardName`, `cardNumber`, `expDate`, `cvv` обязательны для заполнения
- Поле `cardName` может содержать только буквы латинского алфавита
- Поле `cardNumber` может содержать только цифры и должно иметь длину 8 символов.
- Поле `expDat` должно иметь формат даты
- Поле `CVV` может содержать только цифры. Состоит из 3 символов.
- Я получаю оповещение при успешном сохранении данных карты.
- Я могу выйти из аккаунта нажав кнопку "Выйти".
- Как авторизованный пользователь с указанными платёжными данными:
- На странице с картой я могу выбрать адрес отправления и прибытия из списка доступных.
- При указанных адресах отправления и прибытия я могу нажать на кнопку "Выполнить заказ".
- Карта переместится к точке отправления.
- Будет построен маршрут от адреса отправления к адресу прибытия.
- Я получу сообщение об успешно выполненном заказе.
- Мне будет доступна кнопка выполнения нового заказа.
## Условия выполнения
- Необходимо реализовать приложение используя библиотеку ReactJS.
- Для управлением состоянием приложения должен быть использован Redux.
- Сайд-эффекты могут быть реализованы с помощью [Redux Saga](https://github.com/redux-saga/redux-saga) либо [Redux Thunk](https://github.com/reduxjs/redux-thunk), в крайнем случае с помощью **middleware**.
### Бонусные условия
- Код редьюсеров покрыт тестами.
- Сайд эффекты покрыты тестами.
- Если в компоненте есть логика - она протестирована.