Abdoul2146/english_to_hausa_frontend

# Hausa Translator A web application to convert English documentary audio/video into Hausa text and speech. Built with Next.js 16, React 19, Zustand, Tailwind CSS v4, and shadcn/ui. ## Pipeline ``` Video / Audio → English Text → Hausa Text → Hausa Speech (Whisper) (NLLB-200) (MMS TTS) ``` ## Features | Tool | Description | |------|-------------| | **Extract Audio** | Upload a video file and extract its English audio track | | **YouTube** | Download audio from a YouTube URL for processing | | **Translate** | Transcribe audio to English text, then translate to Hausa | | **TTS** | Convert Hausa text to natural-sounding speech audio | All tools are independent — use them individually or chain them through the pipeline. ## Tech Stack - **Framework** — Next.js 16.2.6 (App Router, Turbopack) - **Language** — TypeScript 5 - **State** — Zustand with persisted history (localStorage) - **Styling** — Tailwind CSS v4 with CSS variables, dark/light theme - **UI** — shadcn/ui components (Button, Card, Tabs, Slider, Sheet, etc.) - **API** — Proxy to a Lightning AI backend (Whisper, NLLB-200, MMS TTS) - **Font** — Geist (Vercel) ## Architecture Feature-first directory structure: ``` src/ ├── app/ # Next.js App Router (pages + API stubs) │ ├── api/ # Stub routes that mirror the real backend contract │ └── ... ├── features/ │ ├── extract-audio/ # File upload → audio extraction │ ├── youtube-download/ # YouTube URL → audio download │ ├── translate/ # Transcribe + English→Hausa translation │ └── tts/ # Hausa text → speech synthesis └── shared/ ├── components/ # Cross-cutting UI (audio player, progress steps, etc.) ├── hooks/ # use-local-storage ├── layout/ # App shell, nav, history drawer, theme toggle ├── lib/ # API client, types, utils, theme provider ├── stores/ # Zustand stores per feature └── ui/ # shadcn/ui primitives ``` - Each feature owns its components, …