The Eʋe App 🥁

A premium platform for learning Eʋegbe — warm, culturally rich, and built for Ghanaian/Eʋe learners and the diaspora. This repo contains a polished marketing landing page and a functional MVP web app, on a Supabase-ready architecture.

⚠️ Language note: All Eʋe content is placeholder educational material and is flagged needs_review / “needs native speaker review” in the data layer. It is structured so a native Eʋe speaker can easily verify and correct it. No claim of linguistic perfection is made.

Tech stack

• Next.js 14 (App Router) + React 18 + TypeScript
• Tailwind CSS for the design system (warm orange / cream tokens)
• Zustand (+ localStorage) for gamified progress state
• Nunito via next/font — rounded, friendly, and renders the African Reference Alphabet (ɖ Ƒ ƒ Ɣ ɣ Ɛ ɛ ɔ ŋ ʋ) without clipping

Library substitution

The brief suggested Framer Motion. To keep the scaffold dependency-light and fully server-renderable, animations use Tailwind keyframes + CSS transitions (see tailwind.config.ts and globals.css). Framer Motion can be dropped in later behind the same component boundaries with no structural change.

Run it

npm install
npm run dev        # http://localhost:3000  → landing page
                   # http://localhost:3000/app → MVP app
npm run build      # production build

Key files

Area	Path
Landing page	src/app/(marketing)/page.tsx + src/components/marketing/*
App shell / nav	src/components/app/AppShell.tsx, Sidebar.tsx, BottomNav.tsx
Routes	src/app/app/{page,learn,lesson/[id],practice,review,culture,profile,paywall}
Lesson engine	src/components/app/LessonPlayer.tsx
Design system	src/components/ui/*, tokens in tailwind.config.ts + src/styles/tokens.ts
Progress state	src/hooks/useProgress.ts
SRS logic	src/lib/srs.ts, src/lib/progress.ts
Types (DB-shaped)	src/types/index.ts

Where the mock data lives

Everything is under src/data/, shaped 1:1 to future Supabase tables: course.ts, items.ts, vocabulary.ts, phrases.ts, proverbs.ts, culturalNotes.ts, achievements.ts, mediaAssets.ts, profile.ts, plans.ts. Access it through the getters in src/data/index.ts (e.g. getItemsForLesson).

Seed includes: 1 course · 9 units · 8 lessons · 41 lesson items · 14 vocab · 6 phrases · 6 proverbs · 6 cultural notes · 7 achievements.

Where to add Supabase

The seam is src/lib/supabase.ts (fully commented). Steps:

1. npm i @supabase/supabase-js, set NEXT_PUBLIC_SUPABASE_URL / _ANON_KEY.
2. Create tables matching src/types (snake_case columns already align).
3. Make the getters in src/data/index.ts async Supabase queries (same names).
4. Hydrate useProgress from learner_profiles on sign-in; mirror writes back.

Real Eʋe audio & speech: Khaya AI (GhanaNLP)

The seam is src/lib/khaya.ts. Khaya (translation.ghananlp.org) provides production APIs for Ghanaian languages with Eʋe (ee) support: translation, text-to-speech (real pronunciation audio for listen-and-repeat), and speech recognition (real speaking practice scoring). Get a subscription key from the developer portal, set KHAYA_API_KEY in .env.local, and call the helpers from Next.js route handlers (needs a Node host like Vercel — not compatible with static export).

Known limitations (stubbed for later)

• No real payments — paywall fires a Superwall-style placeholder.
• No real speech recognition — speaking gives a simulated score.
• No real auth / Supabase — a mock user + local state stand in.
• No real audio — AudioButton animates a placeholder (assets uri: null).
• No offline sync / push — surfaced in UI as “coming soon”.
• Eʋe content needs native-speaker review.

Next development steps

1. Native-speaker content pass; wire real audio assets.
2. Supabase tables + auth; move progress server-side.
3. Real streak logic (date rollover) and daily-goal reset.
4. Payments (Stripe/Superwall) + entitlement gating on Pro content.
5. Web Speech API / hosted model for pronunciation scoring.
6. Expo / React Native app reusing src/data, src/types, src/lib.
7. Offline packs (service worker / cached lesson bundles).