How syedsuhaibhasan/myntra-clone works
This is a client-side Myntra-style storefront and bag UI. The main workflow is loading the static product catalog into the home-page grid, adding product IDs to browser storage, then resolving those IDs on the bag page to render items and calculate totals. The README also describes the header badge, removal flow, and storefront interface elements; search and checkout are UI-only, with no backend or payment integration. The HTML tree and README establish the page and styling capabilities, while the sampled JavaScript supports the behavior and call relationships shown here.
Main entry points: bag.js Remove item · app.js Product grid · bag.html Bag page · index.html Home page
Components 14
Storefront
- Home page
index.html - Home styling
index.css - Product grid
app.js - Product catalog
app.js - Header badge
app.js - Search interface
index.html
Shopping bag
- Bag page
bag.html - Bag styling
bag.css - Bag listing
bag.js - Price summary
bag.js - Remove item
bag.js - Order button
bag.html
Client state
- localStorage
Other components
- Shopper
Connections 17
- Shopper → Home page: opens
- Home page → Product grid: loads script
- Product grid → Product catalog: renders products
- Shopper → Product grid: adds product
- Product grid → localStorage: writes IDs
- Product grid → Header badge: updates count
- Shopper → Bag page: opens bag
- Bag page → Bag listing: loads script
- Bag listing → localStorage: reads IDs
- Bag listing → Product catalog: resolves IDs
- Bag listing → Price summary: calculates totals
- Shopper → Remove item: removes item
- Remove item → localStorage: writes IDs
- Remove item → Bag listing: refreshes listing
- Remove item → Price summary: recalculates
- Remove item → Header badge: updates count
- Bag page → Order button: displays