Front end web development

PBL program 2025

1. Jatin
2. Ashish Yadav
3. Yash Baghel
4. Karan singh
Introduction:
Objectives of the Project
1. Understand E-commerce Website Architecture To gain practical knowledge of
how large-scale e-commerce platforms like Myntra are structured and function
behind the scenes.
2. Front-end Development Practice To design an engaging and responsive user
interface using HTML, CSS, and JavaScript, mimicking Myntra’s user experience.
3. Database Management To store and manage product data, user data, and
order history using efficient database techniques.
4. Improve Team Collaboration Skills To enhance collaborative development
skills by working in a team using version control tools like Git and platforms like
GitHub.
5. Deploy a Functional E-commerce Clone To host and deploy a working Myntra
clone that demonstrates core features like browsing, filtering, login/signup, and
cart checkout.
Table of Contents:
• Introduction: What is a Myntra Clone?
• Project Goals
• Core Technologies
• Application Structure (HTML)
• Styling & Responsiveness (CSS)
• Interactivity & Functionality (JavaScript)
• Key Features Implemented
• Development Challenges & Solutions
Project Goals:
• User-Friendly Interface: Design an intuitive and aesthetically
pleasing layout similar to Myntra.
• Product Display: Showcase a variety of products with images,
descriptions, and prices.
• Navigation: Implement clear navigation (categories, search).
• Shopping Cart Functionality: Allow users to add/remove items
and view their cart.
• Responsive Design: Ensure the app works well on different
screen sizes (desktop, tablet, mobile).
• Basic Interactivity: Implement features like image sliders,
quantity selectors.
Core Technologies:
• HTML (HyperText Markup Language):
• The backbone of the application.
• Defines the structure and content of web pages.
• Used for product listings, navigation bars, banners, forms, etc.
• CSS (Cascading Style Sheets):
• Responsible for the visual presentation and styling.
• Controls layout, colors, fonts, spacing, animations, and
responsiveness.
• Makes the app visually appealing and brand-consistent.
• JavaScript:
• Adds dynamic behavior and interactivity.
• Handles user interactions, manipulates the DOM, fetches data (if
backend exists), and manages application logic.
• Powers features like add-to-cart, image carousels, search filters,
form validation.
Application Structure (HTML):
• index.html: The main entry point of the application.
• Key Sections/Divisions:
• <header>: Navigation bar, logo, search bar, user icons.
• <nav>: Main navigation links (e.g., Men, Women, Kids, Home & Living).
• <main>:
• Hero/Banner section.
• Product listing grid (e.g., using <div> elements for each product card).
• Category sections.
• <footer>: Copyright information, quick links.
• <aside>: Filters, sort options (optional, could be part of main).
• <div id="cart-modal">: Hidden modal for shopping cart.
• Semantic HTML5: Utilizing tags like <article>, <section>, <aside> for
better structure and SEO.
Styling & Responsiveness (CSS):
• External Stylesheets: Linking style.css (or multiple CSS files) to index.html.
• Key CSS Concepts Used:
• Flexbox & Grid: For efficient and flexible layout of product grids, navigation,
and general page structure.
• Media Queries: @media screen and (max-width: ...px) to adjust layouts for
different screen sizes (mobile-first approach recommended).
• CSS Variables: For consistent colors, fonts, and spacing.
• Transitions & Animations: For smooth hover effects, button clicks, and
modal animations.
• Unit Usage: rem, em, vw, vh, % for scalable design.
• Design Elements:
• Consistent color palette and typography.
• Shadows and borders for card-like elements.
• Hover effects for interactive elements.
Interactivity & Functionality (JavaScript):
• DOM Manipulation:
• Adding/removing elements (e.g., adding items to cart).
• Updating content (e.g., cart item count, total price).
• Changing styles dynamically (e.g., showing/hiding modals).
• Event Handling:
• click events: For "Add to Cart" buttons, navigation links, menu toggles.
• input events: For search functionality, quantity updates.
• Core Functions/Logic:
• Product Data Management: Storing product information (array of objects, potentially static or
fetched from a local JSON/API for more advanced clones).
• Shopping Cart Logic:
• Adding items to a cart array.
• Updating item quantities.
• Removing items.
• Calculating total price.
• Persisting cart data (e.g., using localStorage for a simple demo).
• Search and Filter: Filtering product display based on user input or selected categories.
• Image Carousel/Slider: Automatic or manual image switching for product details.
• Modal Windows: Displaying product details or the shopping cart.
Key Features Implemented (Examples):
• Product Listing Page: Grid layout of products with images, names,
prices.
• Navigation Bar: Links to different categories (Men, Women, Kids).
• Search Bar: Basic search functionality to filter products by name.
• Add to Cart Button: Adds a product to the virtual shopping cart.
• Shopping Cart Modal/Page: Displays selected items, quantities, and
total.
• Remove from Cart Functionality: Allows users to delete items from
their cart.
• Responsive Design: Adapts to mobile and desktop views.
• Product Detail View (Optional): Clicking a product shows more details
(could be a simple modal or a new page).
Development Challenges & Solutions:
• Challenge 1: Managing Product Data:
• Solution: Started with a hardcoded JavaScript array of product objects;
explored fetching from a local JSON file for scalability.
• Challenge 2: Complex CSS Layouts:
• Solution: Extensively used Flexbox and CSS Grid for efficient and responsive
layouts. Debugged with browser developer tools.
• Challenge 3: Dynamic Cart Updates:
• Solution: Implemented functions to dynamically update the DOM whenever
items were added, removed, or quantities changed, ensuring real-time
reflection.
• Challenge 4: Ensuring Responsiveness:
• Solution: Employed a mobile-first approach with media queries, testing
thoroughly on various device emulators.
Website link: