# michael0803-coder/-aquasnap architecture

> Architecture diagram of the GitHub repository michael0803-coder/-aquasnap, 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/michael0803-coder/-aquasnap
- Repository: https://github.com/michael0803-coder/-aquasnap

## Overview

AQUASNAP is a client-side marine learning platform: users authenticate, enter a screen-based dashboard, choose learning games, and earn progress tracked in user state. Separate screens provide aquarium management, profiles and certificates, and conservation education. The source index confirms the app’s screen imports and game modules’ store/data references; README feature descriptions fill in several unsampled product capabilities. The README mentions SpacetimeDB, but no backend appears in the supplied tree, so it is not mapped as a runtime component.

Main entry points: [`src/store/userStore.ts`](https://github.com/michael0803-coder/-aquasnap/blob/main/src/store/userStore.ts) (User progress state), [`src/app/page.tsx`](https://github.com/michael0803-coder/-aquasnap/blob/main/src/app/page.tsx) (Screen router), [`src/components/games/GameLibrary.tsx`](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/GameLibrary.tsx) (Game library), [`src/components/auth/AuthScreen.tsx`](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/auth/AuthScreen.tsx) (Authentication)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_app["Screen router<br/>[page.tsx]"]
  node_auth["Authentication<br/>[AuthScreen.tsx]"]
  node_dashboard["Dashboard<br/>[Dashboard.tsx]"]
  node_profile["Profile and awards<br/>[ProfileScreen.tsx]"]
  node_ui["UI components"]
end

subgraph group_learning["Learning games"]
  node_gamehub["Game library<br/>[GameLibrary.tsx]"]
  node_speciesgame["Species identification"]
  node_habitatgame["Habitat matching"]
  node_conservationgame["Conservation status"]
  node_triviagame["Marine trivia"]
  node_ecosystemgame["Ecosystem builder"]
  node_currentsgame["Ocean currents"]
  node_rescuegame["Fish rescue<br/>[FishRescueGame.tsx]"]
end

subgraph group_rewards["Progress and aquarium"]
  node_tank["Virtual aquarium<br/>[FishTank.tsx]"]
  node_userstate["User progress state<br/>[userStore.ts]"]
  node_browserstore[("Browser storage")]
end

subgraph group_content["Educational content"]
  node_speciesdata["Species catalog<br/>[marineSpecies.ts]"]
  node_learninghub["Learning hub"]
  node_sdg["SDG 14 content<br/>[SDGPurpose.tsx]"]
end

node_learner(("Learner"))

node_learner -->|"opens"| node_app
node_app -->|"renders signed out"| node_auth
node_app -->|"renders default screen"| node_dashboard
node_app -->|"renders games screen"| node_gamehub
node_app -->|"renders profile screen"| node_profile
node_app -->|"renders aquarium screen"| node_tank
node_app -->|"renders learning screen"| node_learninghub
node_app -->|"renders purpose screen"| node_sdg
node_app -->|"loads session"| node_userstate
node_auth -->|"uses account state"| node_userstate
node_dashboard -->|"reads progress"| node_userstate
node_profile -->|"reads progress"| node_userstate
node_gamehub -->|"launches"| node_speciesgame
node_gamehub -->|"launches"| node_habitatgame
node_gamehub -->|"launches"| node_conservationgame
node_gamehub -->|"launches"| node_triviagame
node_gamehub -->|"launches"| node_ecosystemgame
node_gamehub -->|"launches"| node_currentsgame
node_gamehub -.->|"offers"| node_rescuegame
node_speciesgame -->|"updates progress"| node_userstate
node_habitatgame -->|"updates progress"| node_userstate
node_conservationgame -->|"updates progress"| node_userstate
node_triviagame -->|"updates progress"| node_userstate
node_ecosystemgame -->|"updates progress"| node_userstate
node_currentsgame -->|"updates progress"| node_userstate
node_rescuegame -.->|"updates progress"| node_userstate
node_speciesgame -->|"uses catalog"| node_speciesdata
node_habitatgame -->|"uses catalog"| node_speciesdata
node_conservationgame -->|"uses catalog"| node_speciesdata
node_tank -->|"spends points"| node_userstate
node_userstate -->|"persists session"| node_browserstore
node_auth -->|"uses controls"| node_ui
node_gamehub -->|"uses controls"| node_ui

click node_app "https://github.com/michael0803-coder/-aquasnap/blob/main/src/app/page.tsx"
click node_auth "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/auth/AuthScreen.tsx"
click node_dashboard "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/dashboard/Dashboard.tsx"
click node_profile "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/profile/ProfileScreen.tsx"
click node_gamehub "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/GameLibrary.tsx"
click node_speciesgame "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/SpeciesIdentificationGame.tsx"
click node_habitatgame "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/HabitatMatchingGame.tsx"
click node_conservationgame "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/ConservationStatusGame.tsx"
click node_triviagame "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/MarineTriviaGame.tsx"
click node_ecosystemgame "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/EcosystemBuilderGame.tsx"
click node_currentsgame "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/OceanCurrentsGame.tsx"
click node_rescuegame "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/FishRescueGame.tsx"
click node_tank "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/FishTank.tsx"
click node_userstate "https://github.com/michael0803-coder/-aquasnap/blob/main/src/store/userStore.ts"
click node_speciesdata "https://github.com/michael0803-coder/-aquasnap/blob/main/src/data/marineSpecies.ts"
click node_learninghub "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/MarineLearningHub.tsx"
click node_sdg "https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/SDGPurpose.tsx"
click node_ui "https://github.com/michael0803-coder/-aquasnap/tree/main/src/components/ui"

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_app,node_auth,node_dashboard,node_profile,node_ui toneBlue
class node_gamehub,node_speciesgame,node_habitatgame,node_conservationgame,node_triviagame,node_ecosystemgame,node_currentsgame,node_rescuegame toneAmber
class node_tank,node_userstate,node_browserstore toneMint
class node_speciesdata,node_learninghub,node_sdg toneRose
class node_learner toneIndigo
```

## Components

### App experience

- [Screen router](https://github.com/michael0803-coder/-aquasnap/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Authentication](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/auth/AuthScreen.tsx): `src/components/auth/AuthScreen.tsx`
- [Dashboard](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/dashboard/Dashboard.tsx): `src/components/dashboard/Dashboard.tsx`
- [Profile and awards](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/profile/ProfileScreen.tsx): `src/components/profile/ProfileScreen.tsx`
- [UI components](https://github.com/michael0803-coder/-aquasnap/tree/main/src/components/ui): `src/components/ui`

### Learning games

- [Game library](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/GameLibrary.tsx): `src/components/games/GameLibrary.tsx`
- [Species identification](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/SpeciesIdentificationGame.tsx): `src/components/games/SpeciesIdentificationGame.tsx`
- [Habitat matching](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/HabitatMatchingGame.tsx): `src/components/games/HabitatMatchingGame.tsx`
- [Conservation status](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/ConservationStatusGame.tsx): `src/components/games/ConservationStatusGame.tsx`
- [Marine trivia](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/MarineTriviaGame.tsx): `src/components/games/MarineTriviaGame.tsx`
- [Ecosystem builder](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/EcosystemBuilderGame.tsx): `src/components/games/EcosystemBuilderGame.tsx`
- [Ocean currents](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/OceanCurrentsGame.tsx): `src/components/games/OceanCurrentsGame.tsx`
- [Fish rescue](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/games/FishRescueGame.tsx): `src/components/games/FishRescueGame.tsx`

### Progress and aquarium

- [Virtual aquarium](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/FishTank.tsx): `src/components/FishTank.tsx`
- [User progress state](https://github.com/michael0803-coder/-aquasnap/blob/main/src/store/userStore.ts): `src/store/userStore.ts`
- **Browser storage**

### Educational content

- [Species catalog](https://github.com/michael0803-coder/-aquasnap/blob/main/src/data/marineSpecies.ts): `src/data/marineSpecies.ts`
- [Learning hub](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/MarineLearningHub.tsx): `src/components/MarineLearningHub.tsx`
- [SDG 14 content](https://github.com/michael0803-coder/-aquasnap/blob/main/src/components/SDGPurpose.tsx): `src/components/SDGPurpose.tsx`

### Other components

- **Learner**

## Connections

- Learner → Screen router: opens (evidence: `src/app/page.tsx`)
- Screen router → Authentication: renders signed out (evidence: `src/app/page.tsx`)
- Screen router → Dashboard: renders default screen (evidence: `src/app/page.tsx`)
- Screen router → Game library: renders games screen (evidence: `src/app/page.tsx`)
- Screen router → Profile and awards: renders profile screen (evidence: `src/app/page.tsx`)
- Screen router → Virtual aquarium: renders aquarium screen (evidence: `src/app/page.tsx`)
- Screen router → Learning hub: renders learning screen (evidence: `src/app/page.tsx`)
- Screen router → SDG 14 content: renders purpose screen (evidence: `src/app/page.tsx`)
- Screen router → User progress state: loads session (evidence: `src/app/page.tsx`)
- Authentication → User progress state: uses account state (evidence: `src/components/auth/AuthScreen.tsx`)
- Dashboard → User progress state: reads progress (evidence: `src/components/dashboard/Dashboard.tsx`)
- Profile and awards → User progress state: reads progress (evidence: `src/components/profile/ProfileScreen.tsx`)
- Game library → Species identification: launches (evidence: `src/components/games/GameLibrary.tsx`)
- Game library → Habitat matching: launches (evidence: `src/components/games/GameLibrary.tsx`)
- Game library → Conservation status: launches (evidence: `src/components/games/GameLibrary.tsx`)
- Game library → Marine trivia: launches (evidence: `src/components/games/GameLibrary.tsx`)
- Game library → Ecosystem builder: launches (evidence: `src/components/games/GameLibrary.tsx`)
- Game library → Ocean currents: launches (evidence: `src/components/games/GameLibrary.tsx`)
- Game library → Fish rescue: offers
- Species identification → User progress state: updates progress (evidence: `src/components/games/SpeciesIdentificationGame.tsx`)
- Habitat matching → User progress state: updates progress (evidence: `src/components/games/HabitatMatchingGame.tsx`)
- Conservation status → User progress state: updates progress (evidence: `src/components/games/ConservationStatusGame.tsx`)
- Marine trivia → User progress state: updates progress (evidence: `src/components/games/MarineTriviaGame.tsx`)
- Ecosystem builder → User progress state: updates progress (evidence: `src/components/games/EcosystemBuilderGame.tsx`)
- Ocean currents → User progress state: updates progress (evidence: `src/components/games/OceanCurrentsGame.tsx`)
- Fish rescue → User progress state: updates progress (evidence: `src/components/games/FishRescueGame.tsx`)
- Species identification → Species catalog: uses catalog (evidence: `src/components/games/SpeciesIdentificationGame.tsx`)
- Habitat matching → Species catalog: uses catalog (evidence: `src/components/games/HabitatMatchingGame.tsx`)
- Conservation status → Species catalog: uses catalog (evidence: `src/components/games/ConservationStatusGame.tsx`)
- Virtual aquarium → User progress state: spends points (evidence: `src/components/FishTank.tsx`)
- User progress state → Browser storage: persists session (evidence: `src/store/userStore.ts`)
- Authentication → UI components: uses controls (evidence: `src/components/auth/AuthScreen.tsx`)
- Game library → UI components: uses controls (evidence: `src/components/games/GameLibrary.tsx`)