64. Introduction To Self Order Kiosk App

Self-Order Kiosk App

  • Source Code: https://github.com/basir/self-order-kiosk
  • View Demo: https://self-order-kiosk.herokuapp.com


  • Material UI to build professional looking web applications
  • Themes, Animations, Modals, Boxes, Forms and etc
  • React Hooks like useState and useReducer to manage state in individual components
  • Context API to handle complex states between multiple components
  • Node and Express to build a simple simple and elegant backend
  • MongoDB and Mongoose to manage orders in the backend
  • Heroku to deploy your web application on cloud servers

Run Locally

1. Clone repo

$ git clone [email protected]:basir/self-order-kiosk

$ cd self-order-kiosk

2. Setup MongoDB

  • Local MongoDB
  • Install it from here
  • Create .env file in root folder
  • Set MONGODB_URL=mongodb://localhost/self-order-kiosk
  • Atlas Cloud MongoDB
  • Create database at https://cloud.mongodb.com
  • Create .env file in root folder
  • Set MONGODB_URL=mongodb+srv://your-db-connection

3. Run Backend

$ npm install

$ npm run server

4. Run Frontend

# open new terminal

$ npm start

5. Seed Sample Data

  • Open: http://localhost:5000/api/products/seed
  • It creates 9 sample products

6. Open App

  • Open: http://localhost:3000