andugu / vending-machine

🎰 Vending Machine frontend app build with React, Material UI, Redux and React Router - Abacum React Course Summer 2023

🎰 Vending Machine

This project replicates the front end of a vending machine using React, Material UI, Redux and React Router. It also includes a mocked BE build with json-server.

🏛 Architecture

/src
├── /components             # React FC components
├── /mocks                  # A mocked BE powered by json-server
├── /pages                  # Page entrypoints for the app
├── /redux                  # Redux store sclices
├── /App.*                  # App files
├── /api.ts                 # Handles all the interactions with BE
├── /store.tsx              # Redux store
└── /types.tsx              # Interfaces definition

📸 Screens

Login screen

Products screen

📜 Available Scripts

🛫 npm start

To start the application.

🧪 npm test

To launch the test runner in the interactive watch mode.

🥸 node src/mocks/server.js

To start a mocked backend json-server for testing purposes.