# csie2026/fe architecture

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

- Interactive diagram: https://gitdiagram.com/csie2026/fe
- Repository: https://github.com/csie2026/fe

## Overview

ToPeak is a frontend for exploring Gyeonggi mountains and recording hikes, with account, journal, profile, and ranking features. Users explore mountains and courses, start GPS tracking, pause or resume, then save a result for their hike history; they can also create journals from saved hikes. The graph combines documented workflows with relationships visible in indexed imports and excerpts. Some screens and native iOS implementation details were not sampled, so their internal connections are omitted; dashed links indicate documented integrations whose exact caller is not shown.

Main entry points: [`src/api.ts`](https://github.com/csie2026/fe/blob/dev/src/api.ts) (API client), [`src/App.tsx`](https://github.com/csie2026/fe/blob/dev/src/App.tsx) (App navigation), [`src/components/hiking/HikingPage.tsx`](https://github.com/csie2026/fe/blob/dev/src/components/hiking/HikingPage.tsx) (Hiking screen), [`src/components/hiking/hooks/useHikingSession.ts`](https://github.com/csie2026/fe/blob/dev/src/components/hiking/hooks/useHikingSession.ts) (Session controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_explore["Mountain discovery"]
  node_explore_ui["Mountain explorer<br/>[RegionExplorer.tsx]"]
  node_mountain_list["Mountain lists"]
  node_map["Region map<br/>[GyeonggiMap.tsx]"]
  node_course_ui["Course details"]
  node_weather_ui["Mountain weather"]
  node_explore_data["Region data<br/>[exploreRegions.ts]"]
end

subgraph group_hiking["Hike tracking"]
  node_hike_page["Hiking screen<br/>[HikingPage.tsx]"]
  node_hike_map["Hiking map<br/>[HikingMap.tsx]"]
  node_course_api["Course lookup<br/>[courseApi.ts]"]
  node_session_hook["Session controller"]
  node_gps["GPS reception<br/>[useGeolocation.ts]"]
  node_tracking["Track processing<br/>[sessionTracking.ts]"]
  node_track_utils["GPS validation<br/>[trackUtils.ts]"]
  node_recovery["Session recovery<br/>[sessionRecovery.ts]"]
  node_native["iOS location bridge"]
  node_activity_save["Activity save<br/>[activitySave.ts]"]
end

subgraph group_account["Account and journals"]
  node_journals["Hike journals<br/>[App.tsx]"]
end

subgraph group_community["Profile and community"]
  node_profile["My page<br/>[MyPage.tsx]"]
  node_goals["Monthly goals<br/>[useMonthlyGoals.ts]"]
  node_history["Hike history"]
  node_ranking["Rankings<br/>[RankingPage.tsx]"]
end

subgraph group_platform["Shared platform"]
  node_app["App navigation<br/>[App.tsx]"]
  node_api["API client<br/>[api.ts]"]
end

node_hiker(("Hiker"))
node_backend[("ToPeak backend")]
node_auth(("OAuth providers"))

node_hiker -->|"uses"| node_app
node_app -->|"opens"| node_hike_page
node_app -->|"shows"| node_course_ui
node_app -->|"shows"| node_weather_ui
node_app -->|"manages"| node_journals
node_app -.->|"starts login"| node_auth
node_hiker -->|"explores"| node_explore_ui
node_explore_ui -.->|"presents"| node_mountain_list
node_explore_ui -.->|"displays"| node_map
node_hiker -->|"selects course"| node_course_ui
node_course_ui -->|"starts hike"| node_hike_page
node_hike_page -->|"loads courses"| node_course_api
node_hike_page -->|"renders"| node_hike_map
node_hike_page -->|"controls session"| node_session_hook
node_session_hook -.->|"reads location"| node_gps
node_session_hook -->|"updates track"| node_tracking
node_tracking -->|"filters points"| node_track_utils
node_session_hook -->|"checkpoints"| node_recovery
node_session_hook -->|"controls iOS tracking"| node_native
node_hike_page -->|"saves result"| node_activity_save
node_activity_save -.->|"submits activity"| node_api
node_api -->|"requests data"| node_backend
node_weather_ui -->|"loads weather"| node_api
node_course_api -->|"loads courses"| node_api
node_profile -->|"sets goals"| node_goals
node_profile -.->|"shows history"| node_history
node_hiker -->|"views rankings"| node_ranking
node_hiker -->|"writes journals"| node_journals
node_history -->|"loads records"| node_api
node_goals -->|"loads and saves"| node_api
node_journals -->|"manages journals"| node_api
node_hiker -->|"manages profile"| node_profile

click node_app "https://github.com/csie2026/fe/blob/dev/src/App.tsx"
click node_explore_ui "https://github.com/csie2026/fe/blob/dev/src/components/RegionExplorer.tsx"
click node_mountain_list "https://github.com/csie2026/fe/blob/dev/src/components/CityMountainList.tsx"
click node_map "https://github.com/csie2026/fe/blob/dev/src/components/GyeonggiMap.tsx"
click node_course_ui "https://github.com/csie2026/fe/blob/dev/src/components/MountainCourseInfo.tsx"
click node_weather_ui "https://github.com/csie2026/fe/blob/dev/src/components/MountainWeather.tsx"
click node_explore_data "https://github.com/csie2026/fe/blob/dev/src/data/exploreRegions.ts"
click node_hike_page "https://github.com/csie2026/fe/blob/dev/src/components/hiking/HikingPage.tsx"
click node_hike_map "https://github.com/csie2026/fe/blob/dev/src/components/hiking/HikingMap.tsx"
click node_course_api "https://github.com/csie2026/fe/blob/dev/src/components/hiking/services/courseApi.ts"
click node_session_hook "https://github.com/csie2026/fe/blob/dev/src/components/hiking/hooks/useHikingSession.ts"
click node_gps "https://github.com/csie2026/fe/blob/dev/src/components/hiking/hooks/useGeolocation.ts"
click node_tracking "https://github.com/csie2026/fe/blob/dev/src/components/hiking/services/sessionTracking.ts"
click node_track_utils "https://github.com/csie2026/fe/blob/dev/src/components/hiking/trackUtils.ts"
click node_recovery "https://github.com/csie2026/fe/blob/dev/src/components/hiking/services/sessionRecovery.ts"
click node_native "https://github.com/csie2026/fe/blob/dev/src/native/backgroundLocation.ts"
click node_activity_save "https://github.com/csie2026/fe/blob/dev/src/components/hiking/services/activitySave.ts"
click node_api "https://github.com/csie2026/fe/blob/dev/src/api.ts"
click node_profile "https://github.com/csie2026/fe/blob/dev/src/components/profile/MyPage.tsx"
click node_goals "https://github.com/csie2026/fe/blob/dev/src/hooks/useMonthlyGoals.ts"
click node_history "https://github.com/csie2026/fe/blob/dev/src/hooks/useCompletedHikes.ts"
click node_ranking "https://github.com/csie2026/fe/blob/dev/src/components/ranking/RankingPage.tsx"
click node_journals "https://github.com/csie2026/fe/blob/dev/src/App.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_explore_ui,node_mountain_list,node_map,node_course_ui,node_weather_ui,node_explore_data toneBlue
class node_hike_page,node_hike_map,node_course_api,node_session_hook,node_gps,node_tracking,node_track_utils,node_recovery,node_native,node_activity_save,node_backend toneAmber
class node_journals toneMint
class node_profile,node_goals,node_history,node_ranking toneRose
class node_app,node_api,node_hiker,node_auth toneIndigo
```

## Components

### Mountain discovery

- [Mountain explorer](https://github.com/csie2026/fe/blob/dev/src/components/RegionExplorer.tsx): `src/components/RegionExplorer.tsx`
- [Mountain lists](https://github.com/csie2026/fe/blob/dev/src/components/CityMountainList.tsx): `src/components/CityMountainList.tsx`
- [Region map](https://github.com/csie2026/fe/blob/dev/src/components/GyeonggiMap.tsx): `src/components/GyeonggiMap.tsx`
- [Course details](https://github.com/csie2026/fe/blob/dev/src/components/MountainCourseInfo.tsx): `src/components/MountainCourseInfo.tsx`
- [Mountain weather](https://github.com/csie2026/fe/blob/dev/src/components/MountainWeather.tsx): `src/components/MountainWeather.tsx`
- [Region data](https://github.com/csie2026/fe/blob/dev/src/data/exploreRegions.ts): `src/data/exploreRegions.ts`

### Hike tracking

- [Hiking screen](https://github.com/csie2026/fe/blob/dev/src/components/hiking/HikingPage.tsx): `src/components/hiking/HikingPage.tsx`
- [Hiking map](https://github.com/csie2026/fe/blob/dev/src/components/hiking/HikingMap.tsx): `src/components/hiking/HikingMap.tsx`
- [Course lookup](https://github.com/csie2026/fe/blob/dev/src/components/hiking/services/courseApi.ts): `src/components/hiking/services/courseApi.ts`
- [Session controller](https://github.com/csie2026/fe/blob/dev/src/components/hiking/hooks/useHikingSession.ts): `src/components/hiking/hooks/useHikingSession.ts`
- [GPS reception](https://github.com/csie2026/fe/blob/dev/src/components/hiking/hooks/useGeolocation.ts): `src/components/hiking/hooks/useGeolocation.ts`
- [Track processing](https://github.com/csie2026/fe/blob/dev/src/components/hiking/services/sessionTracking.ts): `src/components/hiking/services/sessionTracking.ts`
- [GPS validation](https://github.com/csie2026/fe/blob/dev/src/components/hiking/trackUtils.ts): `src/components/hiking/trackUtils.ts`
- [Session recovery](https://github.com/csie2026/fe/blob/dev/src/components/hiking/services/sessionRecovery.ts): `src/components/hiking/services/sessionRecovery.ts`
- [iOS location bridge](https://github.com/csie2026/fe/blob/dev/src/native/backgroundLocation.ts): `src/native/backgroundLocation.ts`
- [Activity save](https://github.com/csie2026/fe/blob/dev/src/components/hiking/services/activitySave.ts): `src/components/hiking/services/activitySave.ts`

### Account and journals

- [Hike journals](https://github.com/csie2026/fe/blob/dev/src/App.tsx): `src/App.tsx`

### Profile and community

- [My page](https://github.com/csie2026/fe/blob/dev/src/components/profile/MyPage.tsx): `src/components/profile/MyPage.tsx`
- [Monthly goals](https://github.com/csie2026/fe/blob/dev/src/hooks/useMonthlyGoals.ts): `src/hooks/useMonthlyGoals.ts`
- [Hike history](https://github.com/csie2026/fe/blob/dev/src/hooks/useCompletedHikes.ts): `src/hooks/useCompletedHikes.ts`
- [Rankings](https://github.com/csie2026/fe/blob/dev/src/components/ranking/RankingPage.tsx): `src/components/ranking/RankingPage.tsx`

### Shared platform

- [App navigation](https://github.com/csie2026/fe/blob/dev/src/App.tsx): `src/App.tsx`
- [API client](https://github.com/csie2026/fe/blob/dev/src/api.ts): `src/api.ts`

### Other components

- **Hiker**
- **ToPeak backend**
- **OAuth providers**

## Connections

- Hiker → App navigation: uses
- App navigation → Hiking screen: opens (evidence: `src/App.tsx`)
- App navigation → Course details: shows (evidence: `src/App.tsx`)
- App navigation → Mountain weather: shows (evidence: `src/App.tsx`)
- App navigation → Hike journals: manages (evidence: `src/App.tsx`)
- App navigation → OAuth providers: starts login
- Hiker → Mountain explorer: explores
- Mountain explorer → Mountain lists: presents
- Mountain explorer → Region map: displays
- Hiker → Course details: selects course
- Course details → Hiking screen: starts hike (evidence: `src/App.tsx`)
- Hiking screen → Course lookup: loads courses (evidence: `src/components/hiking/HikingPage.tsx`)
- Hiking screen → Hiking map: renders (evidence: `src/components/hiking/HikingPage.tsx`)
- Hiking screen → Session controller: controls session (evidence: `src/components/hiking/HikingPage.tsx`)
- Session controller → GPS reception: reads location
- Session controller → Track processing: updates track (evidence: `src/components/hiking/hooks/useHikingSession.ts`)
- Track processing → GPS validation: filters points (evidence: `src/components/hiking/services/sessionTracking.ts`)
- Session controller → Session recovery: checkpoints (evidence: `src/components/hiking/hooks/useHikingSession.ts`)
- Session controller → iOS location bridge: controls iOS tracking (evidence: `src/components/hiking/hooks/useHikingSession.ts`)
- Hiking screen → Activity save: saves result (evidence: `src/components/hiking/HikingPage.tsx`)
- Activity save → API client: submits activity
- API client → ToPeak backend: requests data
- Mountain weather → API client: loads weather (evidence: `src/components/MountainWeather.tsx`)
- Course lookup → API client: loads courses (evidence: `src/components/hiking/services/courseApi.ts`)
- My page → Monthly goals: sets goals (evidence: `src/components/profile/MyPage.tsx`)
- My page → Hike history: shows history
- Hiker → Rankings: views rankings
- Hiker → Hike journals: writes journals
- Hike history → API client: loads records (evidence: `src/hooks/useCompletedHikes.ts`)
- Monthly goals → API client: loads and saves (evidence: `src/hooks/useMonthlyGoals.ts`)
- Hike journals → API client: manages journals (evidence: `src/App.tsx`)
- Hiker → My page: manages profile