Scribd
Upload
5 views18 pages

Apna Bajar A React Based E Commerce Website

Apna Bajar is a modern e-commerce web application developed using React.js, featuring a responsive design and intuitive user experience. Key functionalities include product browsing, cart management, and state management through hooks and Redux. The project aims to enhance skills in component-based architecture, UI/UX design, and client-side routing, with future plans for user authentication and payment integration.

Uploaded by

superjolly09
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views18 pages

Apna Bajar A React Based E Commerce Website

Apna Bajar is a modern e-commerce web application developed using React.js, featuring a responsive design and intuitive user experience. Key functionalities include product browsing, cart management, and state management through hooks and Redux. The project aims to enhance skills in component-based architecture, UI/UX design, and client-side routing, with future plans for user authentication and payment integration.

Uploaded by

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

Apna Bajar - E-Commerce

Website

Presented by Prachi Jolly from IITM, affiliated with DCRUST University.

Guided by Mrs. Monika Sharma.

pj
Introduction to Apna Bajar
Modern Web App
Developed using React.js with responsive design for diverse
devices.

User Experience
Offers intuitive navigation and real-world online shopping features.
Project Objectives
Fast & Responsive Component
Architecture
Build a performant UI using
React framework. Understand reusable UI
parts through components.

Dynamic Features
Implement routing, state management, and backend integration.
Key Features of Apna Bajar
• Fully responsive UI • Search capability
• Product browsing & filtering • Routing with React Router
• Add & remove cart items • State management with hooks/redux
• Dummy checkout system
Tools and Technologies Used
Frontend State Management

React.js, HTML5, CSS3, JavaScript (ES6+) React Hooks (useState, useEffect)

Routing Version Control

React Router DOM Git and GitHub

Styling Backend

CSS Modules, Tailwind CSS, Bootstrap Dummy JSON Server

Testing

J Manual testing
Project Architecture
1 Component Structure
App component contains Header, Footer, Home, and
other pages.

2 Single Page Application


Implemented routing for seamless navigation.

3 State Management
Data flows via props, context, and React hooks.
Website Screenshots

Home Page
Product Listing
Cart Page
Buyer/ user profile
Wishlist and order history of the buyer/ user
Profile of admin
Profile of super admin
Challenges Faced During Development
State Management Routing
Handling component state and props dynamically. Implementing React Router with dynamic routes.

Responsiveness Data Handling


Ensuring UI adapts across devices and screen sizes. Fetching and displaying data dynamically from backend.
Learning Outcomes Gained
Component-Based UI State & Hooks
Mastered structured UI with reusable React Learned efficient state management using React
components. hooks.

UI/UX Design SPA Navigation


Improved skills in designing responsive interfaces. Understood client-side routing with React Router.
Future Scopes
User Authentication
Implement login and signup for user security.

Payment Integration

Admin Panel
Develop product management dashboard for admins.

Deployment
Conclusion

Apna Bajar is a fully functional front-end project developed using React, designed to
simulate a real-world e-commerce platform.
This project demonstrates the ability to build scalable, responsive, and interactive web
applications using modern React practices. It highlights a strong understanding of
component-based architecture, state management, and user-centric design—essential
skills for front-end development.
Thank you

You might also like