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.
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.
To locally set up the project, follow the following steps:
- Clone the repository:
git clone https://github.com/ANMOLYADAV1402/Ecommerce.git
- Navigate to the project directory:
cd Ecommerce-React-Project
- 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
- For the client, run
- Create a
.env
file in the server directory and input the required environment variables as specified in.env.example
. - Set up a MongoDB database and update the connection details in the
.env
file. - 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
- Run the server and client separately:
- For the client, navigate to the e-commerce-app directory (
cd Frontend/e-commerce-app
) and executenpm start
. - For the database, navigate to the Backend directory (
cd Backend
) and runmongod --dbpath "./Database"
. - For the server, navigate to the Server directory (
cd Backend/Server
) and runnodemon index.js
. - To set up the Stripe server, navigate to the Server directory (
cd Backend/Server
) and runstripe login
. - For payment processing, navigate to the Server directory (
cd Backend/Server
) and executestripe listen --forward-to localhost:portNumber/webhook/webhook
. - Connect the webhook by navigating to the Server directory (
cd Backend/Server
) and runningstripe trigger payment_intent.succeeded
.
- For the client, navigate to the e-commerce-app directory (
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.
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.
![pic7](https://private-user-images.githubusercontent.com/81957738/292729019-22d6f0b3-abcf-4abe-88a3-b645ae5e14f3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3OTExNzUsIm5iZiI6MTcyNDc5MDg3NSwicGF0aCI6Ii84MTk1NzczOC8yOTI3MjkwMTktMjJkNmYwYjMtYWJjZi00YWJlLTg4YTMtYjY0NWFlNWUxNGYzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI3VDIwMzQzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWVjZmQzYzU5MzZkNWZjYzA0YzlhNTRiMTdiYmQ0OTMwZDY5Zjk5Yzc1OGU2ZmQ2MTljNDUxMGY1NDJjZTlkY2YmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.R7S2Wu8e4UhyTLGZNlcdqQZseNk6ueGShQMOZBtctEY)
![pic8](https://private-user-images.githubusercontent.com/81957738/292729052-00be5c2c-46e9-4de4-8cee-d987b5056e7c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3OTExNzUsIm5iZiI6MTcyNDc5MDg3NSwicGF0aCI6Ii84MTk1NzczOC8yOTI3MjkwNTItMDBiZTVjMmMtNDZlOS00ZGU0LThjZWUtZDk4N2I1MDU2ZTdjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI3VDIwMzQzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA2NDFmY2UzNTJiMGE4YjI1ODRjYjQxMGJjZmQzZGJiMzI0OWFiYmRiMWUzY2NiNGNlYTU3YjI2NWU0M2Q1ZDMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.J9eqGa-B_BwgIChd4LwfC7kRrm7dyYWB2SC1Bajdk84)
![pic9](https://private-user-images.githubusercontent.com/81957738/292729082-897fc9a0-8c6e-4e1d-8749-6020ef36d457.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3OTExNzUsIm5iZiI6MTcyNDc5MDg3NSwicGF0aCI6Ii84MTk1NzczOC8yOTI3MjkwODItODk3ZmM5YTAtOGM2ZS00ZTFkLTg3NDktNjAyMGVmMzZkNDU3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI3VDIwMzQzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM3YzQ3MzBmYzkxOTc2ODdiOGIzN2U1ZmU4YzM4NzYxMWJlYjgzOWFkNWRlZGU5YWZkMDc1MzkzZWFjYzE3YmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.4FA8m5LSx_LAnv_Rnu8787C2ZcmjHE5JipPVbU8_7kE)
Payment
Order Summary
If mongoose is shutting down, run pkill mongod
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.