This repository contains a Shopping app built using React, React-redux toolkit, Firebase authentication, Razorpay.

Overview

LoginPage

Shopping E-commerce Website

This repository contains a shopping app built using React, the React-redux toolkit, Firebase authentication, and Razorpay. It is an e-commerce website with a home page and a cart page where you can buy products and pay with Razorpay Gateaway. 

📝 Table of Contents

🎈 Usage or Demo

Please watch the following demo video for usage of the website:

🧐 About

The main idea is to create a minimal e-commerce website that can handle tasks such as loading product data from a third-party API and then showing it on the home page. Following that, we can add the products to the cart, from which we can remove them if we no longer require them. And finally, we can checkout or make a payment using the Razorpay payment gateway in test mode.

This project improved my understanding of the Redux toolkit, which is used for state management, as well as reduced my extra tasks, such as creating users, loading products, and working in the cart section.This project also provided me with the opportunity to work on Firebase authentication by integrating it with Gmail-based login.As the project progressed, the concept of react-routing became clearer.

The problem faced by me during the project is working with local storage, which has scope for improvement in this project. Other libraries can be used to help with the user persistence process.

🏁 Getting Started

Installing

Please follow the instructions below to run the application on your local machine.

  1. Clone the repo :
git clone https://github.com/AbhayKadam57/Ecommerce-Shopping-Website.git
  1. Install the project's packages with the following commands:
npm install
  1. Create an account with Firebase, start a new project in the console, and read the Firebase Doc(https://firebase.google.com/docs/web/setup?hl=en&authuser=0). The required configuration will be provided by Firebase, which you can add in the file ``firebase.js` path--> src/firebase.js.

  2. Create an .env file in root folder. and add all of the following firebase configuration ids and keys to the.env file with their respective keys and values.

REACT_APP_FIREBASE_ID = "Your firebase id";

REACT_APP_FIREBASE_AUTH_DOMAIN = "Your firebase auth Domain";

REACT_APP_FIREBASE_PROJECT_ID = "Your firebae project id";

REACT_APP_STORAGE_BUCKET = "Your storage bucket";

REACT_APP_MESSAGE_ID = "Your messaging sender id";

REACT_APP_APP_ID = "Your app Id";

then modify your configuration firebase.js as follows:

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_ID,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGE_ID,
  appId: process.env.REACT_APP_APP_ID,
};
  1. Create an Razorpay account and consult Docs Razorpay for payment gateway integration. Razorpay will provide you with a unique ID, which you can use in the filename "cart.js."Add the razorpay Id to the '.env' file as follows:
REACT_APP_RAZORPAY_ID = "Your Razorpay Id";

and replace the key in cart.js

key: process.env.REACT_APP_RAZORPAY_ID;
  1. Don't forget to add .env in .gitignore

  2. Finally, to run the project, use the following command:

    npm start

⛏️ Built Using

✍️ Authors

You might also like...
A simple ReactJS package ment to make ReactJS/NextJS Firebase authentication easy

A simple ReactJS package ment to make ReactJS/NextJS Firebase authentication easy

Collaborative shopping basket built with Liveblocks in React/Next.js
Collaborative shopping basket built with Liveblocks in React/Next.js

Live Basket This repo shows how to build a live shopping basket with Liveblocks and Next.js. Try it out This shopping basket isn't only shared between

🛒 A simple shopping cart built with reactjs and typescript

React Shopping Cart A simple shopping cart built with reactjs and typescript #

An social media platform built using ReactJS, Redux Toolkit,Material UI, Node, Express, MongoDB, JWT and Mongoose.
An social media platform built using ReactJS, Redux Toolkit,Material UI, Node, Express, MongoDB, JWT and Mongoose.

A social media app using react, material ui, redux on frontend and nodejs, mongodb, and express on backend.

Shopping cart app powered with React + TypeScript

Shopping Cart Emulating an e-commerce app flow Table of contents Overview Features Technologies Contribute Overview This project was based in React Pr

Jagrook is a QR code scanning Web app which aims to bring transparency to consumer’s shopping cart
Jagrook is a QR code scanning Web app which aims to bring transparency to consumer’s shopping cart

JAGROOK Purchase Smart, Save Time, Save the World Jagrook is a QR code scanning Web app which aims to bring transparency to consumer’s shopping cart.

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

A note taking app with user authentication built with React.js

MY NOTES My notes is a simple note taking app in which user can store importent notes related to his work or his studies. 🛠 Tech Stack JavaScript ES6

frontend. this contains the node.js 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

Comments
  • Improve README

    Improve README

    Make a documentation more user friendly.

    Write Intructions to use the project. Add tech stack you used. Add Images or Demo Video of your project. Also define File structure. Add description. In that, you can had why you build the project, what is your learning outcome and what problems did you face.

    opened by BurhanRaja 6
Owner
null
Alan Vieyra 4 Feb 1, 2022
A calculator app built with React.js using React Hooks and Routers. The app contains 3 pages with basic styling. Calculator operations, as well as React components, were tested with Jest and React Testing Library.

Raect Calculator A calculator app built with React.js using React Hooks and Routers. App contains 3 pages with basic styling. Calculator operations, a

SarvarKhalimov 8 Jun 22, 2022
Assignment of Milestone 11 (Client Side) , Making an Website (Travel Related) using Firebase Authentication, Node, Express, MongoDB , Heroku, React Router, JavaScript (ES6) & React Bootstrap Etc.

Simple Site of 'Travel Related Service' (Holiday Dreams) - Assignment (Milestone - 11) This Repo is for 'Client Side' This Assignment is mainly on Nod

Yasir Monon 2 Aug 27, 2022
Mintok is an SPA app built with React and Redux (Redux ToolKit)

This project is a SPA app built with React and Redux (Redux ToolKit) that provides market-based information and statistics about cryptocurrency. The application fetches the data about the coins from the CoinLore API and allows users to check, discover and search (constantly updated) statistics about the top 100 currencies in the market.

Karla Delgado 4 Sep 16, 2022
This project contains a minimax algorithm implemented tic tac toe app built with React.

Tic Tac Toe App This project contains a minimax algorithm implemented tic tac toe app built with React. Table of Contents Requirements Installation Us

Unreol Freedom 7 Nov 22, 2022
This repo contains the code for advanced chat application's frontend. This app's frontend is built on MUI, a react component library.

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

null 3 Feb 12, 2023
A Netflix clone created using React. It is built using modern react tools/best practices, such as hooks, context API, and redux toolkit.

Netflix-Clone A Netflix clone I created for the sake of practicing React and Redux. It features design patterns recommended by the documentation. Some

Subhanga Upadhyay 102 Dec 26, 2022
AMAZON - An imitation of the Amazon online shopping store built using react

AMAZON This is an imitation of the Amazon online shopping store. Users can add a

Kevv_in 7 Mar 23, 2022
This is a Medical Website based on React and Firebase Authentication!

Ibnu Medical Center Ibnu Medical Center is for Humanity. We care about your healthy life. Medical care means the ordinary and usual professional servi

Ibnu Mahtab Hussain 5 Aug 27, 2022
NetflixClone - Netflix clone with react , styled components and firebase with user authentication.........

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

null 1 Jan 3, 2022