# rahulsan-22/zepto-clone architecture

> Architecture diagram of the GitHub repository rahulsan-22/zepto-clone, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rahulsan-22/zepto-clone
- Repository: https://github.com/rahulsan-22/zepto-clone

## Overview

This is a browser-based shopping storefront: shoppers browse a product catalogue or category, filter/search items, and add products to a cart or wishlist; the cart supports quantity changes, billing, and a simulated purchase confirmation. Browser local storage holds cart, wishlist, and selected-category data, while session storage carries the selected category name. Location lookup uses browser geolocation and a reverse-geocoding service. The tree and sampled JavaScript support these responsibilities, but README and HTML wiring were not provided, so page-to-script loading links are not asserted.

Main entry points: [`Cart.js`](https://github.com/rahulsan-22/zepto-clone/blob/main/Cart.js) (Cart operations), [`Wishlist.js`](https://github.com/rahulsan-22/zepto-clone/blob/main/Wishlist.js) (Wishlist logic), [`script.js`](https://github.com/rahulsan-22/zepto-clone/blob/main/script.js) (Category browser), [`Products.js`](https://github.com/rahulsan-22/zepto-clone/blob/main/Products.js) (Product catalogue)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browse["Product browsing"]
  node_home["Storefront<br/>[index.html]"]
  node_home_script["Category browser<br/>[script.js]"]
  node_products_page["Products page<br/>[Products.html]"]
  node_products["Product catalogue<br/>[Products.js]"]
  node_category_page["Category page<br/>[Category.html]"]
  node_category["Category listing<br/>[Category.js]"]
  node_catalog_api["Product catalogue API"]
end

subgraph group_shopping["Cart and wishlist"]
  node_cart_page["Cart page<br/>[Cart.html]"]
  node_order["Checkout and bill<br/>[Order.js]"]
  node_wishlist_page["Wishlist page<br/>[Wishlist.html]"]
  node_wishlist["Wishlist logic<br/>[Wishlist.js]"]
  node_cart_logic["Cart operations<br/>[Cart.js]"]
end

subgraph group_state["Browser state"]
  node_browser_storage[("Local and session storage")]
end

subgraph group_location["Location lookup"]
  node_geo["Browser geolocation"]
  node_location_logic["Saved location lookup<br/>[location.js]"]
  node_inline_location["Location lookup<br/>[script.js]"]
  node_reverse_geocode["Reverse geocoding"]
end

node_shopper(("Shopper"))

node_shopper -->|"opens storefront"| node_home
node_shopper -->|"browses products"| node_products_page
node_shopper -->|"opens category"| node_category_page
node_shopper -->|"reviews cart"| node_cart_page
node_shopper -->|"manages wishlist"| node_wishlist_page
node_home_script -->|"fetches category"| node_catalog_api
node_home_script -->|"stores category data"| node_browser_storage
node_home_script -->|"navigates after fetch"| node_category_page
node_products -->|"fetches products"| node_catalog_api
node_products -->|"changes quantities"| node_cart_logic
node_products -->|"toggles wishlist"| node_wishlist
node_category -->|"reads category data"| node_browser_storage
node_category -->|"changes quantities"| node_cart_logic
node_category -->|"toggles wishlist"| node_wishlist
node_order -->|"reads and deletes items"| node_cart_logic
node_order -->|"clears cart"| node_browser_storage
node_wishlist -->|"reads and writes wishlist"| node_browser_storage
node_wishlist -->|"moves product to cart"| node_cart_logic
node_cart_logic -->|"reads and writes cart"| node_browser_storage
node_location_logic -->|"reads and saves location"| node_browser_storage
node_location_logic -->|"requests coordinates"| node_geo
node_location_logic -->|"fetches address"| node_reverse_geocode
node_inline_location -->|"requests coordinates"| node_geo
node_inline_location -->|"fetches address"| node_reverse_geocode

click node_home "https://github.com/rahulsan-22/zepto-clone/blob/main/index.html"
click node_home_script "https://github.com/rahulsan-22/zepto-clone/blob/main/script.js"
click node_products_page "https://github.com/rahulsan-22/zepto-clone/blob/main/Products.html"
click node_products "https://github.com/rahulsan-22/zepto-clone/blob/main/Products.js"
click node_category_page "https://github.com/rahulsan-22/zepto-clone/blob/main/Category.html"
click node_category "https://github.com/rahulsan-22/zepto-clone/blob/main/Category.js"
click node_cart_page "https://github.com/rahulsan-22/zepto-clone/blob/main/Cart.html"
click node_order "https://github.com/rahulsan-22/zepto-clone/blob/main/Order.js"
click node_wishlist_page "https://github.com/rahulsan-22/zepto-clone/blob/main/Wishlist.html"
click node_wishlist "https://github.com/rahulsan-22/zepto-clone/blob/main/Wishlist.js"
click node_cart_logic "https://github.com/rahulsan-22/zepto-clone/blob/main/Cart.js"
click node_location_logic "https://github.com/rahulsan-22/zepto-clone/blob/main/location.js"
click node_inline_location "https://github.com/rahulsan-22/zepto-clone/blob/main/script.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_home_script,node_products_page,node_products,node_category_page,node_category,node_catalog_api toneBlue
class node_cart_page,node_order,node_wishlist_page,node_wishlist,node_cart_logic toneAmber
class node_browser_storage toneMint
class node_geo,node_location_logic,node_inline_location,node_reverse_geocode toneRose
class node_shopper toneIndigo
```

## Components

### Product browsing

- [Storefront](https://github.com/rahulsan-22/zepto-clone/blob/main/index.html): `index.html`
- [Category browser](https://github.com/rahulsan-22/zepto-clone/blob/main/script.js): `script.js`
- [Products page](https://github.com/rahulsan-22/zepto-clone/blob/main/Products.html): `Products.html`
- [Product catalogue](https://github.com/rahulsan-22/zepto-clone/blob/main/Products.js): `Products.js`
- [Category page](https://github.com/rahulsan-22/zepto-clone/blob/main/Category.html): `Category.html`
- [Category listing](https://github.com/rahulsan-22/zepto-clone/blob/main/Category.js): `Category.js`
- **Product catalogue API**

### Cart and wishlist

- [Cart page](https://github.com/rahulsan-22/zepto-clone/blob/main/Cart.html): `Cart.html`
- [Checkout and bill](https://github.com/rahulsan-22/zepto-clone/blob/main/Order.js): `Order.js`
- [Wishlist page](https://github.com/rahulsan-22/zepto-clone/blob/main/Wishlist.html): `Wishlist.html`
- [Wishlist logic](https://github.com/rahulsan-22/zepto-clone/blob/main/Wishlist.js): `Wishlist.js`
- [Cart operations](https://github.com/rahulsan-22/zepto-clone/blob/main/Cart.js): `Cart.js`

### Browser state

- **Local and session storage**

### Location lookup

- **Browser geolocation**
- [Saved location lookup](https://github.com/rahulsan-22/zepto-clone/blob/main/location.js): `location.js`
- [Location lookup](https://github.com/rahulsan-22/zepto-clone/blob/main/script.js): `script.js`
- **Reverse geocoding**

### Other components

- **Shopper**

## Connections

- Shopper → Storefront: opens storefront
- Shopper → Products page: browses products
- Shopper → Category page: opens category
- Shopper → Cart page: reviews cart
- Shopper → Wishlist page: manages wishlist
- Category browser → Product catalogue API: fetches category
- Category browser → Local and session storage: stores category data
- Category browser → Category page: navigates after fetch
- Product catalogue → Product catalogue API: fetches products
- Product catalogue → Cart operations: changes quantities
- Product catalogue → Wishlist logic: toggles wishlist
- Category listing → Local and session storage: reads category data
- Category listing → Cart operations: changes quantities
- Category listing → Wishlist logic: toggles wishlist
- Checkout and bill → Cart operations: reads and deletes items
- Checkout and bill → Local and session storage: clears cart
- Wishlist logic → Local and session storage: reads and writes wishlist
- Wishlist logic → Cart operations: moves product to cart
- Cart operations → Local and session storage: reads and writes cart
- Saved location lookup → Local and session storage: reads and saves location
- Saved location lookup → Browser geolocation: requests coordinates
- Saved location lookup → Reverse geocoding: fetches address
- Location lookup → Browser geolocation: requests coordinates
- Location lookup → Reverse geocoding: fetches address