UI design from document - v0 by VercelUI design from document - v0 by Vercel
bu dokümana göre ui tasarla
AI_IELTS_TOEFL_Writing_Coach_UI_Requirements.pdf
22d ago
Now I'll build the AI IELTS & TOEFL Writing Coach app with all the screens specified in the document. I'll create a mobile-first design with a bottom navigation, implementing all 9 screens with a premium academic aesthetic.
Now let me create the main app components:
Now let me create the main page that ties everything together:
Now I need to install recharts for the charts and check if there are any missing UI components:
All the required UI components are available. Let me verify the app is working by checking for any issues:
The dev server is running. Let me use the browser to verify the app:
The Home screen is working beautifully! Let me test the other screens:
Now let me test the Premium screen by clicking on "Upgrade to Premium":
All screens are working. Let me close the premium screen and take a final full page scroll to show the complete home page:
The app is complete and working. I've built the AI IELTS & TOEFL Writing Coach mobile app UI based on the requirements document. Here's what was implemented:
Screens Created:
Home Dashboard - Writing Health Score (0-100), current IELTS level, goal score, today's writing goal with progress, active challenges with progress bars, last essay score, and a weekly mini progress graph
Write Essay - Credit balance indicator, large essay input area with word counter, IELTS/TOEFL exam type selector, writing tips section, and Analyze Essay CTA button
Analysis Result - IELTS/TOEFL score card, normalized score, breakdown scores for Grammar, Vocabulary, Coherence, and Task Achievement, plus top recurring mistakes
Error Details - Original vs corrected sentences with syntax highlighting, explanation cards, and vocabulary upgrade suggestions
Progress - Score history chart, error trend visualization, skill breakdown bars with trends, and monthly overview stats with tabbed navigation
AI Coach - Weekly coach report, personalized key insights, recommended focus areas, and suggested study topics
Challenges - Active challenges with progress indicators, rewards/credits, freeze challenge option, completed challenges, and locked challenges preview
Profile - User avatar/nickname, credit balance, essays analyzed, current streak, average score, settings menu, and upgrade to premium banner
Premium/Paywall - Credit package cards (5, 10, 25 packs) with pricing, features list, and RevenueCat-ready purchase flow