# yuriidri/fazzyu architecture

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

## Overview

FAZZYU Creations is a handmade-crafts storefront paired with a protected administration dashboard. Customers browse the home page, shop, product details, and gallery; the app also exposes custom-order and photobooth pages. Administrators sign in, then manage orders, inventory, and gallery content, with order changes reflected in the shop. Shared state is coordinated by AppDataContext: the sampled source shows Supabase order access and local persistence for selected state, while broader page-to-context wiring is based on the README. Unsampled page implementations are represented only at the documented capability level.

Main entry points: [`src/app/App.tsx`](https://github.com/yuriidri/fazzyu/blob/main/src/app/App.tsx) (Router and shells), [`src/app/context/AppDataContext.tsx`](https://github.com/yuriidri/fazzyu/blob/main/src/app/context/AppDataContext.tsx) (App data context), [`src/app/pages/ShopPage.tsx`](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/ShopPage.tsx) (Product shop), [`src/app/pages/GalleryPage.tsx`](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/GalleryPage.tsx) (Photo gallery)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_customer["Customer storefront"]
  node_home["Home and contact<br/>[HomePage.tsx]"]
  node_shop["Product shop<br/>[ShopPage.tsx]"]
  node_product["Product details<br/>[ItemPage.tsx]"]
  node_gallery["Photo gallery<br/>[GalleryPage.tsx]"]
  node_custom["Custom orders"]
  node_booth["Photobooth<br/>[PhotoboothPage.tsx]"]
end

subgraph group_admin["Administration"]
  node_login["Admin login<br/>[LoginPage.tsx]"]
  node_layout["Admin navigation<br/>[AdminLayout.tsx]"]
  node_dashboard["Dashboard<br/>[AdminDashboard.tsx]"]
  node_orders["Order management"]
  node_orderform["Order forms"]
  node_orderedit["Order editing"]
  node_orderlist["Customer order list"]
  node_inventory["Inventory management"]
  node_inventoryforms["Inventory forms"]
  node_inventoryedit["Inventory editing"]
  node_galleryadmin["Gallery management"]
end

subgraph group_state["Shared state"]
  node_context["App data context<br/>[AppDataContext.tsx]"]
  node_supabase[("Supabase")]
  node_localstorage[("Browser local storage")]
end

subgraph group_app["Application access"]
  node_app["Router and shells<br/>[App.tsx]"]
  node_guard["Route protection<br/>[AuthGuard.tsx]"]
end

node_visitor(("Customer"))
node_administrator(("Administrator"))

node_visitor -->|"opens pages"| node_app
node_administrator -->|"opens pages"| node_app
node_app -->|"provides state"| node_context
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_shop
node_app -->|"routes to"| node_product
node_app -->|"routes to"| node_gallery
node_app -->|"routes to"| node_custom
node_app -->|"routes to"| node_booth
node_app -->|"routes to"| node_login
node_app -->|"protects admin"| node_guard
node_guard -->|"allows access"| node_layout
node_app -->|"wraps admin"| node_layout
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_orders
node_app -->|"routes to"| node_orderform
node_app -->|"routes to"| node_orderedit
node_app -->|"routes to"| node_orderlist
node_app -->|"routes to"| node_inventory
node_app -->|"routes to"| node_inventoryforms
node_app -->|"routes to"| node_inventoryedit
node_app -->|"routes to"| node_galleryadmin
node_shop -->|"reads orders"| node_context
node_gallery -->|"reads gallery"| node_context
node_orders -->|"manages orders"| node_context
node_orderform -->|"adds orders"| node_context
node_orderedit -->|"edits orders"| node_context
node_orderlist -->|"reads orders"| node_context
node_inventory -->|"reads inventory"| node_context
node_inventoryforms -->|"adds items"| node_context
node_inventoryedit -->|"edits items"| node_context
node_galleryadmin -->|"manages gallery"| node_context
node_context -->|"reads and writes orders"| node_supabase
node_context -->|"persists selected state"| node_localstorage
node_login -->|"stores token"| node_localstorage

click node_app "https://github.com/yuriidri/fazzyu/blob/main/src/app/App.tsx"
click node_home "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/HomePage.tsx"
click node_shop "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/ShopPage.tsx"
click node_product "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/ItemPage.tsx"
click node_gallery "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/GalleryPage.tsx"
click node_custom "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/CustomOrderPage.tsx"
click node_booth "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/PhotoboothPage.tsx"
click node_login "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/LoginPage.tsx"
click node_guard "https://github.com/yuriidri/fazzyu/blob/main/src/app/components/AuthGuard.tsx"
click node_layout "https://github.com/yuriidri/fazzyu/blob/main/src/app/layouts/AdminLayout.tsx"
click node_dashboard "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminDashboard.tsx"
click node_orders "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminAddEditPage.tsx"
click node_orderform "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminAddOrderPage.tsx"
click node_orderedit "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminEditOrderPage.tsx"
click node_orderlist "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminOrderListPage.tsx"
click node_inventory "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminInventoryPage.tsx"
click node_inventoryforms "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminAddNewItemPage.tsx"
click node_inventoryedit "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminEditItemPage.tsx"
click node_galleryadmin "https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminGalleryPage.tsx"
click node_context "https://github.com/yuriidri/fazzyu/blob/main/src/app/context/AppDataContext.tsx"

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_shop,node_product,node_gallery,node_custom,node_booth toneBlue
class node_login,node_layout,node_dashboard,node_orders,node_orderform,node_orderedit,node_orderlist,node_inventory,node_inventoryforms,node_inventoryedit,node_galleryadmin toneAmber
class node_context,node_supabase,node_localstorage toneMint
class node_app,node_guard toneRose
class node_visitor,node_administrator toneIndigo
```

## Components

### Customer storefront

- [Home and contact](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/HomePage.tsx): `src/app/pages/HomePage.tsx`
- [Product shop](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/ShopPage.tsx): `src/app/pages/ShopPage.tsx`
- [Product details](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/ItemPage.tsx): `src/app/pages/ItemPage.tsx`
- [Photo gallery](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/GalleryPage.tsx): `src/app/pages/GalleryPage.tsx`
- [Custom orders](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/CustomOrderPage.tsx): `src/app/pages/CustomOrderPage.tsx`
- [Photobooth](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/PhotoboothPage.tsx): `src/app/pages/PhotoboothPage.tsx`

### Administration

- [Admin login](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/LoginPage.tsx): `src/app/pages/LoginPage.tsx`
- [Admin navigation](https://github.com/yuriidri/fazzyu/blob/main/src/app/layouts/AdminLayout.tsx): `src/app/layouts/AdminLayout.tsx`
- [Dashboard](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminDashboard.tsx): `src/app/pages/admin/AdminDashboard.tsx`
- [Order management](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminAddEditPage.tsx): `src/app/pages/admin/AdminAddEditPage.tsx`
- [Order forms](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminAddOrderPage.tsx): `src/app/pages/admin/AdminAddOrderPage.tsx`
- [Order editing](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminEditOrderPage.tsx): `src/app/pages/admin/AdminEditOrderPage.tsx`
- [Customer order list](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminOrderListPage.tsx): `src/app/pages/admin/AdminOrderListPage.tsx`
- [Inventory management](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminInventoryPage.tsx): `src/app/pages/admin/AdminInventoryPage.tsx`
- [Inventory forms](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminAddNewItemPage.tsx): `src/app/pages/admin/AdminAddNewItemPage.tsx`
- [Inventory editing](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminEditItemPage.tsx): `src/app/pages/admin/AdminEditItemPage.tsx`
- [Gallery management](https://github.com/yuriidri/fazzyu/blob/main/src/app/pages/admin/AdminGalleryPage.tsx): `src/app/pages/admin/AdminGalleryPage.tsx`

### Shared state

- [App data context](https://github.com/yuriidri/fazzyu/blob/main/src/app/context/AppDataContext.tsx): `src/app/context/AppDataContext.tsx`
- **Supabase**
- **Browser local storage**

### Application access

- [Router and shells](https://github.com/yuriidri/fazzyu/blob/main/src/app/App.tsx): `src/app/App.tsx`
- [Route protection](https://github.com/yuriidri/fazzyu/blob/main/src/app/components/AuthGuard.tsx): `src/app/components/AuthGuard.tsx`

### Other components

- **Customer**
- **Administrator**

## Connections

- Customer → Router and shells: opens pages
- Administrator → Router and shells: opens pages
- Router and shells → App data context: provides state
- Router and shells → Home and contact: routes to
- Router and shells → Product shop: routes to
- Router and shells → Product details: routes to
- Router and shells → Photo gallery: routes to
- Router and shells → Custom orders: routes to
- Router and shells → Photobooth: routes to
- Router and shells → Admin login: routes to
- Router and shells → Route protection: protects admin
- Route protection → Admin navigation: allows access
- Router and shells → Admin navigation: wraps admin
- Router and shells → Dashboard: routes to
- Router and shells → Order management: routes to
- Router and shells → Order forms: routes to
- Router and shells → Order editing: routes to
- Router and shells → Customer order list: routes to
- Router and shells → Inventory management: routes to
- Router and shells → Inventory forms: routes to
- Router and shells → Inventory editing: routes to
- Router and shells → Gallery management: routes to
- Product shop → App data context: reads orders
- Photo gallery → App data context: reads gallery
- Order management → App data context: manages orders
- Order forms → App data context: adds orders
- Order editing → App data context: edits orders
- Customer order list → App data context: reads orders
- Inventory management → App data context: reads inventory
- Inventory forms → App data context: adds items
- Inventory editing → App data context: edits items
- Gallery management → App data context: manages gallery
- App data context → Supabase: reads and writes orders
- App data context → Browser local storage: persists selected state
- Admin login → Browser local storage: stores token