ElectroKart ⚡

An Online E-commerce App built with React and Node.js.

🚀Featured In

Event Logo	Event Name	Event Description
	GirlScript Summer of Code 2024	GirlScript Summer of Code is a three-month-long Open Source Program conducted every summer by GirlScript Foundation. It is an initiative to bring more beginners to Open-Source Software Development.
	Hacktoberfest 2024	Hacktoberfest is a month-long celebration of open source software run by DigitalOcean, GitHub, and Twilio. It encourages contributions to open source projects and promotes a global community of developers.

Table of Contents

1. Project Overview
2. Features
3. Tech Stack
4. Installation
5. Usage
6. Contributing
7. Pull Request Guidelines
8. Code of Conduct

1. Project Overview

ElectroKart is an online e-commerce application designed to offer a seamless shopping experience. Built with React for the frontend and Node.js for the backend, ElectroKart enables users to browse and purchase products with ease.

2. Features

• Product Browsing: View and filter products by category, price, and popularity.
• User Authentication: Secure login and signup functionality with JWT authentication.
• Shopping Cart: Add items to a cart, view cart summary, and proceed to checkout.
• Payment Gateway: Integrated payment options using Stripe (or any preferred payment gateway).
• Order Tracking: Keep track of placed orders with status updates.
• Responsive Design: Optimized for both mobile and desktop experiences.

3. Tech Stack

• Frontend:

  • 
  • 
  • 
  • 

• Backend:

  • 
  • 

• Database:

  • 

• Authentication:

  • 

4. Installation

Follow these steps to set up ElectroKart locally:

Prerequisites

• Node.js (version >= 14.x)
• npm (version >= 6.x)

You can check if Node.js and npm are installed by running:

node -v
npm -v

Steps to Install ElectroKart

1. Clone the repository:

git clone https://github.com/<your-github-username>/ElectroKart.git

2. Navigate to the project directory

cd ElectroKart

3. Install the dependencies:

• For Frontend:

cd frontend
npm install
npm start

• For Backend:

cd backend
npm install
node index.js
MONGO_URL = ""
email = ""
password = ""
OAUTH_CLIENTID  = ""
OAUTH_CLIENT_SECRET  = ""
OAUTH_REFRESH_TOKEN = ""
# Paste your MongoDB URL here for local testing

4. How to get Oauth Credentials

Step 1: Create a Project in Google Cloud Console

1. Go to Google Cloud Console.
2. Click on Create Project.
3. Enter a project name (e.g., "Nodemailer Setup") and click Create.
4. Once created, select your project from the project dropdown menu in the top-left corner.

Step 2: Enable Gmail API

1. In the Google Cloud Console, navigate to APIs & Services > Library.
2. Search for Gmail API in the search bar.
3. Click on Enable to activate the Gmail API for your project.

Step 3: Configure OAuth Consent Screen

1. Navigate to APIs & Services > OAuth Consent Screen.
2. Under User Type, choose External (this is the only option if you're not part of G-Suite).
3. Fill in the required fields:
   • App Name: Choose a name for your app.
   • User Support Email: Enter your email.
   • Developer Contact Information: Enter your email again.
4. Click Save and Continue.
5. On the Scopes page, click Save and Continue (you can skip adding scopes for now).
6. On the Test Users page, add your own email address as a test user. Click Save and Continue.
7. It is important to add the test users as these will actually allow to send mail from the emails you are using.

Step 4: Create OAuth Credentials

1. Go to the Credentials tab in the sidebar.
2. Click the + Create Credentials button and select OAuth Client ID.
3. Choose Web Application as the application type.
4. Under Authorized redirect URIs, add the following URL:

https://developers.google.com/oauthplayground

5. Click Create. You will now see your Client ID and Client Secret. Save these as you will need them later.
6. Note: These will act as your Oauth_Client_Id and Oauth_Client_secret.

Step 5: Generate a Refresh Token

1. Go to OAuth 2.0 Playground.
2. In the top-right corner, click the Settings icon.
3. Check the box labeled Use your own OAuth credentials.
4. Enter your Client ID and Client Secret obtained in Step 4.
5. In the OAuth Playground, under Select & Authorize APIs, search for Gmail API v1.
6. Select the following scope:

https://mail.google.com/

7. Click Authorize APIs and sign in with your Google account.
8. After authorization, click Exchange authorization code for tokens.
9. Copy the Refresh Token from the output and paste it in OAUTH_REFRESH_TOKEN.

5.Start the application:

npm start

6. Usage

Once you have set up the project, you can:

• Run the development server: The app will run at http://localhost:3000/ for the frontend.
• Explore app features: Browse products, add items to the cart, and proceed to checkout.
• Test with sample data: Use provided sample data or mock APIs for testing the functionality.

7. Contributing 🤝

We welcome contributions from everyone! If you would like to contribute to ElectroKart, please follow these steps:

1. Fork the repository: Click the 'Fork' button at the top right of the page to create a copy of this repository in your account.
2. Clone your fork: Use the command below to clone your forked repository to your local machine.

   git clone https://github.com/<your-github-username>/ElectroKart.git

For more detailed guidelines, please refer to our full Contributing.md.

8. Pull Request Review Criteria 🧲

1. Please fill out the PR template properly when creating a pull request.
2. Assign yourself to the issue you’re working on to help us track progress.
3. Never commit to the main branch.
4. Your work must be original and adhere to the project's coding standards.
5. Comment your code where necessary for clarity.
6. Always ensure all tests pass before pushing your changes by running:

npm run test

9. Code of Conduct 😇

We strive to create a welcoming and inclusive environment for all contributors and users. By participating in this project, you agree to abide by our Code of Conduct.

Our Standards

1. Respect: Treat everyone with respect, regardless of their background or opinions.
2. Inclusivity: Encourage and support diverse perspectives and contributions.
3. Collaboration: Be open to constructive feedback and collaboration.
4. Professionalism: Maintain professionalism in all interactions, online and offline.

Contributors

A heartfelt thank you to the following individuals for their valuable contributions to this project. Your support and dedication are greatly appreciated:

Stargazers

Forkers

Reporting Issues

If you experience or witness any behavior that violates this Code of Conduct, please report it by contacting the project maintainers.

For more detailed guidelines, please refer to our full Code of Conduct.

Our Contributors

We extend our heartfelt gratitude for your invaluable contribution to our project! Your efforts play a pivotal role in elevating this project to greater heights.

---