DEPARTMENT OF COMPUTER ENGINEERING

SRTTC’s
Suman Ramesh Tulsiani Technical Campus, Faculty of
Engineering, Kamshet

A REPORT ON

FLIPCART CLONE (LMS)

SUBMITTED TO THE SAVITRIBAI PHULE PUNE UNIVERSITY, PUNE

IN THE FULFILLMENT OF THE REQUIREMENTS
FOR THE WEB TECHNOLOGY MINI PROJECT

BACHELOR OF ENGINEERING (COMPUTER ENGINEERING)

SUBMITTED BY

SHANTANU VIVEK PATIL GR No 221320

 CERTIFICATE

This is to certify that the project report entitles

“FLIPCART CLONE”

Submitted by

SHANTANU PATIL GR No : 221320

is a bonafide student of this institute and the work has been carried out by him/her under the
supervision of Prof. V.Y.Bhamare and it is approved for the fulfillment of the requirement of
Mini Project in Web Technology subject.

Prof. V.Y.Bhamare Dr. Amruta Surana Prof. (Dr.) J.B.Sankpal

Project Coordinator Head of Computer Engineering Principal

SRTTC-FoE, Kamshet

Place : Pune
Date :
 ACKNOWLEDGEMENT

It gives me great pleasure to present Seminar on “FLIPCART CLONE”. In preparing this report, a
number of hands helped me directly and indirectly. Therefore, it becomes my duty to express my
gratitude towards them.

I am very much obliged to the subject teacher Prof. V.Y.Bhamare in the Computer Engineering
Department, for helping me and giving me proper guidance. I will fail in my duty if I don't acknowledge
a great sense of gratitude to the Head of Department Dr. Amruta Surana and the entire staff members
for their cooperation. I wish to record the help extended by my friends in all possible ways and active
support and constant encouragement.
 ABSTRACT

This project presents the development of a responsive and

interactive educational platform website designed using core web
technologies—HTML, CSS, and JavaScript. The platform aims to
provide a user-friendly interface for students and educators to
access and manage learning resources efficiently. HTML is used to
structure the content and layout of the web pages, while CSS is
employed to enhance the visual aesthetics and ensure responsive
design across various devices. JavaScript is integrated to add
interactivity, including dynamic content updates, form validations,
and interactive features such as quizzes, course filtering, and
progress tracking. The platform supports functionalities such as
user registration/login, course browsing, content delivery, and
feedback submission. This project demonstrates how a robust and
engaging educational website can be developed using only front-
end technologies, ensuring accessibility, usability, and
performance.
 TABLE OF CONTENTS

FLIPCART CLONE

Sr. No. Title of Chapter Page No.

01 Introduction
1.1 Background information about the project

1.2 Objectives of the project

1.3 Scope and limitations

1.4 Importance and relevance of the project

02 Literature Survey
2.1 Overview of existing literature or similar projects relevant to
your topic
2.2 Discussion of technologies, frameworks, or methodologies used
in similar projects
03 Software Requirements Specification
3.1 Overview of existing literature or similar projects relevant to
your topic

3.2 Discussion of technologies, frameworks, or methodologies used

in similar projects

3.3 System Requirements

3.3.1 Database Requirements
3.3.2 Software Requirements (Platform Choice)
3.3.3 Hardware Requirements
04 Methodology
4.1 Description of the approach or methodology used to carry out the
project

4.2 Explanation of the tools, technologies, and frameworks utilized

4.3 Details of the development process, including design,

implementation, and testing
4.4 Entity Relationship Diagrams
4.5 UML Diagrams
05 Results
5.1 Project Code (Any one module)
5.2 Presentation of the outcomes or results of the project (Screen
Shots)
5.3 Data analysis, if applicable
06 Results
 6.1 Outcomes
6.2 Screen Shots
07 Conclusions
7.1 Summary of the key findings and outcomes
7.2 future work or areas of further research
7.3 Applications
08 References:
8.1 List of all sources cited in the report, following a specific citation
style (e.g., APA, MLA)
 Introduction

