Swiggy Clone - Main Tech Stack used are React and for state management Redux and Local Storage

Last update: May 10, 2022

Swiggy - (Clone)

Swiggy is an Indian online food ordering and delivery platform. Founded in July 2014, Swiggy is based in Bangalore, and operates in 500 Indian cities, as of September 2021.

Solo construct week Project executed in 7 days.

Logo

Demo 🎥

How to get Started 🚀

There are two methods for getting started with this repo.

Familiar with Git ?

> git clone https://github.com/icyflame21/Swiggy_Clone.git
> cd Swiggy_Clone
> npm install
> npm start

Not Familiar with Git ?

download the .zip file. Extract the contents of the zip file, then open your terminal, change to the project directory, and:

> cd Swiggy_Clone
> npm install
> npm start

Tech Stack 💻

  • React
  • Redux
  • Material UI
  • Font Awesome Icons
  • Styled Components
  • React-Map-Gl
  • uuid (v4)
  • Firebase (OTP Authentication)
  • RazorPay Integration

Features

  • In Landing Page user can fetch its current location and search bar is enabled with debouncing effect.
  • Login / Register Page is enabled with conditional rendering , OTP authentication is implemented via Firebase.
  • User can sort according to its demand like according to cost, rating etc, and also select the food items from multiple filter section.
  • Address Drawer show current location of the user in a customized map implemented using React-Map-Gl.
  • For Payment , Razorpay gateway is been used.

Responsibilities 💪

  • Creating Pixel Perfect pure css Animations without using css library, and pixel perfect layouts for every page.
  • All pages are conditionally controlled using State Hooks, Local Storage.
  • Optimization of all page layouts with its raw css files and its libraries, for the user to have a smoother UI.

Snap Shots 📷

Landing Page

Logo

Register / Log In Drawer controlled via Conditional Rendering

Logo

Restaurants Page

Logo

Multi Filter Section Drawer

Logo

Food Details Page

Logo

Payment Page

Logo

References

Security Policy 🛡️

Supported Versions

Versions of this project which are currently being supported with security updates.

Version Supported
5.1.x
5.0.x
4.0.x
< 4.0

Creator 😇

GitHub

https://github.com/icyflame21/Swiggy_Clone
You might also like...

Hotel-management-admin - Admin panel of Hotel management system with Firebase Realtime Database Integration

Admin Panel of Hotel Management System This project is part of the Course of Web

Mar 23, 2022

Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)

🛒 Shopping App 🛒 Online Marketplace Built with MERN stack (MongoDB, Express, React and Node). ⚡️ ⚡️ ⚡️ Kiwi Shop ⚡️ ⚡️ ⚡️ 📜 Table of contents Main

Mar 28, 2022

Example of various data storage options in a React client and express.js server.

Data Storage Example App This repository contains a client app built with React and a server app built with Express.js.

Dec 9, 2021

Nuvem-qi - Cloud Storage app using Typescript with ReactJs and Firebase

Nuvem-qi - Cloud Storage app using Typescript with ReactJs and Firebase

Nuvem-qi - Cloud Storage app using Typescript with ReactJs and Firebase

May 3, 2022

Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers 📽️ 🍿 Used ReactJS, Material UI, Firebase, Firestore Database

Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers 📽️ 🍿 Used ReactJS, Material UI, Firebase, Firestore Database

Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers 📽️ 🍿 Used ReactJS, Material UI, Firebase, Firestore Database

Apr 20, 2022

A Spotify Clone which built with ReactJS. 3rd party API integration, user authentication, spotify API, responsive design, material-ui, react context api are used to built it.

Spotify Clone with ReactJS In this Spotify Clone application you can log in to the application with your spotify account and see your own playlist. Sp

Jan 18, 2022

This is a clone of Reddit Used React.js Node.js Express.js MongoDb

This is a clone of Reddit Used React.js Node.js Express.js MongoDb

May 10, 2022

İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

 İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

