spoken-english

byHabibul Islam

Build **Step 1 of SARA — Learn English with AI**. Create the complete project foundation and responsive UI for a modern mobile-first English learning app. ### App Name: **SARA — Learn English with AI** Target users: beginner and intermediate English learners, especially Bengali-speaking learners. ### Important I have no coding experience. Make technical decisions yourself. Do not ask me to write code. For this step, focus ONLY on the UI, navigation, reusable components, and project structure. Do not build real AI/voice functionality yet. ### Main Navigation Create bottom navigation: * Home * Sara * Practice * Stories * Profile The **Sara** button should be the main/highlighted action. ### Home Screen Create a clean dashboard showing: "Good morning 👋" "Ready to practice English?" Cards for: * 🔥 Daily Streak * 🎙️ Speaking * 📚 Vocabulary * 📝 Daily Practice * 📖 Story of the Day Main button: **🎙️ Talk with Sara** ### Sara Screen Create a phone-call-style UI, not a chat UI. Show: * Sara avatar * Sara * AI English Tutor * Call duration * Voice waveform area * Microphone button * Mute button * End Call button * Hint button * Repeat button * Slow Speech button For now, these can be UI-only buttons. Do not create fake AI functionality. ### Practice Screen Create sections for: * Vocabulary * Grammar * Sentence Building * Speaking * Pronunciation * Listening Show today's progress. ### Stories Screen Create: * Story of the Day * Beginner * Intermediate * Advanced * Story categories * Story cards ### Profile Screen Show: * User profile * English level * Learning goal * Daily goal * Streak * Progress * Settings ### Design Make the UI: * Modern * Premium * Friendly * Clean * Calm * Educational * Mobile-first Use rounded cards, large touch targets, clear typography, simple icons, smooth animations and accessible contrast. Support: * Mobile * Tablet * Desktop * Light mode * Dark mode ### Architecture Create reusable components and a clean scalable structure so we can later add: * Authentication * Database * Speech-to-text * AI conversation * Text-to-speech * Grammar correction * Bengali explanations * Pronunciation analysis * Vocabulary * Daily practice * Stories * Progress tracking Do not remove or simplify the future **Learn with Sara voice experience**. After completing this step, verify that navigation and all screens work correctly before moving to the next step.