Food Self-Order Kiosk
Welcome to my coding course to build a Self-Order Kiosk like Macdonalds. In this course, you will learn the essential tools and skills to a web application for Self-Order Kiosk using React, Context API, and Material UI in the frontend and Node and MongoDB in the backend.
My name is Basir and I'll be your instructor in this course.
By the end of this course, you will be able to build a professional and fully-functional web application to launch on a self-order kiosk in a restaurant.
In this path, you will learn the modern React concepts and libraries:
- 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 single 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
This course is for non-coders or juniors who want to be a pro developer and find a job in 22 million job opportunities around the world.
Knowing React basics like component, state and props are the only requirements for this course.
Feel free to take a look at the course preview and enroll if it is along with your ambitions.
Run Locally
1. Clone repo
$ git clone git@github.com: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
6. Open App
Lessons
- Introduction
- Create home screen
- install vs code and chrome
- crate react app
- create screens/HomeScreen.js
- Create choose order type screen
- Create Choose Order Screen
- Create React Context
- Create Set Order Type Action
- Redirect user to order screen
- Create backend api for categories
- create server.js
- create data.js with sample data
- return categories
- List categories
- Create Order Screen
- get categoryList from context
- list categories in use effect
- show categories in left side
- Create backend api for products
- connect to mongodb and use mongoose
- create product model
- seed products
- create api for products
- List products
- get productList from context
- list products in use effect
- show products in main section
- Add & remove food to order
- create add to order modal
- create addToOrder action
- create removeFromOrder action
- create my order section
- handle cancel order
- handle finish order
- Create review order screen
- Create review screen
- add or remove items
- cancel or proceed to checkout
- Create select payment screen
- Create select screen
- show payment options
- create payment screen
- redirect to complete screen
- Complete order
- create order model
- build backend api
- create complete order screen
- Publish to heroku
- create Procfile
- serve build folder
- send index.html file
- create heroku account
- install heroku cli
- create cloud mongodb database
- get connection string from cloud mongodb
- put it in heroku
- seed data
- test web app on heroku
- Create Admin Screen
- build list order api
- show order in the screen
- create ready, cancel and deliver button
- Create Queue Screen
- build list queue order api
- show queue in the screen in 2 columns