# codinghubindia/questfy architecture

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

- Interactive diagram: https://gitdiagram.com/codinghubindia/questfy
- Repository: https://github.com/codinghubindia/questfy

## Overview

Questfy is a gamified skill-development web app. A user enters through public pages, signs in or signs up, then reaches a protected dashboard to manage skills, generate and work through quests, and review progress or preferences. The React router in src/App.tsx owns route dispatch; useAuth coordinates authentication and profile setup through Supabase. The README documents Gemini quest generation and the Supabase-backed product capabilities, though the quest and settings implementation excerpts were not sampled, so those links are documentation-based.

Main entry points: [`src/App.tsx`](https://github.com/codinghubindia/questfy/blob/main/src/App.tsx) (Route dispatcher), [`src/services/supabase.ts`](https://github.com/codinghubindia/questfy/blob/main/src/services/supabase.ts) (Supabase services), [`src/pages/dashboard/Dashboard.tsx`](https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Dashboard.tsx) (Mission dashboard), [`src/pages/dashboard/Quests.tsx`](https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Quests.tsx) (Quest management)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App and access"]
  node_app["Route dispatcher<br/>[App.tsx]"]
  node_authpages["Login and signup<br/>[Login.tsx]"]
  node_callback["Auth callback<br/>[AuthCallback.tsx]"]
  node_authhook["Auth state<br/>[useAuth.ts]"]
  node_home["Landing page<br/>[Home.tsx]"]
end

subgraph group_learning["Learning experience"]
  node_layout["Dashboard shell"]
  node_dashboard["Mission dashboard<br/>[Dashboard.tsx]"]
  node_skills["Skill matrix<br/>[Skills.tsx]"]
  node_quests["Quest management<br/>[Quests.tsx]"]
  node_progress["Progress analytics<br/>[Progress.tsx]"]
  node_settings["Profile settings<br/>[Settings.tsx]"]
end

subgraph group_services["Backend services"]
  node_supabase["Supabase services<br/>[supabase.ts]"]
  node_database[("Questfy data")]
  node_gemini{{"Gemini AI"}}
end

subgraph group_shared["Shared interface"]
  node_questcard["Quest card<br/>[QuestCard.tsx]"]
  node_loading["Loading screen<br/>[Loading.tsx]"]
  node_button["Button primitive<br/>[Button.tsx]"]
  node_card["Card primitive<br/>[Card.tsx]"]
end

node_user(("Learner"))

node_user -->|"opens app"| node_app
node_app -->|"routes unauthenticated"| node_authpages
node_app -->|"routes public"| node_home
node_app -->|"routes callback"| node_callback
node_app -->|"protects dashboard"| node_layout
node_app -->|"routes dashboard"| node_dashboard
node_app -->|"routes skills"| node_skills
node_app -->|"routes quests"| node_quests
node_app -->|"routes progress"| node_progress
node_app -->|"routes settings"| node_settings
node_app -->|"checks auth"| node_authhook
node_app -->|"renders loading"| node_loading
node_authhook -->|"calls auth and profile"| node_supabase
node_dashboard -->|"loads dashboard data"| node_supabase
node_supabase -.->|"reads and writes"| node_database
node_quests -.->|"requests quest generation"| node_gemini
node_quests -.->|"manages quest records"| node_supabase
node_skills -.->|"stores skill progress"| node_supabase
node_progress -.->|"reads progress history"| node_supabase
node_settings -.->|"manages preferences"| node_supabase
node_quests -.->|"renders quests"| node_questcard
node_dashboard -->|"uses cards"| node_card
node_dashboard -->|"uses actions"| node_button

click node_app "https://github.com/codinghubindia/questfy/blob/main/src/App.tsx"
click node_authpages "https://github.com/codinghubindia/questfy/blob/main/src/pages/Login.tsx"
click node_callback "https://github.com/codinghubindia/questfy/blob/main/src/pages/AuthCallback.tsx"
click node_authhook "https://github.com/codinghubindia/questfy/blob/main/src/hooks/useAuth.ts"
click node_home "https://github.com/codinghubindia/questfy/blob/main/src/pages/Home.tsx"
click node_layout "https://github.com/codinghubindia/questfy/blob/main/src/components/layout/DashboardLayout.tsx"
click node_dashboard "https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Dashboard.tsx"
click node_skills "https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Skills.tsx"
click node_quests "https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Quests.tsx"
click node_questcard "https://github.com/codinghubindia/questfy/blob/main/src/components/ui/QuestCard.tsx"
click node_progress "https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Progress.tsx"
click node_settings "https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Settings.tsx"
click node_supabase "https://github.com/codinghubindia/questfy/blob/main/src/services/supabase.ts"
click node_database "https://github.com/codinghubindia/questfy/tree/main/supabase/migrations"
click node_loading "https://github.com/codinghubindia/questfy/blob/main/src/components/ui/Loading.tsx"
click node_button "https://github.com/codinghubindia/questfy/blob/main/src/components/ui/Button.tsx"
click node_card "https://github.com/codinghubindia/questfy/blob/main/src/components/ui/Card.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_app,node_authpages,node_callback,node_authhook,node_home toneBlue
class node_layout,node_dashboard,node_skills,node_quests,node_progress,node_settings toneAmber
class node_supabase,node_database,node_gemini toneMint
class node_questcard,node_loading,node_button,node_card toneRose
class node_user toneIndigo
```

## Components

### App and access

- [Route dispatcher](https://github.com/codinghubindia/questfy/blob/main/src/App.tsx): `src/App.tsx`
- [Login and signup](https://github.com/codinghubindia/questfy/blob/main/src/pages/Login.tsx): `src/pages/Login.tsx`
- [Auth callback](https://github.com/codinghubindia/questfy/blob/main/src/pages/AuthCallback.tsx): `src/pages/AuthCallback.tsx`
- [Auth state](https://github.com/codinghubindia/questfy/blob/main/src/hooks/useAuth.ts): `src/hooks/useAuth.ts`
- [Landing page](https://github.com/codinghubindia/questfy/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`

### Learning experience

- [Dashboard shell](https://github.com/codinghubindia/questfy/blob/main/src/components/layout/DashboardLayout.tsx): `src/components/layout/DashboardLayout.tsx`
- [Mission dashboard](https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Dashboard.tsx): `src/pages/dashboard/Dashboard.tsx`
- [Skill matrix](https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Skills.tsx): `src/pages/dashboard/Skills.tsx`
- [Quest management](https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Quests.tsx): `src/pages/dashboard/Quests.tsx`
- [Progress analytics](https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Progress.tsx): `src/pages/dashboard/Progress.tsx`
- [Profile settings](https://github.com/codinghubindia/questfy/blob/main/src/pages/dashboard/Settings.tsx): `src/pages/dashboard/Settings.tsx`

### Backend services

- [Supabase services](https://github.com/codinghubindia/questfy/blob/main/src/services/supabase.ts): `src/services/supabase.ts`
- [Questfy data](https://github.com/codinghubindia/questfy/tree/main/supabase/migrations): `supabase/migrations`
- **Gemini AI**

### Shared interface

- [Quest card](https://github.com/codinghubindia/questfy/blob/main/src/components/ui/QuestCard.tsx): `src/components/ui/QuestCard.tsx`
- [Loading screen](https://github.com/codinghubindia/questfy/blob/main/src/components/ui/Loading.tsx): `src/components/ui/Loading.tsx`
- [Button primitive](https://github.com/codinghubindia/questfy/blob/main/src/components/ui/Button.tsx): `src/components/ui/Button.tsx`
- [Card primitive](https://github.com/codinghubindia/questfy/blob/main/src/components/ui/Card.tsx): `src/components/ui/Card.tsx`

### Other components

- **Learner**

## Connections

- Learner → Route dispatcher: opens app
- Route dispatcher → Login and signup: routes unauthenticated (evidence: `src/App.tsx`)
- Route dispatcher → Landing page: routes public (evidence: `src/App.tsx`)
- Route dispatcher → Auth callback: routes callback (evidence: `src/App.tsx`)
- Route dispatcher → Dashboard shell: protects dashboard (evidence: `src/App.tsx`)
- Route dispatcher → Mission dashboard: routes dashboard (evidence: `src/App.tsx`)
- Route dispatcher → Skill matrix: routes skills (evidence: `src/App.tsx`)
- Route dispatcher → Quest management: routes quests (evidence: `src/App.tsx`)
- Route dispatcher → Progress analytics: routes progress (evidence: `src/App.tsx`)
- Route dispatcher → Profile settings: routes settings (evidence: `src/App.tsx`)
- Route dispatcher → Auth state: checks auth (evidence: `src/App.tsx`)
- Route dispatcher → Loading screen: renders loading (evidence: `src/App.tsx`)
- Auth state → Supabase services: calls auth and profile (evidence: `src/hooks/useAuth.ts`)
- Mission dashboard → Supabase services: loads dashboard data (evidence: `src/pages/dashboard/Dashboard.tsx`)
- Supabase services → Questfy data: reads and writes (evidence: `README.md`)
- Quest management → Gemini AI: requests quest generation (evidence: `README.md`)
- Quest management → Supabase services: manages quest records (evidence: `README.md`)
- Skill matrix → Supabase services: stores skill progress (evidence: `README.md`)
- Progress analytics → Supabase services: reads progress history (evidence: `README.md`)
- Profile settings → Supabase services: manages preferences (evidence: `README.md`)
- Quest management → Quest card: renders quests (evidence: `src/components/ui/QuestCard.tsx`)
- Mission dashboard → Card primitive: uses cards (evidence: `src/pages/dashboard/Dashboard.tsx`)
- Mission dashboard → Button primitive: uses actions (evidence: `src/pages/dashboard/Dashboard.tsx`)