1.1 Background Information About the Project

 In today’s fast-paced digital world, online shopping platforms have

completely transformed the way consumers purchase products. With the
rapid growth of the internet and mobile technology, platforms like Flipkart
and Amazon have become household names, allowing users to shop for
everything from electronics to clothing without leaving their homes.
 This mini project titled "Dummy Flipkart" is a frontend-based e-commerce
simulation. The goal of this project is to replicate the user interface (UI) and
experience (UX) of a real-world e-commerce platform using basic web
technologies like HTML, CSS, and JavaScript. It is important to note that
this is a static website with dummy product data, meant for academic
learning and practice rather than commercial use.
 The idea is to create a visually appealing and functional clone of Flipkart,
showcasing features like:
 Product listings with image, title, and price
 Search functionality
 Simple and clean layout
 This project introduces students to the structure and logic behind shopping
platforms while giving them practical knowledge of web development. It
also emphasizes the importance of responsive design, user interface layout,
and code structure, which are all essential skills in the software industry.
 By building this dummy project, learners get a solid foundation in designing
e-commerce applications, which can be expanded later with backend
systems and real-time features.
 Objectives

1.2 Objectives of the Project

The Dummy Flipkart mini project is created with several educational and developmental
objectives in mind. Its main aim is to help students understand how a basic e-commerce
front-end application is built and functions using core web technologies. The objectives
outlined below are tailored to ensure that learners gain practical experience in web
development and user interface design:
1. Learning Core Web Technologies: One of the key objectives is to introduce and deepen
the understanding of HTML, CSS, and JavaScript. Students learn to build the structure of
web pages (HTML), apply design aesthetics (CSS), and implement interactivity (JavaScript).
2. Replicating a Real-World Platform: The project simulates Flipkart’s frontend design,
allowing students to understand layout design patterns, navigation flows, and product
categorization. This bridges the gap between theoretical knowledge and real-world
application.
3. User Interface and Experience Design: Students learn how to organize content visually
and functionally for the best user experience. Key UI/UX elements such as search bars,
product cards, navigation menus, and responsive grids are incorporated to enhance learning.
4. Hands-on Project Experience: Working on a project that resembles a real-world
application helps students gain confidence in their skills. It encourages creativity, problem-
solving, and logical thinking while writing code.
5. Foundation for Advanced Development: This project serves as a starting point for more
complex applications. Students who complete this project will find it easier to transition into
using advanced libraries and frameworks such as React, Angular, and backend technologies
like Node.js and databases.
6. Portfolio Development: This mini project can be used as a portfolio piece to showcase a
student's capability in building web applications, which is valuable when applying for
internships, jobs, or higher studies.
.
 Scope and limitations

.
Scope of the Project
The scope of this project defines the boundaries and features that are included in the
development of the educational platform website. Since the platform is built solely using
front-end technologies (HTML, CSS, and JavaScript), the scope focuses on static content,
client-side interactivity, and user experience.

1. Static Web Page Design

Structuring the website with HTML5 to create various sections like the homepage, about
page, course listings, contact/feedback form, and quiz page.
2. Styling and Layout
Applying CSS3 to design visually appealing pages.
Implementing a consistent layout, including headers, footers, cards, buttons, and form
elements.
Using CSS Flexbox and Grid for effective content alignment and spacing.
3. Responsive Web Design
Making the website adaptable to different screen sizes using CSS media queries.
Ensuring a seamless experience across desktops, laptops, tablets, and smartphones.
4. Interactive Features Using JavaScript
Creating dynamic content such as quizzes, buttons, alerts, and form validation.
Implementing client-side functionalities like question-answer interactions and form input
checks.
Using DOM manipulation for dynamic content updates without reloading the page.
5. Educational Content Presentation
Displaying course information, instructions, and educational material in a structured and
readable format.
Offering a clean UI that promotes focused learning and easy navigation.
6. Modular Code and Clean File Structure
Writing reusable, maintainable code that allows for future integration of advanced features
like back-end support, user login, or content management.

Limitations of the Project

