Mcdonalds' Order Taking Simulator: http://wild-trees.surge.sh/

Description

The Mcdonald's OTS application is a Mcdonald's order taking simulator to stimulate how employees would take customer orders. This involves loading in different type of menus: breakfast, lunch, and more. Users may play a game to see how fast they can complete orders to post their username and timer completion.

Project (left) vs Mcdonalds' Real Ordering System (right)

How I built this?

Created a responsive front-end for different screen sizes between 600 and 1200+ pixels using media queries. React is used to create the user interface for fake customers' orders and a variety of 10+ food menus. Redux handles the state of the user's food menu interactions for placing food items. Constructed the back-end API to handle endpoint routes for all food items, a leaderboard, and fake customer orders using node, express, and PostgreSQL.

My Source of Inspiration

I worked at McDonald's as a crew member for 4+ years, and always wanted my new hires to gain more experience taking customers' orders outside the workplace. Hence, the project is born.

Features / Playing the Game

• A stimulation game to mock customers' orders, this will allow users to stimulate the Mcdonald's order taking system.
• How fast can a user complete 19 customer orders?
• Click on food items to place them on the screen.
• Click on a size then a food item to make it a combo. Eligible breakfast items only have medium sized combos while eligible lunch items only have medium and large.
• Double click an item to toggle it.
• Clicking 'Void Item' deletes a toggled item from the screen.
• To clear a drink from an item combo, toggle the item then click 'Clear Choice'.

When you get a customer order correct, it will go to the next customer and the message status displays "Customer #X passed" (shown in left picture) When you get a customer order incorrect, the message status will display "Customer #X failed," so you must keep adjusting the order until the order is correct (shown in right picture).

Tests

1. Navigate to \McDonald Order-Taking Simular\mcdonalds-frontend\src
   
2. Using the terminal, run the command npm test

User Flows

• Visit the leaderboards before starting the game.
• Play the game.
• Browse through the varying menus.

Technology Stack

• Javascript
• React
• Redux
• Node.js
• Axios

Responsive Layout

Running the program

1. Fork this project from the github page.
2. Have node dependencies installed.
3. Navigate to the \McDonald Order-Taking Simular\mcdonalds-frontend folder.
4. Run the command npm start

   Side Notes

   There exists edge cases to be fixed when the user place items on the screen. I.E. Multiple distinct stand-alone drinks should be inserted into multiple upcoming combos. Common edge cases and other unique edge cases are fixed to provide a smooth experience of placing items on the screen.