the-cmk/african-stories

Mobile-first story submission platform for Africa — Next.js + Supabase # African Stories A mobile-first web app for collecting original African stories via text or audio recording. Built with **Next.js 14** + **Supabase**. --- ## Tech Stack | Layer | Tool | |---|---| | Framework | Next.js 14 (App Router, TypeScript) | | Styling | Tailwind CSS | | Database | Supabase (PostgreSQL) | | File Storage | Supabase Storage | | Deployment | Vercel | | AI Automation | n8n (connect later) | --- ## Local Setup ### 1. Clone and install ```bash git clone github.com cd african-stories npm install ``` ### 2. Set up Supabase 1. Create a free project at supabase.com 2. Go to **SQL Editor** and run the full contents of `supabase/schema.sql` 3. The schema creates: - `submissions` table with all required fields - Row Level Security policies - `audio-stories` storage bucket (public) ### 3. Environment variables Copy `.env.example` to `.env.local` and fill in your values: ```bash cp .env.example .env.local ``` ```env # From Supabase > Project Settings > API NEXT_PUBLIC_SUPABASE_URL=your-project.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key SUPABASE_SERVICE_ROLE_KEY=your-service-role-key # Admin dashboard credentials — choose strong values ADMIN_PASSWORD=your-strong-password ADMIN_TOKEN=a-long-random-secret-string ``` > **Security note:** `SUPABASE_SERVICE_ROLE_KEY` and `ADMIN_TOKEN` are server-only. Never prefix them with `NEXT_PUBLIC_`. ### 4. Run locally ```bash npm run dev ``` Open localhost --- ## Pages | Route | Description | |---|---| | `/` | Landing — choose write or record | | `/submit?type=text` | Multi-step text submission form | | `/submit?type=audio` | Multi-step audio submission form | | `/thank-you` | Success screen | | `/admin` | Admin login | | `/admin/dashboard` | Admin submissions dashboard | --- ## Admin Dashboard - Protected by HTTP-only cookie set on login - Shows all submissions with expandable detail cards - Audio playback inline - Status update d …