💡 Overview
front-end repo https://github.com/JensLiu/restaurant-ordering-system-frontend
back-end repo https://github.com/JensLiu/restaurant-ordering-system-backend
Project demo https://ordering.jensdevelops.de
TL; DR: Card No. 4242 4242 4242 4242 Document: Test payment methods
👤 Accounts
customer@jensdevelops.de
chef@jensdevelops.de
manager@jensdevelops.de
Password: password
Tech | Used in |
---|---|
Next.js | project framework |
Zustand | global status management |
React Hook Form | dynamic form |
React Hot Toast | toast |
Cookie-next | cookie access |
Next-Cloudinary | cloudinary image upload |
Tailwind CSS | CSS framework |
Clsx | dynamic CSS |
Daisy UI + React Daisy UI | CSS UI library |
React Icon | icon library |
-
Customer & Chef demo video
-
Customer: Continue unfinished Payment demo video
-
Manager: Add menu item demo video
-
Manager: Menu Management (and constraints) demo video
-
Customers can
login
by clicking the top-right avatar and selectlogin
-
A
login
/register
modal will pop up, fill the corresponding information
-
After
login
, customers are able to access theirOrders
page andProfile
page by clicking the top-right avatar
Changing of password is not implemented in the demo
- On
Checkout
, the customer is redirected to the stripe payment page. - After the customer finished the payment, he/she is redirected to the
Orders
page
- Notifications are pushed when the chef
Accept
s orComplete
s the order - The page is refreshed at the same time to reflect the change of
status
After login, managers can negate through their features by clicking the top-right avatar
User editing and deletion are not implemented in the demo.
The manager can only delete/fire chefs, they cannot delete any customers or their fellow managers.
After login, chefs can navigate through their features by clicking the top-right avatar
- The workspace automatically refreshes when a new order is paid
- Chef workflow: Select a waiting order ->
Accept
the order ->Complete
the order - When chef
Accept
s orCompletes
s an order, the customer will receive a notification
create a .env
file in the root directory
JWT_SECRET_KEY="your-secrete-key"
NEXT_CLOUDINARY_UPLOAD_PRESET="your-cloudinary-upload-preset"
STRIPE_SECRET_KEY="your-stripe-secret-key"
ACCESS_TOKEN_COOKIE_NAME=_app_access_token
REFRESH_TOKEN_COOKIE_NAME=_app_refresh_token
# MEXT_PUBLIC prefix exposes the variable to the client side
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="your-cloudinary-cloud-name"
NEXT_PUBLIC_API_BASE_URL="https://ordering-api.jensdevelops.de" # example
NEXT_PUBLIC_WEBSITE_BASE_URL="https://ordering.jensdevelops.de" # example
NEXT_PUBLIC_WS_API_BASE_URL="wss://ordering-api.jensdevelops.de" # example