How csie2026/fe works
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: api.ts API client · App.tsx App navigation · HikingPage.tsx Hiking screen · useHikingSession.ts Session controller
Components 26
Mountain discovery
- Mountain explorer
src/components/RegionExplorer.tsx - Mountain lists
src/components/CityMountainList.tsx - Region map
src/components/GyeonggiMap.tsx - Course details
src/components/MountainCourseInfo.tsx - Mountain weather
src/components/MountainWeather.tsx - Region data
src/data/exploreRegions.ts
Hike tracking
- Hiking screen
src/components/hiking/HikingPage.tsx - Hiking map
src/components/hiking/HikingMap.tsx - Course lookup
src/components/hiking/services/courseApi.ts - Session controller
src/components/hiking/hooks/useHikingSession.ts - GPS reception
src/components/hiking/hooks/useGeolocation.ts - Track processing
src/components/hiking/services/sessionTracking.ts - GPS validation
src/components/hiking/trackUtils.ts - Session recovery
src/components/hiking/services/sessionRecovery.ts - iOS location bridge
src/native/backgroundLocation.ts - Activity save
src/components/hiking/services/activitySave.ts
Account and journals
- Hike journals
src/App.tsx
Profile and community
- My page
src/components/profile/MyPage.tsx - Monthly goals
src/hooks/useMonthlyGoals.ts - Hike history
src/hooks/useCompletedHikes.ts - Rankings
src/components/ranking/RankingPage.tsx
Shared platform
- App navigation
src/App.tsx - API client
src/api.ts
Other components
- Hiker
- ToPeak backend
- OAuth providers
Connections 32
- Hiker → App navigation: uses
- App navigation → Hiking screen: opens
src/App.tsx - App navigation → Course details: shows
src/App.tsx - App navigation → Mountain weather: shows
src/App.tsx - App navigation → Hike journals: manages
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
src/App.tsx - Hiking screen → Course lookup: loads courses
src/components/hiking/HikingPage.tsx - Hiking screen → Hiking map: renders
src/components/hiking/HikingPage.tsx - Hiking screen → Session controller: controls session
src/components/hiking/HikingPage.tsx - Session controller → GPS reception: reads location
- Session controller → Track processing: updates track
src/components/hiking/hooks/useHikingSession.ts - Track processing → GPS validation: filters points
src/components/hiking/services/sessionTracking.ts - Session controller → Session recovery: checkpoints
src/components/hiking/hooks/useHikingSession.ts - Session controller → iOS location bridge: controls iOS tracking
src/components/hiking/hooks/useHikingSession.ts - Hiking screen → Activity save: saves result
src/components/hiking/HikingPage.tsx - Activity save → API client: submits activity
- API client → ToPeak backend: requests data
- Mountain weather → API client: loads weather
src/components/MountainWeather.tsx - Course lookup → API client: loads courses
src/components/hiking/services/courseApi.ts - My page → Monthly goals: sets goals
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
src/hooks/useCompletedHikes.ts - Monthly goals → API client: loads and saves
src/hooks/useMonthlyGoals.ts - Hike journals → API client: manages journals
src/App.tsx - Hiker → My page: manages profile