React Redux TS Pizza

Order pizza in our educational online store.

The same project made on Mobx can be found at the link

Link on figma page design

🍕Live page

Educational project. Shop for ordering pizza. There is a sorting by category and a method of making pizza.

I found a YouTube video course in which the author did not complete his project, so I decided to finish it. I implemented the idea of the author of the course and posted it on my GitHub page as a sample for those who want to see a version of a fully working application

All data from the pizza cart will be stored in localStorage. Added error handling, the user will see an error message.

Installation and Running

git clone git@github.com:Bukovski/redux-ts-pizza.git
cd redux-ts-pizza
npm install
npm run server
npm run start

Routes

• / store page
• /cart pizza cart
• 404 page not found

Tree

|–– public
|  |–– favicon
|–– screenshots
|–– src
|  |–– assets
|  |  |–– fonts
|  |  |  |–– ProximaNova-Black
|  |  |  |–– ProximaNova-Bold
|  |  |  |–– ProximaNova-Extrabld
|  |  |  |–– ProximaNova-Regular
|  |  |–– img
|  |  |–– scss
|  |  |  |–– components
|  |  |  |–– libs
|  |  |  |–– _mixins
|  |–– components
|  |–– hooks
|  |–– __mocks__
|  |–– pages
|  |–– store
|  |  |–– actions
|  |  |–– actions-async
|  |  |–– reducers
|  |–– __tests__
|  |  |–– components
|  |  |  |–– __snapshots__
|  |  |–– pages
|  |  |  |–– __snapshots__
|  |  |–– store
|  |  |  |–– actions
|  |  |–– utils
|  |–– types
|  |–– utils

Technologies

• typescript-with-react for static typing TypeScript, allow you to catch most of the errors before the code is executed. In addition, they significantly improve development processes by adding auto-completion and other features.
• node-sass module is used to translate the Sass code into CSS code
• react-router-dom navigation on project, switching between pages
• classnames for conditionally joining classNames together.
• axios is Promise module for client (browser) requests it uses XMLHttpRequests
• redux is Predictable State Container for JS Apps
• react-redux is Official React bindings for Redux
• redux-devtools-extension tracking changes through the browser console in Redux store
• redux-thunk async middleware for Redux store.
• react-content-loader component for easily create placeholder loadings Loader template creator
• redux-persist save data from redux store to localStorage
• react-error-boundary catches errors in the wrapped component
• load picture for error message from error-picture
• coveralls - coverage reporting of coveralls.io and add a cool coverage button