Despite its usefulness, the project has several limitations due to the absence of back-end
technologies and server-side processing. These limitations include:
1. No User Authentication
The platform does not support user login or registration.
There is no distinction between different user roles (e.g., students, teachers, admins).
2. No Real Database Integration
All content is static and hardcoded.
There is no database to store user data, course progress, quiz results, or feedback
submissions.
3. No Server-Side Processing
The platform is entirely client-side and does not include server technologies like PHP,
Node.js, or Python.
Features like email notifications, data storage, and real-time updates are not available.
4. Limited Multimedia Support
The platform does not integrate audio or video lectures or downloadable resources.
Multimedia features can be added in future iterations but are currently out of scope.
5. Not Suitable for Large-Scale Deployment
As a static website, it is best suited for small-scale educational content delivery.
It cannot handle large volumes of users or dynamically generate content based on user input.
6. Security Limitations
Since everything runs on the client side, sensitive data should not be handled.
There is no mechanism to protect or restrict access to content.
 Importance and relevance

o . The Dummy Flipkart project is highly relevant in today’s technology-driven

world where e-commerce platforms are central to the global economy. The
importance of this project lies in its educational value, practical application, and
its ability to bridge the gap between theory and implementation.
o Educational Importance: This project offers a hands-on learning experience
that complements theoretical studies in web development. Students learn how to
transform ideas into functioning web pages, enhancing their understanding of
structure, layout, styling, and dynamic behaviors.
o Skill Development: By completing this project, students enhance their
problem-solving, debugging, and creative thinking skills. They gain exposure to
common UI patterns and gain confidence in writing and organizing code.
o Career Readiness: Creating a mini project like Dummy Flipkart prepares
students for real-world challenges in web development. It gives them a practical
example to showcase during job interviews or college evaluations. It also acts
as a base for more advanced development using frameworks and backend
systems.
o Industry Relevance: E-commerce is one of the most important industries
globally, and understanding how such platforms work is crucial. This project
introduces students to the same concepts used in professional e-commerce
platforms, albeit in a simpler form.
o In conclusion, the Dummy Flipkart project is not just an academic assignment,
but a powerful learning tool that imparts foundational knowledge of website
development, user interface design, and frontend logic.
 Literature Survey

2.1 Overview of Existing Literature or Similar Projects

In the realm of e-commerce website development, there are numerous examples of
existing platforms that serve as great references. These platforms range from large-
scale websites like Flipkart and Amazon to smaller clones made by developers as part
of their learning projects.
Flipkart:
Flipkart is one of India's leading e-commerce platforms, featuring a vast range of
products, from electronics to clothing and home appliances. It offers essential features
such as:
 Product cataloging: Products are organized by category, with details like images,
prices, and descriptions.
 User interface: The platform is designed for ease of use, providing a responsive layout,
search functionality, and filters to narrow down product choices.
 Security features: Flipkart uses secure payment gateways to ensure safe transactions.
For this mini-project, the goal is to replicate the product listing and basic interactivity of
such platforms, without diving into backend integration.
Amazon:
Amazon, another leading global e-commerce site, offers a similar set of features but with a
more advanced backend structure. Amazon’s user experience (UX) design focuses on:
 Recommendation algorithms: Suggesting products based on browsing history.
 Search and filter options: Enabling users to sort products by price, ratings, brand, etc.
These elements, though advanced, provide insight into how product recommendations and
personalized experiences work.
E-Commerce Clone Projects:
Several open-source repositories and tutorials demonstrate how to build clones of websites
like Flipkart or Amazon. These projects often serve as a starting point for learners, and
they provide hands-on experience with:
 Frontend frameworks like React or Vue.js
 State management with Redux or Context API
 Dynamic loading of products using JSON or mock data
GitHub repositories and YouTube tutorials provide structured steps to replicate basic e-
commerce website features, giving beginners a chance to practice without dealing with
server-side complexity.
Through this literature review, it’s clear that e-commerce platforms, although complex,
follow consistent patterns in their UI/UX design and functionality, which can be
replicated for educational purposes using static data.
 Technologies, Frameworks, and Methodologies

 When developing a dummy Flipkart clone, several frontend technologies,

