Front-end for an app allowing to select food on a menu.

• This project was bootstrapped with Create React App.
• Redux is used for global state management.
• MaterialUI is used for the design.

npm install
npm run start

Access to http://localhost:3000 to use the app.

src folder is organized as follow:

• reducers : Contains Redux reducers
• actions: Contains Redux actions and constants
• containers: Contains HoC to connect component to the state
• components Contains visual components
• data: Contains a stub for the data set, and helper for data loading

• Menu: Simple component that renders a list of MenuCourse, and control buttons
• MenuCourse: A specific course of the Menu, renders a list of MenuCard
• MenuCard: A Menu element that can be selected by the user
• Breadcrumb: Shows menu courses
• Summary: Final page, shows a summary of user's order

App.js

↳ Breadcrumb

↳ Summary

↳↳ Menu

↳↳↳ MenuCourse

↳↳↳ MenuCard

• Each component has its own container used to map state and action. See Redux doc for more informations
• There is no routing. Switch between pages is manage using data currentCourse stored in global state. An nice improvment would be to add routing with React-router and to bind the state to the routing
• Even if those data don't change, total number of course (numberOfCourse) and list of menu dishes (dishes) are a part of the initial global state, because they are used in almost all components
• Navigation can be done either using buttons at the bottom, or using breadcrumb
• Once the final step is reached, it's impossible to come back
• The user can reach the final step only if he has selected items