varun8177 / zomato-clone

Zomato clone provides users with a convenient and reliable solution for finding restaurants and ordering food online.

Zomato Clone

Description

Zomato clone is a clone of zomato.com which provides users with a convenient and reliable solution for finding restaurants and ordering food online.

Teck stacks used

• Next.js (as a frontend framework).
• Chakra UI (for styling).
• firebase (for authentication and database).
• reduxjs/toolkit (for global state management).
• axios (for fetching data)
• react-google-maps/api (for map integration on restraunt details page).
• react-icons (for icons).

Installation

1. Clone this repo to your local machine using

git clone https://github.com/Varun8177/zomato-clone.git

2. Go to the folder where you cloned this repo and install dependencies using

npm install

3. Run the project in developer mode using

npm run dev

4. Run the project in production mode

npm run start

Features

security

• user authentication (there are three methods to authenticate a user)
  • google authentication.
  • email and password authentication.
  • OTP authentication using mobile number.

user experience

• user gets a minimal designed UI (based on zomato design).
• user gets the restraunts data based on their location.
• user gets the single restraunt page which contains details of a particular restraunt.
• user can bookmark any restraunt and it will be visible on his profile page.
• when a user clicks on any product from the single product page it will show more details about it and user can order it.
• while ordering a product user can add a new address or select previous addresses if any.
• Location of user
  • can get his current location.
  • can search for a desired location.
• Methods for user.
  • sorting data based on popularity,rating
  • filtering data based on their cuisines.
  • search for restraunts based on location.
  • pagination to go to another page.
• Dashboard for user.
  • can check out his recently viewed restraunts.
  • can check the orders history and its details when clicked on it.
  • can check the bookmarks and remove if want to.
  • can check his added adressess.
• user gets form validation and errors will be notified via toasts if something went wrong.

screenshots

Home Page

Restraunts page

Restraunt Details page

User Dashboard or profile page

Made by

Varun Ergurala

zomato-clone's Issues

Profile Page - Design

Profile section for the user.

• Should contain details like name, photos, and followers.
• Activity section for reviews, recently viewed, and bookmarks.
• Order section for order history.
• Responsive design.

Checkout Zomato profile page for design ideas

User Location

• User should be able to get his live location.
• location coordinates should be added as query parameters
• Navigation should be dynamic based on the location

storage

• user bookmarks should be stored in a database.
• user orders should be stored in a database.
• create a page to show bookmarks and orders of a user

Footer - Design

Create a global Footer for the project.

• Responsive Design.
• Should have some social links to the project.
• Design should match the original Zomato site.
• Should be present on all pages

User Authentication

• Create a sign-up method for the user
• Implement sign-in using Google popup.
• store the user data
• username and profile image should be visible on the navbar

Products Page - Design

Products page for Zomato clone.

• Should have a search bar.
• Filter and sort method designs (use any dummy text for designing purposes).
• should have a slider for displaying some recommended filters with images.
• Display some dummy top brands.
• Create reusable product card components for products.

Navbar - Design

Implement a global navbar for the project

• Add modals like login and signup in the navbar.
• Should be responsive.
• Add it globally on every page.

Data based on location

• User should be able to get the restaurant's data based on location.
• User should be able to get the nightclub data of the location selected with details and images.

Check-Out

• Should have an address page with form validation.
• should have a payment success page after the order.

Single Product Page - Design

Order Page

• Specific Product Details.
• Bookmark and share option.
• Overview section.
• Review section for product reviews.
• Order product option

Use dummy data for creating the page

Home Page - Design

Clone the Zomato home page UI

• Decide a logo for the Project.
• Create a Navbar and Footer component which will be the same for all the pages.
• Use dummy images to create the UI for better visualization.