Skip to content

The E-Commerce Website offers seamless shopping with a wide product range, secure payments, and a modern interface. Powered by React, Node.js, and MongoDB.

Notifications You must be signed in to change notification settings

ANMOLYADAV1402/Ecommerce

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ECommerce

Welcome to the README file for the E-commerce project, a comprehensive full-stack application crafted to streamline the online shopping experience. Leveraging a diverse array of technologies and frameworks, this project aims to provide a robust and scalable e-commerce website. Key features include product listings, efficient shopping cart management, secure user authentication, seamless order processing, integrated payment solutions, email notifications, encrypted password handling, and the implementation of web token authentication.

Structure of Project

The project adopts a methodical and modularized approach to ensure ease of maintenance and extensibility. Here is an overview of the primary directories and files:

  • Frontend: Within this directory lies the React frontend code for the e-commerce website. It encompasses components, pages, styles, and files associated with the user interface.

  • Server: The server directory hosts the Node.js and Express backend code. It covers routes, services, models, and middleware responsible for managing API requests and implementing the core business logic.

  • Database: This directory houses the Mongoose schemas and models used to define the data structure and interact with the MongoDB database.

  • src: This directory holds static assets such as images, stylesheets, and client-side JavaScript files.

  • README.md: The primary README file providing essential information about the project.

Process of Installation

To locally set up the project, follow the following steps:

  1. Clone the repository: git clone https://github.com/ANMOLYADAV1402/Ecommerce.git
  2. Navigate to the project directory: cd Ecommerce-React-Project
  3. Install dependencies for the client and server:
    • For the client, run cd Frontend/e-commerce-app && npm install
    • For the server, run cd Backend/Server && npm install
  4. Create a .env file in the server directory and input the required environment variables as specified in .env.example.
  5. Set up a MongoDB database and update the connection details in the .env file.
  6. Install necessary dependencies, navigate to the Server directory, and run npm i express jwt ejs nodemailer bcrypt path mongoose stripe dotenv cors body-parser nodemon
  7. Run the server and client separately:
    • For the client, navigate to the e-commerce-app directory (cd Frontend/e-commerce-app) and execute npm start.
    • For the database, navigate to the Backend directory (cd Backend) and run mongod --dbpath "./Database".
    • For the server, navigate to the Server directory (cd Backend/Server) and run nodemon index.js.
    • To set up the Stripe server, navigate to the Server directory (cd Backend/Server) and run stripe login.
    • For payment processing, navigate to the Server directory (cd Backend/Server) and execute stripe listen --forward-to localhost:portNumber/webhook/webhook.
    • Connect the webhook by navigating to the Server directory (cd Backend/Server) and running stripe trigger payment_intent.succeeded.

Usage

After successfully setting up and running the project, you can access the E-commerce website by navigating to https://localhost:3000 in your web browser. Upon reaching the homepage, you'll find a display of product listings. Feel free to explore various categories, add items to your cart, and proceed to the checkout process. Utilize user authentication to manage orders and access personalized features throughout your shopping experience.

Technologies and Frameworks Used

The project incorporates the following technologies and frameworks:

  • HTML: The standard markup language for creating web pages.
  • CSS: A stylesheet language for styling HTML documents.
  • JavaScript: A programming language for adding interactivity and functionality to web pages.
  • Bootstrap: A popular CSS framework for building responsive and mobile-first websites.
  • React: A JavaScript library for building user interfaces.
  • Node.js: A JavaScript runtime environment for server-side development.
  • Express: A flexible and minimal web application framework for Node.js.
  • EJS: A templating engine for generating dynamic HTML pages.
  • Mongoose: An object data modeling (ODM) library for MongoDB and Node.js.
  • MongoDB: A popular NoSQL database for storing application data.
  • Stripe: A payment processing platform for securely handling online transactions.
  • Nodemailer: A module for sending email notifications from Node.js applications.
  • bcrypt: A library for password hashing and encryption.
  • JWT: JSON Web Tokens for secure authentication and authorization.

Overview of the project

Sign Up pic1

Login pic2

Forgot Password pic3

Main Page pic4

Department pic5

Products pic6

pic7 pic8 pic9

Update Profile pic10

Order Preview pic11

My Cart pic12

My Orders pic13

Payment

image

Successful Payment image

Order Summary

image

Precaution

If mongoose is shutting down, run pkill mongod

Contributing

I welcome contributions to the project! If you come across any bugs, have suggestions for enhancements, or wish to introduce new features, feel free to open an issue or submit a pull request.

When contributing, please maintain consistency with the existing code style, adhere to best practices, and ensure comprehensive testing of your modifications. Your attention to these guidelines will help maintain the project's integrity and facilitate the review process.

About

The E-Commerce Website offers seamless shopping with a wide product range, secure payments, and a modern interface. Powered by React, Node.js, and MongoDB.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published