# lyzboy/lyz-game-space architecture

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

- Interactive diagram: https://gitdiagram.com/lyzboy/lyz-game-space
- Repository: https://github.com/lyzboy/lyz-game-space

## Overview

Lyz Game Space is a personal portfolio and developer diary. Visitors browse project showcases and a diary feed, then can explore focuses and their chronological entries, including marked “aha” moments. An admin can manage focuses, technologies, and entries through authenticated forms and server actions backed by Prisma. The README also describes responsive presentation and a future learning guide; the guide is planned, not represented as a current runtime subsystem. Connections below rely on excerpts, SOURCE INDEX references, or README statements; unsampled capabilities are shown only at the level supported by the tree or README.

Main entry points: [`app/lib/prisma.ts`](https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/prisma.ts) (Prisma client), [`app/lib/actions.ts`](https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/actions.ts) (Server actions), [`app/focuses/[id]/page.tsx`](https://github.com/lyzboy/lyz-game-space/blob/main/app/focuses/%5Bid%5D/page.tsx) (Focus detail), [`app/focuses/page.tsx`](https://github.com/lyzboy/lyz-game-space/blob/main/app/focuses/page.tsx) (Focus listing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Visitor experience"]
  node_home["Home page<br/>[page.tsx]"]
  node_portfolio["Project showcase<br/>[Sites.tsx]"]
  node_layout["Shared layout<br/>[layout.tsx]"]
  node_navigation["Navigation<br/>[NavBar.tsx]"]
end

subgraph group_diary["Diary browsing"]
  node_diaryfeed["Diary feed<br/>[TILFeed.tsx]"]
  node_focuslist["Focus listing<br/>[page.tsx]"]
  node_focuscards["Focus cards<br/>[FocusMainCard.tsx]"]
  node_focusdetail["Focus detail<br/>[page.tsx]"]
  node_entryviews["Entry views<br/>[Focus_Entry.tsx]"]
  node_ahaentry["Aha entries<br/>[Focus_Aha.tsx]"]
end

subgraph group_management["Content management"]
  node_admin["Admin page<br/>[page.tsx]"]
  node_entryform["Entry creation form"]
  node_focusform["Focus editor"]
  node_managementforms["Focus and technology forms<br/>[FocusForm.tsx]"]
  node_actions["Server actions<br/>[actions.ts]"]
end

subgraph group_data["Data and identity"]
  node_focusqueries["Focus queries<br/>[focuses.ts]"]
  node_entryqueries["Entry queries<br/>[entries.ts]"]
  node_technologyqueries["Technology queries<br/>[technologies.ts]"]
  node_prisma["Prisma client<br/>[prisma.ts]"]
  node_database[("PostgreSQL")]
  node_auth["Authentication config<br/>[auth.ts]"]
  node_authroute["Auth route handler<br/>[route.ts]"]
end

node_visitor(("Visitor"))
node_oauth["Google and GitHub"]
node_adminactor(("Administrator"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_portfolio
node_home -->|"renders"| node_diaryfeed
node_layout -->|"renders"| node_navigation
node_visitor -->|"browses"| node_focuslist
node_focuslist -->|"fetches focuses"| node_focusqueries
node_focuslist -->|"fetches entries"| node_entryqueries
node_focuslist -->|"renders"| node_focuscards
node_focusdetail -->|"loads focus"| node_focusqueries
node_focusdetail -->|"loads technologies"| node_technologyqueries
node_focusdetail -->|"renders entries"| node_entryviews
node_focusdetail -->|"renders aha entries"| node_ahaentry
node_adminactor -->|"manages content"| node_admin
node_admin -->|"renders"| node_entryform
node_admin -->|"renders"| node_managementforms
node_entryform -->|"submits to"| node_actions
node_focusform -->|"updates through"| node_actions
node_managementforms -->|"uses actions"| node_actions
node_actions -->|"checks admin role"| node_auth
node_actions -->|"writes records"| node_prisma
node_focusqueries -->|"queries"| node_prisma
node_entryqueries -->|"queries"| node_prisma
node_technologyqueries -->|"queries"| node_prisma
node_diaryfeed -->|"reads data"| node_prisma
node_prisma -.->|"uses adapter"| node_database
node_authroute -->|"exports handlers"| node_auth
node_auth -->|"configures adapter"| node_prisma
node_auth -->|"offers sign-in"| node_oauth

click node_home "https://github.com/lyzboy/lyz-game-space/blob/main/app/page.tsx"
click node_portfolio "https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/Sites.tsx"
click node_layout "https://github.com/lyzboy/lyz-game-space/blob/main/app/layout.tsx"
click node_navigation "https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/NavBar.tsx"
click node_diaryfeed "https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/TIL/TILFeed.tsx"
click node_focuslist "https://github.com/lyzboy/lyz-game-space/blob/main/app/focuses/page.tsx"
click node_focuscards "https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/FocusMainCard.tsx"
click node_focusdetail "https://github.com/lyzboy/lyz-game-space/blob/main/app/focuses/%5Bid%5D/page.tsx"
click node_entryviews "https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/FocusView/Focus_Entry.tsx"
click node_ahaentry "https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/FocusView/Focus_Aha.tsx"
click node_admin "https://github.com/lyzboy/lyz-game-space/blob/main/app/admin/page.tsx"
click node_entryform "https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/EntryFormClient.tsx"
click node_focusform "https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/FocusView/Focus_EditorForm.tsx"
click node_managementforms "https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/FocusForm.tsx"
click node_actions "https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/actions.ts"
click node_focusqueries "https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/focuses.ts"
click node_entryqueries "https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/entries.ts"
click node_technologyqueries "https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/technologies.ts"
click node_prisma "https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/prisma.ts"
click node_auth "https://github.com/lyzboy/lyz-game-space/blob/main/auth.ts"
click node_authroute "https://github.com/lyzboy/lyz-game-space/blob/main/app/api/auth/%5B...nextauth%5D/route.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_portfolio,node_layout,node_navigation toneBlue
class node_diaryfeed,node_focuslist,node_focuscards,node_focusdetail,node_entryviews,node_ahaentry toneAmber
class node_admin,node_entryform,node_focusform,node_managementforms,node_actions toneMint
class node_focusqueries,node_entryqueries,node_technologyqueries,node_prisma,node_database,node_auth,node_authroute toneRose
class node_visitor,node_oauth,node_adminactor toneIndigo
```

## Components

### Visitor experience

- [Home page](https://github.com/lyzboy/lyz-game-space/blob/main/app/page.tsx): `app/page.tsx`
- [Project showcase](https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/Sites.tsx): `app/ui/components/Sites.tsx`
- [Shared layout](https://github.com/lyzboy/lyz-game-space/blob/main/app/layout.tsx): `app/layout.tsx`
- [Navigation](https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/NavBar.tsx): `app/ui/components/NavBar.tsx`

### Diary browsing

- [Diary feed](https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/TIL/TILFeed.tsx): `app/ui/components/TIL/TILFeed.tsx`
- [Focus listing](https://github.com/lyzboy/lyz-game-space/blob/main/app/focuses/page.tsx): `app/focuses/page.tsx`
- [Focus cards](https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/FocusMainCard.tsx): `app/ui/components/FocusMainCard.tsx`
- [Focus detail](https://github.com/lyzboy/lyz-game-space/blob/main/app/focuses/%5Bid%5D/page.tsx): `app/focuses/[id]/page.tsx`
- [Entry views](https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/FocusView/Focus_Entry.tsx): `app/ui/components/FocusView/Focus_Entry.tsx`
- [Aha entries](https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/FocusView/Focus_Aha.tsx): `app/ui/components/FocusView/Focus_Aha.tsx`

### Content management

- [Admin page](https://github.com/lyzboy/lyz-game-space/blob/main/app/admin/page.tsx): `app/admin/page.tsx`
- [Entry creation form](https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/EntryFormClient.tsx): `app/ui/components/EntryFormClient.tsx`
- [Focus editor](https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/FocusView/Focus_EditorForm.tsx): `app/ui/components/FocusView/Focus_EditorForm.tsx`
- [Focus and technology forms](https://github.com/lyzboy/lyz-game-space/blob/main/app/ui/components/FocusForm.tsx): `app/ui/components/FocusForm.tsx`
- [Server actions](https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/actions.ts): `app/lib/actions.ts`

### Data and identity

- [Focus queries](https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/focuses.ts): `app/lib/focuses.ts`
- [Entry queries](https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/entries.ts): `app/lib/entries.ts`
- [Technology queries](https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/technologies.ts): `app/lib/technologies.ts`
- [Prisma client](https://github.com/lyzboy/lyz-game-space/blob/main/app/lib/prisma.ts): `app/lib/prisma.ts`
- **PostgreSQL**
- [Authentication config](https://github.com/lyzboy/lyz-game-space/blob/main/auth.ts): `auth.ts`
- [Auth route handler](https://github.com/lyzboy/lyz-game-space/blob/main/app/api/auth/%5B...nextauth%5D/route.ts): `app/api/auth/[...nextauth]/route.ts`

### Other components

- **Visitor**
- **Google and GitHub**
- **Administrator**

## Connections

- Visitor → Home page: opens (evidence: `README.md`)
- Home page → Project showcase: renders (evidence: `app/page.tsx`)
- Home page → Diary feed: renders (evidence: `app/page.tsx`)
- Shared layout → Navigation: renders (evidence: `app/layout.tsx`)
- Visitor → Focus listing: browses (evidence: `README.md`)
- Focus listing → Focus queries: fetches focuses (evidence: `app/focuses/page.tsx`)
- Focus listing → Entry queries: fetches entries (evidence: `app/focuses/page.tsx`)
- Focus listing → Focus cards: renders (evidence: `app/focuses/page.tsx`)
- Focus detail → Focus queries: loads focus (evidence: `app/focuses/[id]/page.tsx`)
- Focus detail → Technology queries: loads technologies (evidence: `app/focuses/[id]/page.tsx`)
- Focus detail → Entry views: renders entries (evidence: `app/focuses/[id]/page.tsx`)
- Focus detail → Aha entries: renders aha entries (evidence: `app/focuses/[id]/page.tsx`)
- Administrator → Admin page: manages content (evidence: `app/admin/page.tsx`)
- Admin page → Entry creation form: renders (evidence: `app/admin/page.tsx`)
- Admin page → Focus and technology forms: renders (evidence: `app/admin/page.tsx`)
- Entry creation form → Server actions: submits to (evidence: `app/ui/components/EntryFormClient.tsx`)
- Focus editor → Server actions: updates through (evidence: `app/ui/components/FocusView/Focus_EditorForm.tsx`)
- Focus and technology forms → Server actions: uses actions (evidence: `app/ui/components/FocusForm.tsx`)
- Server actions → Authentication config: checks admin role (evidence: `app/lib/actions.ts`)
- Server actions → Prisma client: writes records (evidence: `app/lib/actions.ts`)
- Focus queries → Prisma client: queries (evidence: `app/lib/focuses.ts`)
- Entry queries → Prisma client: queries (evidence: `app/lib/entries.ts`)
- Technology queries → Prisma client: queries (evidence: `app/lib/technologies.ts`)
- Diary feed → Prisma client: reads data (evidence: `app/ui/components/TIL/TILFeed.tsx`)
- Prisma client → PostgreSQL: uses adapter
- Auth route handler → Authentication config: exports handlers (evidence: `app/api/auth/[...nextauth]/route.ts`)
- Authentication config → Prisma client: configures adapter (evidence: `auth.ts`)
- Authentication config → Google and GitHub: offers sign-in (evidence: `auth.ts`)