Mcdonald’s Self Order Service 麥當勞 自助點餐

1. Statement 注意事項
2. Summary 專案簡介
3. Demo 實際頁面
4. Diagram 專案架構圖
5. Technologies 專案技術
6. Feature 專案介紹

Statement

⚠️ This project is an imitation of McDonald’s Japan mobile ordering application. It is only used for the practice of a single-page application in React, not for any profitable purpose.

Summary

McDonald's Self Order Service (麥當勞 自助點餐) is a meal ordering website for Mcdonald's Taiwan in-store pickup. (Not a real service)
Users could select Mcdonald's restaurants in Taiwan from the map or from the keyword filter based on the distance and location detected by browsers.

After registering and logging in, members could check the menu, add multiple meals to the food ordering cart, then place an order.

Demo

Demo Link

https://potent-zodiac-316305.web.app/

Test account

-	-
Account	tester@test.com
Password	tester

Architecture Diagram

Technologies

Name	Descriptions
React Hooks	Use React state and lifecycle features from function components
React Router	Navigate single page applicaions
Google Maps JavaScript API	Render Google Maps, marker clusters
Local Storage API	Store cart items
Python	Scrape and arrange the official restaurant data
Firebase Firestore	Store restaurant, user, menu, order data
Firebase Hosting	Host website
Responsive Web Design	Create web pages that look good on all devices
Figma	Create UI flow, and some materials in the website

devDependencies

webpack
babel
style-loader
css-loader
url-loader
file-loader
iconify/react
eslint

dependencies

react-router-dom
styled-components
react-firebase/auth
react-google-maps/api
haversine-distance

Feature

🔹Choose a pick-up location

Users could use map mode or keyword mode to search for restaurants on the homepage.

In Map Mode, zoom into any of the cluster locations, the number on the cluster will decrease,

then users begin to see many location markers.

Click each marker to show the restaurant info and the start order button.

Also, users could click the red button in the upper right corner to directly move to the current position.

(Could not select restaurants which beyond a certain distance of user's position)

In keyword filter mode, user could enter keywords to search restaurants.The restaurants info would be presented as cards.

User could check more cards by pagination.

🔹Check the Menu, make an order

Log in/sign up to become a member after registration, users could check out the menu, add meals to the cart, and make an order.

🔹Check out the order records

Members could check the order records and details in the member page.