frameworks, and methodologies are commonly used to simulate a realistic
e-commerce experience. Below is a detailed discussion of the main tools and
techniques employed in such projects.
o Frontend Technologies:
o HTML (Hypertext Markup Language): HTML is the backbone of
any web application. It is used to structure the content on the page.
For the dummy Flipkart project, HTML provides the foundation for
creating product listings, categories, navigation menus, and other
essential sections of the webpage.
o CSS (Cascading Style Sheets): CSS is used for styling the HTML
content. In this project, CSS will be used to style the product cards,
implement responsive design (so the website is mobile-friendly), and
add interactive visual elements such as hover effects and transitions.
CSS Grid or Flexbox will be helpful for creating a flexible layout that
adapts to various screen sizes.
o JavaScript: JavaScript enables dynamic behavior on a website. For
the dummy Flipkart project, JavaScript will be used to:
o Filter products based on search input.
o Simulate a cart where products can be added or removed (for
demonstration purposes).
o Handle other interactions such as toggling between product
categories.
o Frameworks and Libraries:
o React.js (Optional for Advanced Projects): While React is not
mandatory for this mini project, it is widely used in e-commerce
websites for building interactive UIs. React’s component-based
architecture allows developers to break down the application into
reusable components, making the code more maintainable. React also
provides faster rendering through its virtual DOM.
o Bootstrap: A popular CSS framework, Bootstrap provides pre-
designed components like buttons, modals, navigation bars, etc. It can
significantly speed up the development process by providing a
responsive grid system and ready-made design elements.
o Backend Technologies (for Future Expansion):
o Although not part of the current project, many real-world e-
commerce applications involve a backend to handle data storage, user
management, and payment processing. These are typically developed
 using:
o Node.js with Express.js for backend logic.
o MongoDB or MySQL for database management.
o Methodologies:
o Agile Development: In a real-world project, agile methodologies
would be employed for iterative development and continuous
feedback. However, for this mini project, a simple waterfall or linear
development process will be followed, starting with the design,
followed by development and testing.
o Responsive Web Design: Given the importance of mobile
accessibility, the project will ensure that the layout adapts to different
screen sizes. Using CSS frameworks like Bootstrap or custom media
queries, the website can be designed to function smoothly on devices
of all sizes.
o In summary, this project integrates core frontend web development
technologies (HTML, CSS, JavaScript) while optionally
incorporating modern frameworks like React. These tools are key to
replicating the functionality and look of a real-world e-commerce
platform.
 Results
Project Code
Presentation of the outcomes or results of the project
 Conclusions

The Flipkart Clone mini project was a valuable learning experience that provided
practical exposure to the core concepts of web development and frontend design. By
developing a simplified version of an e-commerce platform, this project helped in
understanding how online shopping websites are structured and how users interact with
them. Built using HTML, CSS, and JavaScript, the Flipkart Clone includes key features
such as a homepage with product listings, product cards showing images, names, prices,
and descriptions, along with a navigation bar and a basic search function. The project
successfully demonstrated responsive design principles, clean UI structuring, and static
interaction elements that are fundamental to e-commerce platforms. It fulfilled its
objective of simulating a real-world shopping interface while boosting skills in layout
design and frontend logic.
Although this version of the Flipkart Clone is static and limited to frontend
functionalities, there is ample scope for future development. The project can be enhanced
by integrating backend technologies like Node.js, PHP, or Django, and connecting to
databases such as MySQL or MongoDB to manage dynamic data. Additional features
such as login and registration systems, cart functionality, checkout process, and admin
dashboard could also be implemented to make it a fully functional e-commerce platform.
Furthermore, upgrading the frontend using frameworks like React.js or Vue.js would
improve scalability and responsiveness.
In conclusion, the Flipkart Clone project not only serves as an academic assignment but
also as a solid foundation for building more complex and real-time web applications. It
showcases essential web development skills and can be included in a portfolio to
demonstrate frontend proficiency. The experience and insights gained through this
project will be beneficial in future projects and professional endeavors within the field of
web development.
 References

 W3Schools. (n.d.). HTML Tutorial. Retrieved from https://www.w3schools.com/html/

 W3Schools. (n.d.). CSS Tutorial. Retrieved from https://www.w3schools.com/css/
 W3Schools. (n.d.). JavaScript Tutorial. Retrieved from https://www.w3schools.com/js/
 Mozilla Developer Network (MDN). (n.d.). HTML: HyperText Markup Language.
Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML
 Mozilla Developer Network (MDN). (n.d.). CSS: Cascading Style Sheets. Retrieved from
