This is my educational frontend project on React
Test it on Github Pages!
Important notices
- This project was initially developed for desktop screen resolutions starting from 1280x720
- Responsive layout for mobile devices is currently under development and will be released soon
- It's a known issue that the AdBlock browser extension may block WebSockets connection. If you see any conection errors, please try to disable AdBlock on app's page
Technology used in project
- React 17 with functional components and hooks
- CSS Modules
- Redux with Toolkit using thunk, slices and custom middleware
- Routing with React Router with 3 types of protected routes and URL params
- User authorisation with JWT and token refresh (token become stale in 20 minutes)
- Websocket connection to API for real-time orders feed update
- Unit tests for all slices with Jest and Enzyme
- Cypress functional test for drag-n-dropping of ingredients into burger constructor (with react-dnd library)
- TypeScript for all project code except tests
- Github Action for automatic code testing in PR's and commits to main branch
- Project code is automaticly deploying to Github Pages
- React Developer Burger UI components library by Yandex was used in this project
- Backend API used is this project was gracefully provided by Yandex
Project functionality
- Interactive burger constructor with drag-n-drop for adding and reordering of ingredients
- Order placement (only for authorized users)
- Two feeds with places orders: for all users and for authorized user only (orders history)
- Orders feeds data is updating in real-time from server
- User registration, authorization, forgot/reset password functionality
- Different routes protection for authorized and guest users
- After succesful authorization user is redirecting to the last page he requested
- Modal windows for ingredients and order details
- Modals have their unique URLs an can be opened as separate page when reloaded or with direct link
- Modals can be closed with the 'X' button, click outside modal or with 'Esc' key
- 404 page
Test user credentials
Login: 123@123.t
Password: 123123
This project was created during the education in Yandex.Practicum on "React Developer" course and bootstrapped with Create React App.