# sanbisensei/live-bakery architecture

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

- Interactive diagram: https://gitdiagram.com/sanbisensei/live-bakery
- Repository: https://github.com/sanbisensei/live-bakery

## Overview

1. This is a Next.js App Router application for a cake/bakery storefront. The repository is organized around route segments under `src/app`, with a mix of public customer-facing pages and a separate admin area.

2. The public storefront is split into product/content sections: home (`src/app/page.tsx`), cakes catalog (`src/app/cakes`), cake detail pages (`src/app/cakes/[slug]`), blog listing and article pages (`src/app/blog`, `src/app/blog/[slug]`), reviews (`src/app/reviews`), custom cake ordering (`src/app/custom-cake`), checkout (`src/app/checkout`), and authentication entry points (`src/app/login`, `src/app/signup`).

3. The admin subsystem is isolated under `src/app/admin` and has dedicated pages for managing cakes, blog posts, orders, and promotions. This suggests a separate operational back office, likely sharing the same app shell but serving different workflows and permissions than the customer storefront.

4. Shared presentation is concentrated in `src/components`. `src/components/layout` contains the global page chrome: `Navbar`, `Hero`, and `Footer`. `src/components/ui/CakeCard.tsx` is a reusable product card used to render cake listings consistently across catalog-like screens.

5. The application layout and global styling are centralized in `src/app/layout.tsx` and `src/app/globals.css`. This is the main boundary for site-wide structure, typography, and theme, while `next.config.ts` and `postcss.config.mjs` indicate standard Next.js build-time configuration and CSS processing.

6. `src/lib/supabase.ts` is the only explicit infrastructure/data-layer module in the tree. It likely encapsulates the Supabase client and serves as the boundary between UI routes and backend services such as database access, auth, or file storage. No separate API route layer is visible, so data access is probably performed directly from route components or shared helpers.

7. The routing model suggests slug-based dynamic content for baked goods and blog posts. `cakes/[slug]` and `blog/[slug]` indicate CMS-like detail views where a list page feeds into per-item pages, which is a common structure for product catalogs and editorial content.

8. Authentication is present as first-class UX, but the implementation appears app-based rather than a separate auth service. `login` and `signup` pages likely connect to Supabase auth or another identity flow through shared client logic, with the admin section depending on those credentials for access control.

9. There is no evidence of a standalone backend server, worker process, or message queue in this repo. The architecture is primarily a front-end application with integrated service calls, meaning the important system boundaries are between UI routes, reusable components, and the Supabase-backed data/auth layer.

10. The repository is set up for Vercel-style deployment, which fits the Next.js default hosting model. The README confirms a standard Next.js workflow and uses `next/font` for optimized font loading, reinforcing that the app is intended to be built and deployed as a single Next.js project rather than a multi-service system.

11. For an architecture diagram, the main boxes should be: customer-facing pages, admin pages, shared layout/components, and the Supabase integration layer. The arrows should show route pages consuming shared UI components and reaching into `src/lib/supabase.ts` for data, auth, and possibly media-backed content.

