# peanluthuynh/project_blockify architecture

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

- Interactive diagram: https://gitdiagram.com/peanluthuynh/project_blockify
- Repository: https://github.com/peanluthuynh/project_blockify

## Overview

Blockify is a toy-and-puzzle e-commerce platform. The main customer journey is browsing/searching products, managing a cart, checking out, and confirming payment; accounts, order tracking, wishlists, and administration are additional capabilities. The frontend uses MVC-style controllers and API services, while the backend exposes REST handlers over application services and Supabase-backed persistence. Product search and query behavior are evidenced in sampled source; some other subsystem links reflect the documented architecture and module layout, not inspected call sites.

Main entry points: [`Frontend/src/shared/components`](https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/shared/components) (Store UI), [`backend/src/modules`](https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules) (REST controllers), [`Frontend/src/core/services`](https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/core/services) (API services), [`Frontend/src/modules/admin`](https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/modules/admin) (Admin controllers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend experience"]
  node_web_ui["Store UI"]
  node_auth_ui["Auth controller"]
  node_catalog_ui["Catalog controllers"]
  node_search_ui["Search controller"]
  node_cart_ui["Cart controller<br/>[CartController.ts]"]
  node_checkout_ui["Checkout controller<br/>[OrderController.ts]"]
  node_account_ui["Account controller"]
  node_admin_ui["Admin controllers"]
  node_frontend_services["API services"]
  node_http_client["Fetch client<br/>[FetchHttpClient.ts]"]
end

subgraph group_commerce["Commerce API"]
  node_backend_api["REST controllers"]
  node_product_app["Product use cases"]
  node_cart_app["Cart service<br/>[CartService.ts]"]
  node_order_app["Checkout and payments"]
end

subgraph group_identity_admin["Identity and admin"]
  node_user_app["User services"]
  node_auth_app["Authentication"]
  node_admin_app["Admin services"]
end

subgraph group_platform["Platform infrastructure"]
  node_http_runtime["HTTP runtime"]
  node_repositories["Repositories"]
  node_supabase[("Supabase store<br/>[database.ts]")]
end

node_shopper(("Shopper"))
node_sepay["Sepay payments"]
node_storage[("Supabase Storage")]

node_shopper -->|"uses"| node_web_ui
node_web_ui -->|"opens auth"| node_auth_ui
node_web_ui -->|"browses"| node_catalog_ui
node_web_ui -->|"searches"| node_search_ui
node_web_ui -->|"manages cart"| node_cart_ui
node_web_ui -->|"checks out"| node_checkout_ui
node_web_ui -->|"manages account"| node_account_ui
node_web_ui -->|"administers"| node_admin_ui
node_search_ui -->|"queries products"| node_frontend_services
node_catalog_ui -->|"requests catalog"| node_frontend_services
node_cart_ui -->|"updates cart"| node_frontend_services
node_checkout_ui -->|"places order"| node_frontend_services
node_auth_ui -->|"authenticates"| node_frontend_services
node_account_ui -->|"loads account data"| node_frontend_services
node_admin_ui -->|"requests admin API"| node_http_client
node_frontend_services -->|"sends requests"| node_http_client
node_http_client -->|"HTTP JSON"| node_http_runtime
node_http_runtime -->|"dispatches routes"| node_backend_api
node_backend_api -->|"handles catalog"| node_product_app
node_backend_api -->|"handles cart"| node_cart_app
node_backend_api -->|"handles orders"| node_order_app
node_backend_api -->|"handles auth"| node_auth_app
node_backend_api -->|"handles profiles"| node_user_app
node_backend_api -->|"handles administration"| node_admin_app
node_product_app -->|"queries products"| node_supabase
node_product_app -->|"uses persistence"| node_repositories
node_cart_app -->|"uses persistence"| node_repositories
node_order_app -->|"uses persistence"| node_repositories
node_user_app -->|"uses persistence"| node_repositories
node_admin_app -->|"uses persistence"| node_repositories
node_repositories -->|"reads and writes"| node_supabase
node_order_app -.->|"payment integration"| node_sepay
node_admin_ui -.->|"uploads product images"| node_storage

click node_web_ui "https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/shared/components"
click node_auth_ui "https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/modules/auth"
click node_catalog_ui "https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/modules/products"
click node_search_ui "https://github.com/peanluthuynh/project_blockify/blob/main/Frontend/src/modules/search/SearchController.ts"
click node_cart_ui "https://github.com/peanluthuynh/project_blockify/blob/main/Frontend/src/modules/cart/CartController.ts"
click node_checkout_ui "https://github.com/peanluthuynh/project_blockify/blob/main/Frontend/src/modules/order/OrderController.ts"
click node_account_ui "https://github.com/peanluthuynh/project_blockify/blob/main/Frontend/src/modules/user/AccountController.ts"
click node_admin_ui "https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/modules/admin"
click node_frontend_services "https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/core/services"
click node_http_client "https://github.com/peanluthuynh/project_blockify/blob/main/Frontend/src/core/api/FetchHttpClient.ts"
click node_backend_api "https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules"
click node_product_app "https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules/products/application"
click node_cart_app "https://github.com/peanluthuynh/project_blockify/blob/main/backend/src/modules/cart/application/CartService.ts"
click node_order_app "https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules/order/application"
click node_user_app "https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules/user/application"
click node_auth_app "https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules/auth/application"
click node_admin_app "https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules/admin/application"
click node_http_runtime "https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/infrastructure/http"
click node_repositories "https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules"
click node_supabase "https://github.com/peanluthuynh/project_blockify/blob/main/backend/src/config/database.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_web_ui,node_auth_ui,node_catalog_ui,node_search_ui,node_cart_ui,node_checkout_ui,node_account_ui,node_admin_ui,node_frontend_services,node_http_client toneBlue
class node_backend_api,node_product_app,node_cart_app,node_order_app,node_storage toneAmber
class node_user_app,node_auth_app,node_admin_app toneMint
class node_http_runtime,node_repositories,node_supabase toneRose
class node_shopper,node_sepay toneIndigo
```

## Components

### Frontend experience

- [Store UI](https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/shared/components): `Frontend/src/shared/components`
- [Auth controller](https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/modules/auth): `Frontend/src/modules/auth`
- [Catalog controllers](https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/modules/products): `Frontend/src/modules/products`
- [Search controller](https://github.com/peanluthuynh/project_blockify/blob/main/Frontend/src/modules/search/SearchController.ts): `Frontend/src/modules/search/SearchController.ts`
- [Cart controller](https://github.com/peanluthuynh/project_blockify/blob/main/Frontend/src/modules/cart/CartController.ts): `Frontend/src/modules/cart/CartController.ts`
- [Checkout controller](https://github.com/peanluthuynh/project_blockify/blob/main/Frontend/src/modules/order/OrderController.ts): `Frontend/src/modules/order/OrderController.ts`
- [Account controller](https://github.com/peanluthuynh/project_blockify/blob/main/Frontend/src/modules/user/AccountController.ts): `Frontend/src/modules/user/AccountController.ts`
- [Admin controllers](https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/modules/admin): `Frontend/src/modules/admin`
- [API services](https://github.com/peanluthuynh/project_blockify/tree/main/Frontend/src/core/services): `Frontend/src/core/services`
- [Fetch client](https://github.com/peanluthuynh/project_blockify/blob/main/Frontend/src/core/api/FetchHttpClient.ts): `Frontend/src/core/api/FetchHttpClient.ts`

### Commerce API

- [REST controllers](https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules): `backend/src/modules`
- [Product use cases](https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules/products/application): `backend/src/modules/products/application`
- [Cart service](https://github.com/peanluthuynh/project_blockify/blob/main/backend/src/modules/cart/application/CartService.ts): `backend/src/modules/cart/application/CartService.ts`
- [Checkout and payments](https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules/order/application): `backend/src/modules/order/application`

### Identity and admin

- [User services](https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules/user/application): `backend/src/modules/user/application`
- [Authentication](https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules/auth/application): `backend/src/modules/auth/application`
- [Admin services](https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules/admin/application): `backend/src/modules/admin/application`

### Platform infrastructure

- [HTTP runtime](https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/infrastructure/http): `backend/src/infrastructure/http`
- [Repositories](https://github.com/peanluthuynh/project_blockify/tree/main/backend/src/modules): `backend/src/modules`
- [Supabase store](https://github.com/peanluthuynh/project_blockify/blob/main/backend/src/config/database.ts): `backend/src/config/database.ts`

### Other components

- **Shopper**
- **Sepay payments**
- **Supabase Storage**

## Connections

- Shopper → Store UI: uses
- Store UI → Auth controller: opens auth
- Store UI → Catalog controllers: browses
- Store UI → Search controller: searches
- Store UI → Cart controller: manages cart
- Store UI → Checkout controller: checks out
- Store UI → Account controller: manages account
- Store UI → Admin controllers: administers
- Search controller → API services: queries products
- Catalog controllers → API services: requests catalog
- Cart controller → API services: updates cart
- Checkout controller → API services: places order
- Auth controller → API services: authenticates
- Account controller → API services: loads account data
- Admin controllers → Fetch client: requests admin API
- API services → Fetch client: sends requests
- Fetch client → HTTP runtime: HTTP JSON
- HTTP runtime → REST controllers: dispatches routes
- REST controllers → Product use cases: handles catalog
- REST controllers → Cart service: handles cart
- REST controllers → Checkout and payments: handles orders
- REST controllers → Authentication: handles auth
- REST controllers → User services: handles profiles
- REST controllers → Admin services: handles administration
- Product use cases → Supabase store: queries products
- Product use cases → Repositories: uses persistence
- Cart service → Repositories: uses persistence
- Checkout and payments → Repositories: uses persistence
- User services → Repositories: uses persistence
- Admin services → Repositories: uses persistence
- Repositories → Supabase store: reads and writes
- Checkout and payments → Sepay payments: payment integration
- Admin controllers → Supabase Storage: uploads product images