https://developer.mozilla.org/en-US/docs/Web/CSS
 Mozilla Developer Network (MDN). (n.d.). JavaScript Guide. Retrieved from
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
 Stack Overflow. (n.d.). Community discussions and solutions. Retrieved from
https://stackoverflow.com/
 GeeksforGeeks. (n.d.). Web Development Tutorials. Retrieved from
https://www.geeksforgeeks.org/web-development/
 Conclusions

When we started building the project every concept of React, redux chakra
implementation on a functional website was new to us and we were thinking we
would not be able to create it as effectively as others but we did. The best way to
learn and master skills are to try to implement whatever you have learned, so we
tried our best to create this clone. we worked the whole day even at night, In the
end, we completed the partial cloning of 1mg.com with some of its main
functionalities which are working fine.

Lenskart has established itself as a major player in the eyewear industry in India,
and several factors set it apart from its competitors. Firstly, Lenskart has an
omnichannel presence, offering customers the option to shop online or visit one of
their many retail stores. This provides customers with a personalized and
convenient shopping experience, which sets Lenskart apart from other online
eyewear retailers.

In addition, Lenskart uses innovative technology to enhance the customer

experience. Its virtual try-on feature allows customers to see how different
frames will look on their face, making it easier for them to find the perfect pair of
glasses. Moreover, Lenskart uses AI technology to provide customers with
personalized product recommendations based on their browsing and purchase
history.

Furthermore, Lenskart offers affordable pricing on its products, making eyewear

accessible to a wider audience. The company’s pricing strategy, along with its
promotions and discounts, helps to differentiate it from its competitors in the market.

Lastly, Lenskart’s trained optometrists provide personalized service to customers,

ensuring that they find the perfect pair of glasses for their needs. The company also
offers a home eye check-up service, which makes it easier for customers to get
their eyes tested without having to visit a clinic or hospital.
 References

 https://www.scribd.com/document/422076776/Lenskart-project

 https://wafflebytes.com/blog/lenskart-business- model/#:~:text=Introduction
%20of%20Lenskart,- Lenskart%20is%20a&text=Since%20its%20inception
%2C%20Lenskart%20has,comfort% 20of%20their%20own%20homes

 https://www.google.com/search?
q=information+about+lenskart&oq=information+&gs_lcr
p=EgZjaHJvbWUqDAgCEAAYQxiABBiKBTIHCAAQABiPAjISCAEQABh
DGLEDGM
kDGIAEGIoFMgwIAhAAGEMYgAQYigUyDQgDEAAYkgMYgAQYigUy
DQgEEAAY
kgMYgAQYigUyDQgFEAAYsQMYgAQYigUyDAgGEAAYQxiABBiKBT
IHCAcQABi
ABDIMCAgQABhDGIAEGIoFMgcICRAAGI8C0gEIOTcwMGowajeoAgiw
AgE&source id=chrome&ie=UTF-8

 https://www.google.com/search?
sca_esv=c815caab5ae43dfb&sca_upv=1&sxsrf=ACQVn0
9LrO4S6NaJneW9R1pNmUOtWBoA4w:1712663709664&q=idea+of+lensk
art+clone+ap
plication+code&spell=1&sa=X&ved=2ahUKEwj3zaLAibWFAxVkumMGHc
L6ACMQBS gAegQIBxAC&biw=1536&bih=730&dpr=1.25