/e-commerce-eatery

Clone McDonald's website -_-_-_-_- Next.js, TypeScript, PostgreSQL, React-Query, Sass

Primary LanguageTypeScript

This is a [Next.js] project bootstrapped with [create-next-app].
The Point of building this application is to clone McDonald's website including it's database.
Original website ====> https://www.mcdonalds.com/us/en-us.html

Tech Stack

This project uses the following technologies:

  • Next.js
  • TypeScript
  • PostgreSQL
  • Prisma
  • React-Query
  • Sass
  • Mui

Images

homepage

menu

productDetail

ingredients

Description

Almost all pages use getStaticProps with no revalidation, except productDetail page which uses getServerSideProps to be able to react to any instant changes on the server or database.
The productDetail page is now kind of static and it's not necessary to use getServerSideProps, but I added it in case of having users, cart page, buying process and a limited number of products in the stack.

Getting Started

Install dependecies:

npm install

Setup your database locally or on a remote server

you can use Docker to setup postgreSQL

or

use https://www.supabase.com to run the database on a remote server.

Run the application

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.