Apr 20, 2022

İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

 İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

🟡 instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment 📷 ⚡ LIVE To check out the live demo of this app AB

Jun 6, 2021
Comments
  • 1. [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 5% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /src/Components/Assets/arrow.svg | 0.80kb | 0.52kb | 34.92% | | /src/Components/Assets/user.png | 16.82kb | 14.12kb | 16.09% | | /src/Components/Assets/NonVeg.jpg | 24.94kb | 21.55kb | 13.61% | | /src/Components/Assets/help.svg | 1.42kb | 1.23kb | 13.48% | | /src/Components/Assets/veg.jpg | 22.64kb | 19.71kb | 12.95% | | /src/Components/Assets/cart.png | 5.04kb | 4.80kb | 4.81% | | /src/Components/Assets/food.gif | 2,093.85kb | 1,997.13kb | 4.62% | | /src/Components/Assets/coupon.jpg | 19.04kb | 18.51kb | 2.75% | | /src/Components/Assets/search.svg | 0.53kb | 0.53kb | 1.47% | | /src/Components/Assets/swiggy.svg | 1.22kb | 1.20kb | 1.44% | | | | | | | Total : | 2,186.31kb | 2,079.29kb | 4.89% |


    📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace

    ~Imgbot - Part of Optimole family

    Reviewed by imgbot[bot] at 2022-05-11 04:12
Powerfull TODOLIST app with React.js with Add, Remove, Remove all, Edit, Local Storage features.

Advance React TODOLIST Application Powerfull TODOLIST app with React.js with Add, Remove, Remove all, Edit, Local Storage features. Clone this project

Jul 5, 2021
A Quiz app Built With React, Used Redux for state management
A Quiz app Built With React, Used Redux for state management

React-Quiz-App ?? For clone this repository in your machine pest below link in your terminal

Apr 27, 2022
A library project built using React with the main objective of learning how to use Redux with React
A library project built using React with the main objective of learning how to use Redux with React

A library project built using React with the main objective of learning how to use Redux with React

Apr 28, 2022
Ecommerce website built with the MERN stack with React Context API for state management
Ecommerce website built with the MERN stack with React Context API for state management

MERN-Ecommerce Ecommerce website built with the MERN stack with React Context AP

May 14, 2022
Instagram MERN - Full-Stack Instgram Clone using MERN Stack and Socket.io
Instagram MERN - Full-Stack Instgram Clone using MERN Stack and Socket.io

Instagram MERN Full-Stack Instgram Clone using MERN Stack and Socket.io Visit Now ?? ??️ Tech Stack Frontend: Backend: Realtime Communication: Cloud S

May 11, 2022
The NetflixClone project is about a reproduction as faithful as possible of the main page of Netflix
The NetflixClone project is about a reproduction as faithful as possible of the main page of Netflix

O projeto NetflixClone se trata de uma reprodução o mais fiel possível da página principal da Netflix, onde conseguimos rolar as barras de filmes de modo a mostrar todos os filmes localizados, temos interações com o mouse em toda a página.

Nov 8, 2021
Open-source building blocks from Mojang Studios to construct game UIs using web tech.
Open-source building blocks from Mojang Studios to construct game UIs using web tech.

Ore UI meta-repo Open-source building blocks from Mojang Studios to construct game UIs using web tech. What is this? Minecraft Bedrock Edition is migr

May 17, 2022
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

May 5, 2022
Flipkart-clone - Flipkart Clone using MERN Stack with proper File Structure and also follow MVC architecture
Flipkart-clone - Flipkart Clone using MERN Stack with proper File Structure and also follow MVC architecture

Flipkart Clone MERN APP Dhaval Patel's Flipkart Clone is done with top-notch fea

May 17, 2022
Challenge [Frontend Mentor] - In this challenge, JavaScript was used to filter jobs based on the selected categories. Technologies used: HTML5, CSS3 and React.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Apr 13, 2022