Loading…
← HandbookComing soon
WatchSankofa
A pan-African creative-content streaming platform — film, music, poetry, writing and photography — built mobile-first for African connectivity realities, with Claude-powered discovery.
View the product pageThe problem
African creative content lacks its own distribution infrastructure; existing platforms are Western clones not built for the continent’s connectivity, languages and mobile-first majority.
Architecture
How it’s wired
Read-heavy browse pages are server-rendered; the audio/video players are the only client islands. AI discovery routes call Claude; media is served from Cloudflare Stream (HLS) and R2.
15
tables
5
AI route handlers
2
client islands (players)
Stack
Next.js 16 (App Router, Turbopack)TypeScript (strict)Supabase (Postgres + RLS + Realtime)Anthropic ClaudeZustand + persistCloudflare Stream (HLS)Cloudflare R2PWA (Media Session)
AI
Five Claude (Sonnet 4.6) route handlers — taste-profile, enrich, discover, creator-assistant and card-description — chosen for African cultural context in descriptions and recommendations.
Data model
15 tables · 12 indexes · RLS + triggers
- creators, works, series, albums, tips, follows, hearts, history, taste_profiles
- collabs / collab_applications
- DB-maintained counter triggers (heart_count, follower_count, works_count)
Key decisions
Why it’s built this way
ADR-01
Server components + client islands only for the players
- Context
- Browse pages are read-heavy; only media needs client state.
- Decision
- Server-render browse pages; the audio and video players are the only client islands.
- Consequence
- No prop drilling; minimal client JS on content pages.
ADR-02
Zustand persist for the audio player, not Redux/Context
- Context
- The player must survive navigation without remounting.
- Decision
- A persisted Zustand store; Context would re-render the whole tree (catastrophic for media).
- Consequence
- Continuous playback across routes.
ADR-03
A custom video player over react-player
- Context
- Need branding, native-feeling shortcuts, and a swappable source.
- Decision
- A bespoke player that swaps to Cloudflare Stream HLS without a UI rewrite.
- Consequence
- Full control of the playback experience.
The hard parts, solved
TypeScript-strict hardening before first run
Documented fixes including ReturnType<typeof setTimeout> refs, Array.from(new Set()) for older targets, and the Next.js 16 middleware → proxy migration.
Per-endpoint AI rate limiting
Five endpoints each with their own budget (taste-profile once/user, enrich 20/min, discover 10/min, card 60/min, creator-assistant 30/min, Pro-only).
Sourced from AfriFlix / CreativelyNanda build-journeys — sankofatv-build-journey.
.jpg&w=3840&q=75)