0% found this document useful (0 votes)
47 views14 pages

ShopEZ_ E-commerce Application - Report

Uploaded by

Tina Stanley
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
47 views14 pages

ShopEZ_ E-commerce Application - Report

Uploaded by

Tina Stanley
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

ShopEZ: E-commerce Application - Report

1. Introduction

Project Title: ShopEZ: E-commerce Application

Team Members:

● Tina S
● Akshaya Nanthini V S
● Shoban Kumar C
● Deepak Roshan J

2. Project Overview

Purpose:
ShopEZ is designed to cater to the growing need for efficient and user-friendly e-commerce
platforms. It bridges the gap between complex online shopping systems and user convenience
by providing streamlined navigation, secure transactions, and personalized product
recommendations. Additionally, the platform empowers sellers with a dashboard for managing
their inventory, processing orders, and accessing analytics to drive growth.

Features:

1. Seamless Checkout: Secure and smooth payment process with instant order
confirmations and email notifications.
2. Effortless Product Discovery: Advanced search capabilities, intuitive category
navigation, and powerful filters to help users find exactly what they need.
3. Personalized Recommendations: AI-driven algorithms analyze user behavior to
provide curated product suggestions.
4. Seller Dashboard: Comprehensive tools for inventory tracking, order processing, and
analytics to monitor performance metrics.
5. Real-time Analytics: Data-driven insights for sellers, highlighting sales trends, customer
preferences, and product performance.
3. Architecture

Frontend:

● Developed using React.js for its component-based architecture and state management
capabilities.
● Features dynamic components like:
○ Product Listings: Displays products with sorting and filtering options.
○ Cart Management: Allows users to add, update, or remove items in their cart.
○ User Authentication: Login and registration pages with secure validation.
○ Admin Panel: Provides sellers with tools to manage inventory and view
analytics.

Backend:

● Built with Node.js and Express.js, ensuring scalability and high performance.
● Features include:
○ API Endpoints:
■ /products for fetching product data.
■ /orders for processing customer orders.
■ /users for managing user authentication.
○ Middleware for error handling and authentication using JWT.

Database:

● MongoDB serves as the database, storing collections for:


○ Users: Authentication credentials, profiles, and purchase history.
○ Products: Information on inventory, prices, categories, and descriptions.
○ Orders: Details about placed orders, delivery status, and payment.

This architecture ensures modularity, scalability, and efficient data management.

4. Setup Instructions

Prerequisites:

● Node.js: v14 or later


● MongoDB: Installed locally or set up using a cloud provider like MongoDB Atlas
● npm: Package manager for installing dependencies
Installation:

Clone the repository:


https://github.com/stinastanley/stina.git

Navigate to the project directory:


cd shopEZ

Install dependencies for the backend and frontend:


Backend:
cd server
npm install
Frontend:
cd client
npm install

Run the servers:

Backend:
node index.js
Frontend:
npm start

5. Folder Structure

Client:

● src/components: Contains reusable components like Navbar, ProductCard,


CartItem, etc.
● src/pages: Holds page components such as Home, Cart, Checkout, and
AdminPanel.
● src/services: Manages API interactions for fetching and posting data.
● src/redux: Implements state management for cart items, user authentication, and
order status.

Server:

● routes: Defines all RESTful API routes for users, products, and orders.
● controllers: Contains the logic for handling API requests and responses.
● models: Defines database schemas for Users, Products, and Orders.
● middleware: Handles authentication (JWT) and error management.
6. Running the Application

Frontend:

Navigate to the client directory:


cd client

Start the React application:


npm start

Backend:

Navigate to the server directory:


cd server

Start the Node.js server:


node index.js

7. API Documentation

Endpoints:

1. GET /products
○ Fetches the list of all products.
○ Parameters: Optional category and price filters.

Response:
json
[
{
"id": "123",
"name": "Gold Bracelet",
"price": 50,
"category": "Accessories"
}
]

2. POST /orders
○ Places a new order.
○ Parameters: User ID, product details, and quantity.
Response:
json
{
"message": "Order placed successfully",
"orderId": "456"
}

8. Authentication

JWT-based Authentication:

● Login: Issues a JWT token upon successful authentication.


● Token Validation: Protects private routes like /orders and /admin.
● Logout: Invalidates the token on the client side.

9. User Interface

Screens:

● Home: Displays trending products and categories.


● Product Details: Shows detailed information about a selected item.
● Cart: Summarizes selected products and their quantities.
● Admin Dashboard: Offers order status updates and analytics for sellers.

10. Testing

● Unit Testing: Conducted using Jest for components and backend logic.
● API Testing: Performed using Postman to validate endpoints.

11. Screenshots or Demo

Screenshots of key UI components and admin panel.


Link to a live demo.

Demo Video.mp4 /
https://drive.google.com/file/d/1B025A59a0S6EKPuVxcbPbKBkClTjvwuN/vi
ew?usp=sharing
12. Known Issues

● Slow Search Performance: Optimization is required for large product datasets.


● UI Bugs: Minor alignment issues on smaller screens.

13. Future Enhancements

● Voice Search: Enable users to search using voice commands.


● Mobile App: Create a cross-platform app using React Native.
● Multi-language Support: Expand accessibility for global audiences.

You might also like