# eldieng/fabiram_by_amsa architecture

> Architecture diagram of the GitHub repository eldieng/fabiram_by_amsa, 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/eldieng/fabiram_by_amsa
- Repository: https://github.com/eldieng/fabiram_by_amsa

## Overview

Fabiram is a Senegalese online shop for natural food powders. Shoppers discover products on the homepage or filtered boutique, inspect variants on product pages, add items to a browser-stored cart, then place orders through WhatsApp. Admins manage the product catalogue and upload product images. The README also documents local SEO and responsive storefront features. The product API and upload route are sampled; some page and helper implementations are not, so the graph omits uncertain calls and represents documented but unsampled SEO at its exact source paths.

Main entry points: [`src/app/produit/[id]/page.tsx`](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/produit/%5Bid%5D/page.tsx) (Product detail), [`src/lib/products.ts`](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/lib/products.ts) (Product data client), [`src/app/admin/page.tsx`](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/admin/page.tsx) (Admin panel), [`src/app/api/products/route.ts`](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/api/products/route.ts) (Product API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_home["Home page<br/>[page.tsx]"]
  node_boutique["Product catalogue<br/>[page.tsx]"]
  node_product_detail["Product detail<br/>[page.tsx]"]
  node_about["About page<br/>[page.tsx]"]
  node_contact["Contact page<br/>[page.tsx]"]
  node_shared_layout["Site layout<br/>[layout.tsx]"]
  node_header["Navigation header<br/>[Header.tsx]"]
  node_footer["Site footer<br/>[Footer.tsx]"]
  node_product_card["Product card<br/>[ProductCard.tsx]"]
  node_seo_routes["SEO routes<br/>[sitemap.ts]"]
  node_robots_route["Robots metadata<br/>[robots.ts]"]
end

subgraph group_ordering["Shopping and orders"]
  node_cart_page["Cart page<br/>[page.tsx]"]
  node_cart_logic["Cart operations<br/>[cart.ts]"]
end

subgraph group_admin["Administration"]
  node_admin_page["Admin panel<br/>[page.tsx]"]
end

subgraph group_services["Data and integrations"]
  node_product_api["Product API<br/>[route.ts]"]
  node_upload_api["Image upload API<br/>[route.ts]"]
  node_product_lib["Product data client<br/>[products.ts]"]
  node_product_store[("Product JSON store<br/>[products.json]")]
  node_image_files[("Uploaded images")]
  node_browser_cart[("Browser cart storage")]
end

node_shopper(("Shopper"))
node_admin_user(("Admin user"))
node_whatsapp(("WhatsApp"))

node_shopper -->|"opens"| node_home
node_shopper -->|"browses"| node_boutique
node_shopper -->|"views"| node_product_detail
node_shopper -->|"manages cart"| node_cart_page
node_shopper -->|"reads"| node_about
node_shopper -->|"contacts"| node_contact
node_home -->|"fetches products"| node_product_lib
node_boutique -->|"fetches products"| node_product_lib
node_product_detail -->|"fetches products"| node_product_lib
node_home -->|"renders"| node_product_card
node_boutique -->|"renders"| node_product_card
node_product_detail -->|"renders related"| node_product_card
node_shared_layout -->|"renders"| node_header
node_shared_layout -->|"renders"| node_footer
node_product_lib -->|"requests catalogue"| node_product_api
node_product_api -->|"reads and writes"| node_product_store
node_product_detail -->|"adds item"| node_cart_logic
node_cart_page -->|"manages items"| node_cart_logic
node_cart_logic -->|"reads and writes"| node_browser_cart
node_cart_page -->|"sends order"| node_whatsapp
node_product_detail -->|"opens order link"| node_whatsapp
node_admin_user -->|"manages products"| node_admin_page
node_admin_page -->|"loads catalogue"| node_product_lib
node_admin_page -->|"saves products"| node_product_api
node_admin_page -->|"uploads image"| node_upload_api
node_upload_api -->|"writes image"| node_image_files
node_seo_routes -.->|"lists products"| node_product_api
node_shopper -.->|"discovers pages"| node_seo_routes
node_shopper -.->|"requests rules"| node_robots_route

click node_home "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/page.tsx"
click node_boutique "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/boutique/page.tsx"
click node_product_detail "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/produit/%5Bid%5D/page.tsx"
click node_about "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/a-propos/page.tsx"
click node_contact "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/contact/page.tsx"
click node_shared_layout "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/layout.tsx"
click node_header "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/components/Header.tsx"
click node_footer "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/components/Footer.tsx"
click node_product_card "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/components/ProductCard.tsx"
click node_cart_page "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/panier/page.tsx"
click node_cart_logic "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/lib/cart.ts"
click node_admin_page "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/admin/page.tsx"
click node_product_api "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/api/products/route.ts"
click node_upload_api "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/api/upload/route.ts"
click node_product_lib "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/lib/products.ts"
click node_product_store "https://github.com/eldieng/fabiram_by_amsa/blob/main/data/products.json"
click node_image_files "https://github.com/eldieng/fabiram_by_amsa/tree/main/public/images"
click node_seo_routes "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/sitemap.ts"
click node_robots_route "https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/robots.ts"

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_boutique,node_product_detail,node_about,node_contact,node_shared_layout,node_header,node_footer,node_product_card,node_seo_routes,node_robots_route,node_admin_user toneBlue
class node_cart_page,node_cart_logic toneAmber
class node_admin_page toneMint
class node_product_api,node_upload_api,node_product_lib,node_product_store,node_image_files,node_browser_cart toneRose
class node_shopper,node_whatsapp toneIndigo
```

## Components

### Storefront

- [Home page](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Product catalogue](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/boutique/page.tsx): `src/app/boutique/page.tsx`
- [Product detail](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/produit/%5Bid%5D/page.tsx): `src/app/produit/[id]/page.tsx`
- [About page](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/a-propos/page.tsx): `src/app/a-propos/page.tsx`
- [Contact page](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/contact/page.tsx): `src/app/contact/page.tsx`
- [Site layout](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Navigation header](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Site footer](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`
- [Product card](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/components/ProductCard.tsx): `src/components/ProductCard.tsx`
- [SEO routes](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/sitemap.ts): `src/app/sitemap.ts`
- [Robots metadata](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/robots.ts): `src/app/robots.ts`

### Shopping and orders

- [Cart page](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/panier/page.tsx): `src/app/panier/page.tsx`
- [Cart operations](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/lib/cart.ts): `src/lib/cart.ts`

### Administration

- [Admin panel](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/admin/page.tsx): `src/app/admin/page.tsx`

### Data and integrations

- [Product API](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/api/products/route.ts): `src/app/api/products/route.ts`
- [Image upload API](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/app/api/upload/route.ts): `src/app/api/upload/route.ts`
- [Product data client](https://github.com/eldieng/fabiram_by_amsa/blob/main/src/lib/products.ts): `src/lib/products.ts`
- [Product JSON store](https://github.com/eldieng/fabiram_by_amsa/blob/main/data/products.json): `data/products.json`
- [Uploaded images](https://github.com/eldieng/fabiram_by_amsa/tree/main/public/images): `public/images`
- **Browser cart storage**

### Other components

- **Shopper**
- **Admin user**
- **WhatsApp**

## Connections

- Shopper → Home page: opens
- Shopper → Product catalogue: browses
- Shopper → Product detail: views
- Shopper → Cart page: manages cart
- Shopper → About page: reads
- Shopper → Contact page: contacts
- Home page → Product data client: fetches products
- Product catalogue → Product data client: fetches products
- Product detail → Product data client: fetches products
- Home page → Product card: renders
- Product catalogue → Product card: renders
- Product detail → Product card: renders related
- Site layout → Navigation header: renders
- Site layout → Site footer: renders
- Product data client → Product API: requests catalogue
- Product API → Product JSON store: reads and writes
- Product detail → Cart operations: adds item
- Cart page → Cart operations: manages items
- Cart operations → Browser cart storage: reads and writes
- Cart page → WhatsApp: sends order
- Product detail → WhatsApp: opens order link
- Admin user → Admin panel: manages products
- Admin panel → Product data client: loads catalogue
- Admin panel → Product API: saves products
- Admin panel → Image upload API: uploads image
- Image upload API → Uploaded images: writes image
- SEO routes → Product API: lists products
- Shopper → SEO routes: discovers pages
- Shopper → Robots metadata: requests rules