# jayashreeagrwal/steller architecture

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

- Interactive diagram: https://gitdiagram.com/jayashreeagrwal/steller
- Repository: https://github.com/jayashreeagrwal/steller

## Overview

Celestral! is a browser-based constellation path-guessing game. Visitors arrive at the landing page, where the Heroes game component requests a game from an external service, accepts star guesses, displays the constellation graph and tracks game state. The landing page also exposes help, leaderboard and additional-play UI; sampled leaderboard code shows placeholders rather than live scores. The tree includes a practice route, but its behavior is not evident from the available source. Relationships are limited to sampled calls and explicit references; several UI modules are grouped as shared primitives.

Main entry points: [`app/(landing)/_components/heading.tsx`](https://github.com/jayashreeagrwal/steller/blob/main/app/(landing)/_components/heading.tsx) (Navigation heading), [`app/(landing)/page.tsx`](https://github.com/jayashreeagrwal/steller/blob/main/app/(landing)/page.tsx) (Landing page), [`app/(landing)/_components/heroes.tsx`](https://github.com/jayashreeagrwal/steller/blob/main/app/(landing)/_components/heroes.tsx) (Constellation game), [`app/layout.tsx`](https://github.com/jayashreeagrwal/steller/blob/main/app/layout.tsx) (Application layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Game experience"]
  node_landing["Landing page<br/>[page.tsx]"]
  node_game["Constellation game<br/>[heroes.tsx]"]
  node_game_service{{"Game service"}}
  node_practice["Practice route<br/>[page.tsx]"]
end

subgraph group_support["Player support"]
  node_heading["Navigation heading<br/>[heading.tsx]"]
  node_footer["Landing footer<br/>[footer.tsx]"]
  node_help["How-to-play help<br/>[how-to-play.tsx]"]
  node_leaderboard["Leaderboard panel<br/>[leaderboard.tsx]"]
  node_play_more["Play-more panel<br/>[play-more.tsx]"]
end

subgraph group_presentation["Presentation layer"]
  node_scroll_hook["Scroll state hook<br/>[useScrollTop.tsx]"]
  node_custom_dot["Graph endpoint markers<br/>[custom-dot.tsx]"]
  node_chart["Chart rendering<br/>[chart.tsx]"]
  node_ui_primitives["UI primitives"]
  node_class_utils["Class utilities<br/>[utils.ts]"]
  node_app_layout["Application layout<br/>[layout.tsx]"]
  node_theme["Theme provider<br/>[theme-provider.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_landing
node_landing -->|"renders"| node_heading
node_landing -->|"renders"| node_game
node_landing -->|"renders"| node_footer
node_game -->|"requests game"| node_game_service
node_game -->|"renders markers"| node_custom_dot
node_game -->|"uses chart"| node_chart
node_heading -->|"renders"| node_help
node_heading -->|"renders"| node_leaderboard
node_heading -->|"renders"| node_play_more
node_heading -->|"reads scroll state"| node_scroll_hook
node_help -->|"uses dialog controls"| node_ui_primitives
node_leaderboard -->|"uses dialog controls"| node_ui_primitives
node_chart -->|"merges classes"| node_class_utils
node_app_layout -->|"wraps app"| node_theme
node_app_layout -.->|"serves application"| node_visitor

click node_landing "https://github.com/jayashreeagrwal/steller/blob/main/app/(landing)/page.tsx"
click node_game "https://github.com/jayashreeagrwal/steller/blob/main/app/(landing)/_components/heroes.tsx"
click node_practice "https://github.com/jayashreeagrwal/steller/blob/main/app/(practice)/practice/page.tsx"
click node_heading "https://github.com/jayashreeagrwal/steller/blob/main/app/(landing)/_components/heading.tsx"
click node_footer "https://github.com/jayashreeagrwal/steller/blob/main/app/(landing)/_components/footer.tsx"
click node_help "https://github.com/jayashreeagrwal/steller/blob/main/components/how-to-play.tsx"
click node_leaderboard "https://github.com/jayashreeagrwal/steller/blob/main/components/leaderboard.tsx"
click node_play_more "https://github.com/jayashreeagrwal/steller/blob/main/components/play-more.tsx"
click node_scroll_hook "https://github.com/jayashreeagrwal/steller/blob/main/hooks/useScrollTop.tsx"
click node_custom_dot "https://github.com/jayashreeagrwal/steller/blob/main/components/custom-dot.tsx"
click node_chart "https://github.com/jayashreeagrwal/steller/blob/main/components/ui/chart.tsx"
click node_ui_primitives "https://github.com/jayashreeagrwal/steller/tree/main/components/ui"
click node_class_utils "https://github.com/jayashreeagrwal/steller/blob/main/lib/utils.ts"
click node_app_layout "https://github.com/jayashreeagrwal/steller/blob/main/app/layout.tsx"
click node_theme "https://github.com/jayashreeagrwal/steller/blob/main/components/theme-provider.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_landing,node_game,node_game_service,node_practice toneBlue
class node_heading,node_footer,node_help,node_leaderboard,node_play_more toneAmber
class node_scroll_hook,node_custom_dot,node_chart,node_ui_primitives,node_class_utils,node_app_layout,node_theme toneMint
class node_visitor toneIndigo
```

## Components

### Game experience

- [Landing page](https://github.com/jayashreeagrwal/steller/blob/main/app/(landing)/page.tsx): `app/(landing)/page.tsx`
- [Constellation game](https://github.com/jayashreeagrwal/steller/blob/main/app/(landing)/_components/heroes.tsx): `app/(landing)/_components/heroes.tsx`
- **Game service**
- [Practice route](https://github.com/jayashreeagrwal/steller/blob/main/app/(practice)/practice/page.tsx): `app/(practice)/practice/page.tsx`

### Player support

- [Navigation heading](https://github.com/jayashreeagrwal/steller/blob/main/app/(landing)/_components/heading.tsx): `app/(landing)/_components/heading.tsx`
- [Landing footer](https://github.com/jayashreeagrwal/steller/blob/main/app/(landing)/_components/footer.tsx): `app/(landing)/_components/footer.tsx`
- [How-to-play help](https://github.com/jayashreeagrwal/steller/blob/main/components/how-to-play.tsx): `components/how-to-play.tsx`
- [Leaderboard panel](https://github.com/jayashreeagrwal/steller/blob/main/components/leaderboard.tsx): `components/leaderboard.tsx`
- [Play-more panel](https://github.com/jayashreeagrwal/steller/blob/main/components/play-more.tsx): `components/play-more.tsx`

### Presentation layer

- [Scroll state hook](https://github.com/jayashreeagrwal/steller/blob/main/hooks/useScrollTop.tsx): `hooks/useScrollTop.tsx`
- [Graph endpoint markers](https://github.com/jayashreeagrwal/steller/blob/main/components/custom-dot.tsx): `components/custom-dot.tsx`
- [Chart rendering](https://github.com/jayashreeagrwal/steller/blob/main/components/ui/chart.tsx): `components/ui/chart.tsx`
- [UI primitives](https://github.com/jayashreeagrwal/steller/tree/main/components/ui): `components/ui`
- [Class utilities](https://github.com/jayashreeagrwal/steller/blob/main/lib/utils.ts): `lib/utils.ts`
- [Application layout](https://github.com/jayashreeagrwal/steller/blob/main/app/layout.tsx): `app/layout.tsx`
- [Theme provider](https://github.com/jayashreeagrwal/steller/blob/main/components/theme-provider.tsx): `components/theme-provider.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → Landing page: opens (evidence: `app/(landing)/page.tsx`)
- Landing page → Navigation heading: renders (evidence: `app/(landing)/page.tsx`)
- Landing page → Constellation game: renders (evidence: `app/(landing)/page.tsx`)
- Landing page → Landing footer: renders (evidence: `app/(landing)/page.tsx`)
- Constellation game → Game service: requests game (evidence: `app/(landing)/_components/heroes.tsx`)
- Constellation game → Graph endpoint markers: renders markers (evidence: `app/(landing)/_components/heroes.tsx`)
- Constellation game → Chart rendering: uses chart (evidence: `app/(landing)/_components/heroes.tsx`)
- Navigation heading → How-to-play help: renders (evidence: `app/(landing)/_components/heading.tsx`)
- Navigation heading → Leaderboard panel: renders (evidence: `app/(landing)/_components/heading.tsx`)
- Navigation heading → Play-more panel: renders (evidence: `app/(landing)/_components/heading.tsx`)
- Navigation heading → Scroll state hook: reads scroll state (evidence: `app/(landing)/_components/heading.tsx`)
- How-to-play help → UI primitives: uses dialog controls (evidence: `components/how-to-play.tsx`)
- Leaderboard panel → UI primitives: uses dialog controls (evidence: `components/leaderboard.tsx`)
- Chart rendering → Class utilities: merges classes (evidence: `components/ui/chart.tsx`)
- Application layout → Theme provider: wraps app (evidence: `app/layout.tsx`)
- Application layout → Visitor: serves application