# heisenberg300604/project-grogu-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/heisenberg300604/project-grogu-frontend
- Repository: https://github.com/heisenberg300604/project-grogu-frontend

## Overview

Grogu is a browser-facing playtesting platform for indie developers and testers. Its central workflow runs from public playtest discovery and tester applications, through developer decisions and tester progress, to structured feedback and developer analytics. The frontend separates role-specific screens and interaction components from API services and a client cache; marketing pages also load public bootstrap data. The workflow and capabilities are documented in the README, while sampled service and component excerpts confirm key API/cache interactions. Some unsampled feature wiring is therefore shown only at the subsystem level.

Main entry points: [`lib/services`](https://github.com/heisenberg300604/project-grogu-frontend/tree/main/lib/services) (API services), [`components/playtests/discover-explorer.tsx`](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/playtests/discover-explorer.tsx) (Discover playtests), [`app/(tester)`](https://github.com/heisenberg300604/project-grogu-frontend/tree/main/app/(tester)) (Tester pages), [`lib/store/grogu-store.ts`](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/lib/store/grogu-store.ts) (Client cache)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_audience["Public experience"]
  node_marketing["Marketing pages"]
  node_discovery["Discover playtests"]
  node_public_detail["Public detail"]
end

subgraph group_tester["Tester workflow"]
  node_tester_pages["Tester pages"]
  node_tester_dashboard["Tester dashboard"]
  node_applications_ui["Applications"]
  node_workspace["Test workspace<br/>[page.tsx]"]
  node_feedback_ui["Structured feedback<br/>[feedback-form.tsx]"]
end

subgraph group_developer["Developer workflow"]
  node_developer_pages["Developer pages"]
  node_developer_dashboard["Developer dashboard"]
  node_games_ui["Game management<br/>[games-view.tsx]"]
  node_playtest_form["Playtest setup<br/>[playtest-form.tsx]"]
  node_playtest_management["Playtest management"]
  node_analytics_ui["Analytics<br/>[analytics-view.tsx]"]
end

subgraph group_runtime["Client runtime"]
  node_server_data["Public data access<br/>[index.ts]"]
  node_auth_pages["Login and signup"]
  node_auth_service["Authentication<br/>[auth.ts]"]
  node_services["API services"]
  node_bootstrap["Bootstrap service<br/>[bootstrap.ts]"]
  node_cache["Client cache<br/>[grogu-store.ts]"]
  node_http["HTTP client<br/>[http.ts]"]
end

node_visitor(("Visitor"))
node_tester_actor(("Tester"))
node_developer_actor(("Developer"))
node_backend["Grogu API"]

node_visitor -->|"browses"| node_marketing
node_visitor -->|"discovers"| node_discovery
node_discovery -->|"opens detail"| node_public_detail
node_marketing -->|"loads public data"| node_server_data
node_server_data -->|"requests snapshot"| node_bootstrap
node_bootstrap -->|"fetches"| node_http
node_http -->|"calls API"| node_backend
node_tester_actor -->|"signs in"| node_auth_pages
node_developer_actor -->|"signs in"| node_auth_pages
node_auth_pages -->|"submits credentials"| node_auth_service
node_auth_service -->|"calls API"| node_http
node_auth_service -->|"updates session"| node_cache
node_tester_actor -->|"uses"| node_tester_pages
node_tester_pages -->|"shows"| node_tester_dashboard
node_tester_actor -->|"applies"| node_discovery
node_discovery -->|"submits application"| node_services
node_applications_ui -->|"withdraws application"| node_services
node_tester_pages -->|"opens tests"| node_workspace
node_feedback_ui -->|"submits feedback"| node_services
node_developer_actor -->|"uses"| node_developer_pages
node_developer_pages -->|"shows"| node_developer_dashboard
node_games_ui -->|"manages games"| node_services
node_playtest_form -->|"creates playtest"| node_services
node_playtest_management -->|"decides applications"| node_services
node_playtest_management -->|"manages playtest"| node_services
node_analytics_ui -->|"loads analytics"| node_services
node_services -->|"calls API"| node_http
node_services -->|"updates cache"| node_cache
node_cache -->|"serves client state"| node_tester_pages
node_cache -->|"serves client state"| node_developer_pages

click node_marketing "https://github.com/heisenberg300604/project-grogu-frontend/tree/main/app/(marketing)"
click node_discovery "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/playtests/discover-explorer.tsx"
click node_public_detail "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/playtests/playtest-detail.tsx"
click node_server_data "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/data/index.ts"
click node_auth_pages "https://github.com/heisenberg300604/project-grogu-frontend/tree/main/app/(auth)"
click node_auth_service "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/lib/services/auth.ts"
click node_tester_pages "https://github.com/heisenberg300604/project-grogu-frontend/tree/main/app/(tester)"
click node_tester_dashboard "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/tester/tester-dashboard.tsx"
click node_applications_ui "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/applications/applications-view.tsx"
click node_workspace "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/app/(tester)/dashboard/page.tsx"
click node_feedback_ui "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/feedback/feedback-form.tsx"
click node_developer_pages "https://github.com/heisenberg300604/project-grogu-frontend/tree/main/app/(developer)"
click node_developer_dashboard "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/developer/developer-dashboard.tsx"
click node_games_ui "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/developer/games-view.tsx"
click node_playtest_form "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/playtests/playtest-form.tsx"
click node_playtest_management "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/developer/manage-playtest.tsx"
click node_analytics_ui "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/developer/analytics-view.tsx"
click node_services "https://github.com/heisenberg300604/project-grogu-frontend/tree/main/lib/services"
click node_bootstrap "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/lib/services/bootstrap.ts"
click node_cache "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/lib/store/grogu-store.ts"
click node_http "https://github.com/heisenberg300604/project-grogu-frontend/blob/main/lib/services/http.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_marketing,node_discovery,node_public_detail toneBlue
class node_tester_pages,node_tester_dashboard,node_applications_ui,node_workspace,node_feedback_ui toneAmber
class node_developer_pages,node_developer_dashboard,node_games_ui,node_playtest_form,node_playtest_management,node_analytics_ui,node_backend toneMint
class node_server_data,node_auth_pages,node_auth_service,node_services,node_bootstrap,node_cache,node_http toneRose
class node_visitor,node_tester_actor,node_developer_actor toneIndigo
```

## Components

### Public experience

- [Marketing pages](https://github.com/heisenberg300604/project-grogu-frontend/tree/main/app/(marketing)): `app/(marketing)`
- [Discover playtests](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/playtests/discover-explorer.tsx): `components/playtests/discover-explorer.tsx`
- [Public detail](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/playtests/playtest-detail.tsx): `components/playtests/playtest-detail.tsx`

### Tester workflow

- [Tester pages](https://github.com/heisenberg300604/project-grogu-frontend/tree/main/app/(tester)): `app/(tester)`
- [Tester dashboard](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/tester/tester-dashboard.tsx): `components/tester/tester-dashboard.tsx`
- [Applications](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/applications/applications-view.tsx): `components/applications/applications-view.tsx`
- [Test workspace](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/app/(tester)/dashboard/page.tsx): `app/(tester)/dashboard/page.tsx`
- [Structured feedback](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/feedback/feedback-form.tsx): `components/feedback/feedback-form.tsx`

### Developer workflow

- [Developer pages](https://github.com/heisenberg300604/project-grogu-frontend/tree/main/app/(developer)): `app/(developer)`
- [Developer dashboard](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/developer/developer-dashboard.tsx): `components/developer/developer-dashboard.tsx`
- [Game management](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/developer/games-view.tsx): `components/developer/games-view.tsx`
- [Playtest setup](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/playtests/playtest-form.tsx): `components/playtests/playtest-form.tsx`
- [Playtest management](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/developer/manage-playtest.tsx): `components/developer/manage-playtest.tsx`
- [Analytics](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/components/developer/analytics-view.tsx): `components/developer/analytics-view.tsx`

### Client runtime

- [Public data access](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/data/index.ts): `data/index.ts`
- [Login and signup](https://github.com/heisenberg300604/project-grogu-frontend/tree/main/app/(auth)): `app/(auth)`
- [Authentication](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/lib/services/auth.ts): `lib/services/auth.ts`
- [API services](https://github.com/heisenberg300604/project-grogu-frontend/tree/main/lib/services): `lib/services`
- [Bootstrap service](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/lib/services/bootstrap.ts): `lib/services/bootstrap.ts`
- [Client cache](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/lib/store/grogu-store.ts): `lib/store/grogu-store.ts`
- [HTTP client](https://github.com/heisenberg300604/project-grogu-frontend/blob/main/lib/services/http.ts): `lib/services/http.ts`

### Other components

- **Visitor**
- **Tester**
- **Developer**
- **Grogu API**

## Connections

- Visitor → Marketing pages: browses
- Visitor → Discover playtests: discovers
- Discover playtests → Public detail: opens detail
- Marketing pages → Public data access: loads public data
- Public data access → Bootstrap service: requests snapshot
- Bootstrap service → HTTP client: fetches
- HTTP client → Grogu API: calls API
- Tester → Login and signup: signs in
- Developer → Login and signup: signs in
- Login and signup → Authentication: submits credentials
- Authentication → HTTP client: calls API
- Authentication → Client cache: updates session
- Tester → Tester pages: uses
- Tester pages → Tester dashboard: shows
- Tester → Discover playtests: applies
- Discover playtests → API services: submits application
- Applications → API services: withdraws application
- Tester pages → Test workspace: opens tests
- Structured feedback → API services: submits feedback
- Developer → Developer pages: uses
- Developer pages → Developer dashboard: shows
- Game management → API services: manages games
- Playtest setup → API services: creates playtest
- Playtest management → API services: decides applications
- Playtest management → API services: manages playtest
- Analytics → API services: loads analytics
- API services → HTTP client: calls API
- API services → Client cache: updates cache
- Client cache → Tester pages: serves client state
- Client cache → Developer pages: serves client state