WonderSound
Doc Status: Good | ✓ Clear summary | ✓ Easy to read | ✓ Matches code | ✓ Good structure | ✓
Professional look | ✓ Visual components
| Check | Status | Notes |
|---|---|---|
| Matches code | ✓ | Verified all function names, table names against actual schema.ts and implementation files |
| Clear summary | ✓ | Leads with business purpose and system overview |
| Visual components | ✓ | Uses Mermaid diagram, Steps, CardGroup |
| Good structure | ✓ | Welcome → Architecture → Quick Start → Tech Stack → Navigation |
Welcome
WonderSound is a music education platform in Vietnam offering:- Courses — Piano, Guitar, Vocal, Drum courses for all levels
- Tools — Metronome, Tuner, and other practice aids
- CRM — Student enrollment, attendance, scheduling, payments
- Marketing — Public website with course listings and enrollment forms
System Architecture
| Surface | Where | How |
|---|---|---|
| Website (public mktg) | Cloudflare Workers Static Assets | pnpm build && wrangler deploy |
| Admin (internal staff) | Cloudflare Workers Static Assets | pnpm build && wrangler deploy |
| App data backend | Convex Cloud | npx convex deploy --prod |
| Lark webhook worker | Cloudflare Workers (Hono) | wrangler deploy |
| Meta CAPI webhook worker | Cloudflare Workers (Hono) | wrangler deploy |
| Marketing CMS | Sanity Studio | npx sanity deploy |
| Mobile app | EAS Build → App Store | eas build |
Quick Start
Start Convex dev server
bash npx convex dev Runs from packages/backend/ — watches schema and functions,
auto-pushes diff.Tech Stack
| Layer | Technology |
|---|---|
| Website / Admin | Next.js 16 (App Router) + Tailwind CSS v4 |
| Mobile | Expo + Expo Router + NativeWind |
| UI | shadcn/ui + class-variance-authority |
| App backend | Convex (queries / mutations / actions) |
| External APIs | Vendor SDK or fetch from a Convex action |
| Webhook workers | Cloudflare Workers + Hono |
| Database | Convex DB (managed schema diff) |
| Auth | Convex Auth (@convex-dev/auth) |
| Marketing CMS | Sanity |
| File storage | Convex (small) + R2 (heavy) + Sanity CDN (mktg) |
| Deploy (web) | Cloudflare Workers Static Assets |
Quick Navigation
Architecture
System diagrams and data flow
Convex
Database schema, queries, mutations, actions
Code Standards
File naming, imports, ESLint, Prettier
Deployment
Deploy targets, environment variables, domains
Mobile
Expo + Expo Router + NativeWind patterns
External APIs
Lark, Meta CAPI, ZNS integration patterns