Skip to content

The E-Commerce Website is a user-friendly online platform for seamless shopping. It offers a wide range of products, secure payments, and a modern interface. Powered by React, Node.js, and MongoDB. πŸ›οΈπŸ’»

Notifications You must be signed in to change notification settings

Ankit-Ransh/Radiant-Revival

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

70 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

E-Commerce

This is the README file for the E-commerce project, a full-stack application designed to facilitate online shopping. The project utilizes various technologies and frameworks to deliver a feature-rich and scalable e-commerce website with functionalities such as product listings, shopping cart management, user authentication, order processing, payment integration, email notifications, password encryption, and web token authentication.

Project Structure

The project follows a structured and modular approach to ensure maintainability and extensibility. Below is an overview of the main directories and files:

  • Frontend: This directory contains the React frontend code for the e-commerce website. It includes components, pages, styles, and files associated with the user interface.

  • Server: The server directory contains the Node.js and Express backend code. It encompasses routes, services, models, and middleware responsible for handling API requests and implementing the business logic.

  • Database: This directory includes the Mongoose schemas and models used for defining the data structure and interacting with the MongoDB database.

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

  • README.md: The main README file for the project.

Installation

To set up the project locally, follow these steps:

  1. Clone the repository: git clone https://github.com/Ankit-Ransh/E-commerce.git
  2. Navigate to the project directory: cd Ecommerce-React-Project
  3. Install the 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 provide the necessary environment variables as specified in .env.example.
  5. Set up a MongoDB database and update the database connection details in the .env file.
  6. Install the 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 run 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.
    • Setup the stripe server, navigate to the Server directory (cd Backend/Server) and run stripe login
    • For the payment, navigate to the Server directory (cd Backend/Server) and run stripe listen --forward-to localhost:portNumber/webhook/webhook.
    • Now connect the webhook, navigate to the Server directory (cd Backend/Server) and run stripe trigger payment_intent.succeeded

Usage

Once the project is set up and running, you can access the E-commerce website by visiting http://localhost:3000 in your web browser. The homepage will display product listings, and you can explore different categories, add items to your cart, and proceed to checkout. User authentication is available for managing orders and accessing personalized features.

Technologies Used

The project utilizes 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 Screenshot 2023-07-01 at 10 00 08 PM

Login Screenshot 2023-07-01 at 10 00 19 PM

Forgot Password Screenshot 2023-07-01 at 10 00 33 PM

Main Page Screenshot 2023-07-01 at 9 24 32 PM

Department Screenshot 2023-07-01 at 9 24 55 PM

Products Screenshot 2023-07-01 at 9 26 02 PM

Screenshot 2023-07-01 at 9 25 29 PM Screenshot 2023-07-01 at 9 26 19 PM Screenshot 2023-07-01 at 9 27 18 PM

Update Profile Screenshot 2023-07-01 at 9 31 17 PM

Order Preview Screenshot 2023-07-01 at 9 27 35 PM

My Cart Screenshot 2023-07-01 at 9 28 06 PM

My Orders Screenshot 2023-07-01 at 9 31 36 PM

Payment Screenshot 2023-07-01 at 9 28 47 PM

Successful Payment Screenshot 2023-07-01 at 9 29 48 PM

Order Summary Screenshot 2023-07-04 at 3 24 37 PM

Precaution

If mongoose is shutting down, run pkill mongod Whenever change the domain make sure to edit ejs file in Backend/Server/Views.

Contributing

Contributions to the project are welcome! If you encounter any bugs, have suggestions for improvements, or would like to add new features, please open an issue or submit a pull request.

When contributing, please adhere to the existing code style, follow best practices, and ensure thorough testing of your changes.

About

The E-Commerce Website is a user-friendly online platform for seamless shopping. It offers a wide range of products, secure payments, and a modern interface. Powered by React, Node.js, and MongoDB. πŸ›οΈπŸ’»

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published