english-learning-professionals

byNure Aiza

Build Step 1 of "FluencyPro — Advanced English for Professionals". Create the complete project foundation, database schema, and responsive mobile-first UI for an English learning web app tailored strictly for adult learners (focusing on career advancement, business communication, and real-world networking). ### Important Execution Rules: - I have zero coding experience. Make all technical and architectural decisions yourself. Do not ask me to write or edit code. - For this initial step, focus heavily on the UI layouts, step-by-step user flows, responsive navigation, reusable components, and placeholder data states. Do not attempt to integrate active live voice WebRTC or third-party audio streaming APIs yet. ### Target Audience & Tone: - **Users:** Working professionals, expats, and adult immigrants seeking to upgrade from basic English to confident, workplace-ready fluency. - **Tone & Persona:** Professional, premium, encouraging, and highly practical (avoid gamified elements like cartoon mascots or childish badges; focus instead on real-world milestones and performance analytics). ### Aesthetic & Visual Style Guide: - **Theme:** Clean, modern, executive tech aesthetic. - **Palette:** Deep slate gray or navy blue base, crisp white panels, vibrant indigo/teal accent colors for interactive elements. - **Layout:** Mobile-first responsive layout. A sticky bottom navigation bar for mobile viewports, transforming smoothly into a left-side persistent navigation sidebar on tablet and desktop monitors. ### Core Database Architecture (Initialize Tables): - `users`: ID, name, professional goal (e.g., tech, hospitality, finance), streak, subscription tier. - `scenarios`: ID, title, category (e.g., "Salary Negotiation", "Client Presentation", "Casual Networking"), difficulty. - `user_progress`: ID, user_id, scenario_id, completeness_percentage, top_mistakes_json, speaking_score. ### Main Navigation & Key Screens: Please build a layout containing the following five primary navigation views: 1. **Dashboard (Home):** - Professional streak tracker (e.g., "12 Days Consistent"). - "Daily Challenge" card featuring an adult idiom or workplace phrase of the day with its contextual definition. - Up-next recommendation widget based on their chosen career path. 2. **Scenarios (Practice Roleplay Hub):** - A grid of interactive conversation scenarios categorized by environment (e.g., *The Boardroom*, *The Coffee Break*, *The Interview*). - Each card must display estimated duration, level (Intermediate/Advanced), and a "Start Simulator" call-to-action. - Design a visual placeholder for the upcoming AI chat simulator view, showcasing chat bubbles (User vs. AI Coach) alongside an explicit "Tap to Speak" microphone UI anchor. 3. **Writing Lab (Grammar & Email Correction):** - A split-screen interface or form. - On the left/top: A large text area field where the user can paste an draft email or memo (e.g., "Draft an update to your boss"). - On the right/bottom: A placeholder feedback section showing how grammar corrections, professional tone enhancements, and vocabulary suggestions will be highlighted in real-time. 4. **Flashcards (Idioms & Vocabulary):** - A clean UI component allowing cards to visually flip on tap. - Front side: A high-level idiom, phrasal verb, or corporate jargon phrase (e.g., "Touch base", "Circle back"). - Back side: Clear definition, literal translation placeholder, formal vs. informal usage notes, and an example sentence. 5. **Analytics (Profile):** - User profile data editing form. - A performance visualization dashboard displaying data charts for: Vocabulary Growth, Pronunciation Accuracy %, and Total Speaking Minutes. - A dynamic "Common Mistakes Log" aggregating placeholder text corrections organized by category (e.g., Prepositions, Soft Skills Tone). Please generate the complete, interactive prototype layout structure based on these specifications so we can review the full user flow.