Small practice created with Vite and the corresponding React template consisting of a SPA that simulates a food ordering app with some products and a shopping cart.
The products (meals) are loaded from a database (Firebase Realtime Database) and ordering meals from the cart will lead to the creation of an entry in the connected database with the user info and the ordered products as shown on the following image:
For the development of the app the following React features have been implemented:
- React hooks:
- useState
- useEffect
- useReducer
- useContext
- useRef
- Conditional rendering
- Styling with CSS modules
- Portals
- Fragments
See working app: ReactMeals
Once the project is downloaded, in the root folder of the project run:
1.Install the necessary dependencies:
npm install
2.Start the local server to view the project in the browser.
npm run dev
Production deployment of the application is done through Netlify's continuous deployment feature.