React Mobx TS Pizza

Order pizza in our educational online store.

The same project made on Redux 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 [email protected]:Bukovski/react-mobx-ts-pizza.git
cd react-mobx-ts-pizza
npm install
npm run server
npm run start

Routes

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

Folders tree

|–– src
|  |–– assets
|  |  |–– fonts
|  |  |  |–– ProximaNova-Black
|  |  |  |–– ProximaNova-Bold
|  |  |  |–– ProximaNova-Extrabld
|  |  |  |–– ProximaNova-Regular
|  |  |–– img
|  |  |–– scss
|  |  |  |–– components
|  |  |  |–– libs
|  |  |  |–– _mixins
|  |–– components
|  |–– hooks
|  |–– __mocks__
|  |–– pages
|  |–– store
|  |–– __tests__
|  |  |–– components
|  |  |  |–– __snapshots__
|  |  |–– pages
|  |  |  |–– __snapshots__
|  |  |–– 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
• react-content-loader component for easily create placeholder loadings Loader template creator
• react-error-boundary catches errors in the wrapped component
• mobx state management
• mobx-react component wrapper for combining React with MobX
• mobx-persist-store save data from mobx store to localStorage
• load picture for error message from error-picture
• coveralls - coverage reporting of coveralls.io and add a cool coverage button