Main entry points: [`src/lib/supabase.ts`](https://github.com/sanbisensei/live-bakery/blob/main/src/lib/supabase.ts) (Supabase), [`src/app/layout.tsx`](https://github.com/sanbisensei/live-bakery/blob/main/src/app/layout.tsx) (App shell), [`src/app/cakes/page.tsx`](https://github.com/sanbisensei/live-bakery/blob/main/src/app/cakes/page.tsx) (Cakes), [`src/components/layout`](https://github.com/sanbisensei/live-bakery/tree/main/src/components/layout) (Layout chrome)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public storefront"]
  node_home_page["Home<br/>landing page<br/>[page.tsx]"]
  node_cakes_index["Cakes<br/>catalog page<br/>[page.tsx]"]
  node_cake_detail["Cake detail<br/>dynamic product page<br/>[page.tsx]"]
  node_blog_index["Blog<br/>content index<br/>[page.tsx]"]
  node_blog_detail["Article<br/>[page.tsx]"]
  node_reviews_page["Reviews<br/>social proof page<br/>[page.tsx]"]
  node_custom_cake["Custom cake<br/>order form<br/>[page.tsx]"]
  node_checkout_page["Checkout<br/>purchase flow<br/>[page.tsx]"]
  node_login_page["Login<br/>auth entry<br/>[page.tsx]"]
  node_signup_page["Signup<br/>auth entry<br/>[page.tsx]"]
end

subgraph group_admin["Admin area"]
  node_admin_home["Admin home<br/>back office<br/>[page.tsx]"]
  node_admin_cakes["Manage cakes<br/>admin catalog<br/>[page.tsx]"]
  node_admin_blog["Manage blog<br/>admin content<br/>[page.tsx]"]
  node_admin_orders["Manage orders<br/>admin operations<br/>[page.tsx]"]
  node_admin_promos["Manage promos<br/>admin marketing<br/>[page.tsx]"]
end

subgraph group_shared["Shared UI"]
  node_layout_chrome["Layout chrome<br/>shared layout"]
  node_cake_card["Cake card<br/>ui card<br/>[CakeCard.tsx]"]
end

subgraph group_infra["Integration"]
  node_app_shell["App shell<br/>Next.js app router<br/>[layout.tsx]"]
  node_supabase_client[("Supabase<br/>data/auth client<br/>[supabase.ts]")]
  node_global_styles["Global styles<br/>site styling<br/>[globals.css]"]
  node_next_config["Build config<br/>[next.config.ts]"]
end

node_app_shell -->|"wraps"| node_layout_chrome
node_app_shell -->|"loads"| node_global_styles
node_home_page -->|"uses"| node_layout_chrome
node_cakes_index -->|"renders"| node_cake_card
node_cake_detail -->|"fetches"| node_supabase_client
node_cakes_index -->|"fetches"| node_supabase_client
node_blog_index -->|"fetches"| node_supabase_client
node_blog_detail -->|"fetches"| node_supabase_client
node_reviews_page -->|"fetches"| node_supabase_client
node_custom_cake -->|"submits"| node_supabase_client
node_checkout_page -->|"submits"| node_supabase_client
node_login_page -->|"auths"| node_supabase_client
node_signup_page -->|"auths"| node_supabase_client
node_admin_home -->|"governs"| node_supabase_client
node_admin_cakes -->|"manages"| node_supabase_client
node_admin_blog -->|"manages"| node_supabase_client
node_admin_orders -->|"manages"| node_supabase_client
node_admin_promos -->|"manages"| node_supabase_client
node_next_config -.->|"configures"| node_app_shell

click node_app_shell "https://github.com/sanbisensei/live-bakery/blob/main/src/app/layout.tsx"
click node_home_page "https://github.com/sanbisensei/live-bakery/blob/main/src/app/page.tsx"
click node_cakes_index "https://github.com/sanbisensei/live-bakery/blob/main/src/app/cakes/page.tsx"
click node_cake_detail "https://github.com/sanbisensei/live-bakery/blob/main/src/app/cakes/[slug]/page.tsx"
click node_blog_index "https://github.com/sanbisensei/live-bakery/blob/main/src/app/blog/page.tsx"
click node_blog_detail "https://github.com/sanbisensei/live-bakery/blob/main/src/app/blog/[slug]/page.tsx"
click node_reviews_page "https://github.com/sanbisensei/live-bakery/blob/main/src/app/reviews/page.tsx"
click node_custom_cake "https://github.com/sanbisensei/live-bakery/blob/main/src/app/custom-cake/page.tsx"
click node_checkout_page "https://github.com/sanbisensei/live-bakery/blob/main/src/app/checkout/page.tsx"
click node_login_page "https://github.com/sanbisensei/live-bakery/blob/main/src/app/login/page.tsx"
click node_signup_page "https://github.com/sanbisensei/live-bakery/blob/main/src/app/signup/page.tsx"
click node_admin_home "https://github.com/sanbisensei/live-bakery/blob/main/src/app/admin/page.tsx"
click node_admin_cakes "https://github.com/sanbisensei/live-bakery/blob/main/src/app/admin/cakes/page.tsx"
click node_admin_blog "https://github.com/sanbisensei/live-bakery/blob/main/src/app/admin/blog/page.tsx"
click node_admin_orders "https://github.com/sanbisensei/live-bakery/blob/main/src/app/admin/orders/page.tsx"
click node_admin_promos "https://github.com/sanbisensei/live-bakery/blob/main/src/app/admin/promos/page.tsx"
click node_layout_chrome "https://github.com/sanbisensei/live-bakery/tree/main/src/components/layout"
click node_cake_card "https://github.com/sanbisensei/live-bakery/blob/main/src/components/ui/CakeCard.tsx"
click node_supabase_client "https://github.com/sanbisensei/live-bakery/blob/main/src/lib/supabase.ts"
click node_global_styles "https://github.com/sanbisensei/live-bakery/blob/main/src/app/globals.css"
click node_next_config "https://github.com/sanbisensei/live-bakery/blob/main/next.config.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_page,node_cakes_index,node_cake_detail,node_blog_index,node_blog_detail,node_reviews_page,node_custom_cake,node_checkout_page,node_login_page,node_signup_page toneBlue
class node_admin_home,node_admin_cakes,node_admin_blog,node_admin_orders,node_admin_promos toneAmber
class node_layout_chrome,node_cake_card toneMint
class node_app_shell,node_supabase_client,node_global_styles,node_next_config toneRose
```

## Components

### Public storefront

Customer-facing routes for browsing cakes, content, ordering, and auth.

- [Home](https://github.com/sanbisensei/live-bakery/blob/main/src/app/page.tsx): landing page · Top-level storefront entry page. · `src/app/page.tsx`
- [Cakes](https://github.com/sanbisensei/live-bakery/blob/main/src/app/cakes/page.tsx): catalog page · Public cake listing and browse entry. · `src/app/cakes/page.tsx`
- [Cake detail](https://github.com/sanbisensei/live-bakery/blob/main/src/app/cakes/[slug]/page.tsx): dynamic product page · Slug-based individual cake view. · `src/app/cakes/[slug]/page.tsx`
- [Blog](https://github.com/sanbisensei/live-bakery/blob/main/src/app/blog/page.tsx): content index · Public article listing page. · `src/app/blog/page.tsx`
- [Article](https://github.com/sanbisensei/live-bakery/blob/main/src/app/blog/[slug]/page.tsx): dynamic article page · Slug-based blog article view. · `src/app/blog/[slug]/page.tsx`
- [Reviews](https://github.com/sanbisensei/live-bakery/blob/main/src/app/reviews/page.tsx): social proof page · Customer review and testimonial page. · `src/app/reviews/page.tsx`
- [Custom cake](https://github.com/sanbisensei/live-bakery/blob/main/src/app/custom-cake/page.tsx): order form · Custom order entry experience. · `src/app/custom-cake/page.tsx`
- [Checkout](https://github.com/sanbisensei/live-bakery/blob/main/src/app/checkout/page.tsx): purchase flow · Cart and payment completion route. · `src/app/checkout/page.tsx`
- [Login](https://github.com/sanbisensei/live-bakery/blob/main/src/app/login/page.tsx): auth entry · Customer authentication page. · `src/app/login/page.tsx`
- [Signup](https://github.com/sanbisensei/live-bakery/blob/main/src/app/signup/page.tsx): auth entry · Customer registration page. · `src/app/signup/page.tsx`

### Admin area

Back-office routes for managing catalog and content.

- [Admin home](https://github.com/sanbisensei/live-bakery/blob/main/src/app/admin/page.tsx): back office · Admin landing page and operational hub. · `src/app/admin/page.tsx`
- [Manage cakes](https://github.com/sanbisensei/live-bakery/blob/main/src/app/admin/cakes/page.tsx): admin catalog · Back-office cake management. · `src/app/admin/cakes/page.tsx`
- [Manage blog](https://github.com/sanbisensei/live-bakery/blob/main/src/app/admin/blog/page.tsx): admin content · Back-office blog post management. · `src/app/admin/blog/page.tsx`
- [Manage orders](https://github.com/sanbisensei/live-bakery/blob/main/src/app/admin/orders/page.tsx): admin operations · Order review and fulfillment workflow. · `src/app/admin/orders/page.tsx`
- [Manage promos](https://github.com/sanbisensei/live-bakery/blob/main/src/app/admin/promos/page.tsx): admin marketing · Promotion and discount management. · `src/app/admin/promos/page.tsx`

### Shared UI

Reusable layout and presentation components used across routes.

- [Layout chrome](https://github.com/sanbisensei/live-bakery/tree/main/src/components/layout): shared layout · Global navbar, hero, and footer composition. · `src/components/layout`
- [Cake card](https://github.com/sanbisensei/live-bakery/blob/main/src/components/ui/CakeCard.tsx): ui card · Reusable product display component. · `src/components/ui/CakeCard.tsx`

### Integration

App-wide styling, configuration, and external service access.

- [App shell](https://github.com/sanbisensei/live-bakery/blob/main/src/app/layout.tsx): Next.js app router · Global route shell and page composition boundary. · `src/app/layout.tsx`
- [Supabase](https://github.com/sanbisensei/live-bakery/blob/main/src/lib/supabase.ts): data/auth client · Shared client for database, auth, and storage access. · `src/lib/supabase.ts`
- [Global styles](https://github.com/sanbisensei/live-bakery/blob/main/src/app/globals.css): site styling · Application-wide CSS and theme baseline. · `src/app/globals.css`
- [Build config](https://github.com/sanbisensei/live-bakery/blob/main/next.config.ts): next build config · Framework and build-time configuration. · `next.config.ts`

## Connections

- App shell → Layout chrome: wraps · The app shell composes the shared page chrome.
- App shell → Global styles: loads · Global styling is applied across the application.
- Home → Layout chrome: uses · Landing page relies on shared chrome components.
- Cakes → Cake card: renders · Catalog listing uses the reusable product card.
- Cake detail → Supabase: fetches · Detail pages likely load content and product data from Supabase.
- Cakes → Supabase: fetches · Cake catalog reads from the shared data layer.
- Blog → Supabase: fetches · Blog listing reads editorial content from Supabase.
- Article → Supabase: fetches · Article pages load slug-based content from Supabase.
- Reviews → Supabase: fetches · Reviews page likely reads testimonials or ratings from the data layer.
- Custom cake → Supabase: submits · Custom order requests are expected to persist through Supabase.
- Checkout → Supabase: submits · Checkout depends on backend data and order state.
- Login → Supabase: auths · Login uses the shared auth client.
- Signup → Supabase: auths · Signup uses the shared auth client.
- Admin home → Supabase: governs · Admin access and data operations depend on the integration layer.
- Manage cakes → Supabase: manages · Back-office cake workflows operate on Supabase data.
- Manage blog → Supabase: manages · Back-office blog workflows operate on Supabase data.
- Manage orders → Supabase: manages · Orders are managed through the shared backend client.
- Manage promos → Supabase: manages · Promotions rely on the same backend integration.
- Build config → App shell: configures · Framework configuration shapes the app runtime and build.