Restaurant AntD -> New Chopstix Restaurant

Live demo

Frontend only branch

Description

A fullstack demo restaurant app using Ant Design, React, TypeScript, Nodejs, Express, and PostgreSQL

Includes the following:

• Home, menu, nutrition and checkout page with routing. (React Router v6)
• Cart/Bag drawer with add, edit, and remove item functionality.
• Mobile Responsive.
• Dark Mode. (default is based on user preference)
• Server side REST API with SQL queries to setup the db.

Installation and Setup

In the project directory, you can run:

1. Must have a PostgreSQL db setup and running

Run the SQL queries in the /backend/src/queries directory to setup the db.

2. System configuration setup

Create a .env file in both the backend and frontend folders using the .env.example files.

3. npm install

Required in the root directory in order to use the below npm commands concurrently for both frontend and backend folders.

4. npm run install-all

Installs the necessary modules for both the frontend and backend directories to run the application.

npm start or npm run dev

Runs the app in development mode. Open http://localhost:5173/ to view it in your browser.

npm run build

Creates a production build of the app in the dist directory

Front End Directory

npm test

Runs the applications tests. Test code was wrtten using React Testing Library.

References

• Menu items & pictures are from P.F. Chang's
• Rice bowl pictures are from https://www.pressurecookrecipes.com/
• Logo Graphic
• Frame Graphic