|
1 |
| -This is my educational project on React |
| 1 | +# This is my educational frontend project on React |
2 | 2 |
|
3 |
| -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). |
| 3 | +Test it on [Github Pages](https://vicistomin.github.io/react-burger)! |
| 4 | + |
| 5 | +## Technology used in project |
| 6 | +* React 17 with functional components and hooks |
| 7 | +* CSS Modules |
| 8 | +* Redux with Toolkit using thunk, slices and custom middleware |
| 9 | +* Routing with React Router with 3 types of protected routes and URL params |
| 10 | +* User authorisation with JWT and token refresh (token become stale in 20 minutes) |
| 11 | +* Websocket connection to API for real-time orders feed update |
| 12 | +* Unit tests for all slices with Jest and Enzyme |
| 13 | +* Cypress functional test for drag-n-dropping of ingredients into burger constructor (with react-dnd library) |
| 14 | +* TypeScript for all project code except tests |
| 15 | +* Github Action for automatic code testing in PR's and commits to main branch |
| 16 | +* Project code is automaticly deploying to Github Pages |
| 17 | +* [React Developer Burger UI components library](https://yandex-praktikum.github.io/react-developer-burger-ui-components/docs/) (by Yandex) was used in this project |
| 18 | +* Backend API used is this project was gracefully provided by Yandex |
| 19 | + |
| 20 | +## Project functionality |
| 21 | +* Interactive burger constructor with drag-n-drop for adding and reordering of ingredients |
| 22 | +* Order placement (only for authorized users) |
| 23 | +* Two feeds with places orders: for all users and for authorized user only (orders history) |
| 24 | +* Orders feeds data is updating in real-time from server |
| 25 | +* User registration, authorization, forgot/reset password functionality |
| 26 | +* Different routes protection for authorized and guest users |
| 27 | +* After succesful authorization user is redirecting to the last page he requested |
| 28 | +* Modal windows for ingredients and order details |
| 29 | +* Modals have their unique URLs an can be opened as separate page when reloaded or with direct link |
| 30 | +* Modals can be closed with the 'X' button, click outside modal or with 'Esc' key |
| 31 | +* 404 page |
| 32 | + |
| 33 | +## Test user credentials |
| 34 | + |
| 35 | + |
| 36 | + |
| 37 | +Password: 123123 |
| 38 | + |
| 39 | +## |
| 40 | +This project was created during the education in Yandex.Praktikum on "React Developer" course and bootstrapped with [Create React App](https://github.com/facebook/create-react-app). |
0 commit comments