How congminh204/storyloop works
StoryLoop teaches Chinese through branching story conversations, with staged review, flashcards, a story library, and learning-progress tracking. Learners enter through the React app, choose a learning activity, and can review progress; when the API is enabled, authentication and progress sync use the Express server and Postgres. The graph retains the README’s major learning and account capabilities. Some feature wiring is unsampled, so those capabilities are shown without guessed call chains; edges cite the README or source evidence available in the index and excerpts.
Main entry points: app.ts HTTP application · db.ts Postgres store · routes.ts Authentication routes · stats.ts Activity statistics
Components 27
Learning activities
- Story library
src/app/features/library - Story conversation
src/app/features/chat - Stage review
src/app/features/bloom - HSK flashcards
src/app/features/flashcard - Home challenges
src/app/features/home - Lesson celebration
src/app/features/celebrate/useLessonCelebration.tsx
Web application
- App navigation
src/app/App.tsx - Responsive layouts
src/app/layouts - Welcome screen
src/app/features/landing
Accounts and identity
- Sign-in forms
src/app/features/auth/AuthForms.tsx - Session state
src/app/features/auth/useAuth.ts - Authentication routes
server/src/auth/routes.ts - Session tokens
server/src/auth/tokens.ts - User records
server/src/users.ts - Account routes
server/src/me/routes.ts
Progress and insights
- Learner profile
src/app/features/profile - Progress views
src/app/components/ProgressScreen.tsx - Progress sync
src/app/lib/progress.ts - Learning statistics
src/app/features/progress/learningStats.ts - Progress routes
server/src/progress/routes.ts - Progress service
server/src/progress/service.ts - Activity statistics
server/src/stats.ts
Server platform
- API client
src/app/lib/api.ts - HTTP application
server/src/app.ts - Admin routes
server/src/admin/routes.ts - Postgres store
server/src/db.ts
Other components
- Learner
Connections 33
- Learner → App navigation: uses
README.md - App navigation → Responsive layouts: selects layout
src/app/App.tsx - App navigation → Story library: uses library data
src/app/App.tsx - Learner → Welcome screen: enters through
README.md - Learner → Story library: browses stories
README.md - Learner → Story conversation: plays stories
README.md - Learner → Stage review: reviews by stages
README.md - Learner → HSK flashcards: reviews vocabulary
README.md - Learner → Home challenges: uses challenges
README.md - Story conversation → Lesson celebration: finishes with
src/app/features/chat/BranchingStoryEngine.tsx - Learner → Learner profile: views profile
- Learner → Progress views: views progress
README.md - Progress views → Learning statistics: uses statistics
src/app/components/ProgressScreen.tsx - Progress views → Progress sync: loads activity
src/app/components/ProgressScreen.tsx - Sign-in forms → Session state: uses session state
src/app/features/auth/AuthForms.tsx - Session state → API client: calls API
src/app/features/auth/useAuth.ts - Progress sync → API client: sends progress
src/app/lib/progress.ts - API client → HTTP application: requests endpoints
- HTTP application → Authentication routes: mounts routes
server/src/app.ts - HTTP application → Account routes: mounts routes
server/src/app.ts - HTTP application → Progress routes: mounts routes
server/src/app.ts - HTTP application → Admin routes: mounts routes
server/src/app.ts - Authentication routes → Session tokens: creates sessions
server/src/auth/routes.ts - Authentication routes → User records: looks up users
server/src/auth/routes.ts - Authentication routes → Postgres store: queries users
server/src/auth/routes.ts - Account routes → Activity statistics: gets activity
server/src/me/routes.ts - Account routes → Postgres store: updates account
server/src/me/routes.ts - Progress routes → Progress service: delegates progress
server/src/progress/routes.ts - Progress service → Postgres store: reads and writes
server/src/progress/service.ts - Progress service → Activity statistics: uses statistics
server/src/progress/service.ts - Activity statistics → Postgres store: queries activity
server/src/stats.ts - Admin routes → Postgres store: queries users
server/src/admin/routes.ts - Admin routes → Activity statistics: computes streak
server/src/admin/routes.ts