StudyBuddy AI - v0 by Vercel

Screens to build

1. Onboarding (3-screen swipeable/stepped flow)

"Study Smarter" — "Your AI-powered personal tutor is always ready to help."

"Understand Difficult Topics" — "Get simple, step-by-step explanations instead of just answers."

"Prepare With Confidence" — "Practice with AI-generated quizzes and track your progress."

CTA button: "Get Started"

2. Auth screens
Sign up, Login, Forgot password. Include a Google auth button (UI only — wire the handler to a placeholder function). Signup form fields: Name, Email, Password, Education level (select), Exam type (select: JAMB/WAEC/NECO/University), Subjects (multi-select).

3. Home Dashboard

Header: "Good morning, [Name] 👋" / "Ready to learn something new?"

2x2 grid of large tappable action cards: 📸 Solve a Question ("Take a photo or type a question"), 📝 Generate Quiz ("Create a personalized practice quiz"), 🧠 Flashcards ("Turn any topic into flashcards"), 📚 Summarize Notes ("Upload notes and get an easy summary")

"Your Progress" stat strip: questions solved, quizzes completed, average score, study streak (use simple stat cards)

"Continue Learning" horizontal scroll list of recent topics

4. AI Tutor page

Textarea for typing a question + button to upload/take a photo

Subject select (Mathematics, Physics, Chemistry, Biology, English, Economics, Government, Geography, Computer Science, Other) and difficulty select

"Solve Question" button → renders a structured answer card with: Final Answer, Step-by-Step Explanation (numbered), Key Concept, Common Mistake to Avoid, Similar Practice Question

"Ask Follow-up" input at the bottom of the answer, chat-style

Sidebar/drawer showing question history

5. Quiz Generator

Setup screen: subject select, topic input, difficulty (Easy/Medium/Hard toggle), question count (5/10/20 toggle) → "Generate Quiz" button

Quiz-taking view: one MCQ at a time, 4 options, immediate correct/incorrect feedback with color states, progress bar at top

Results screen: "Quiz Complete 🎉", score ("8/10"), percentage, expandable list of each question with explanation, "Recommended topics to revise" card

6. Flashcard Generator

Setup: topic input + card count input → "Generate Flashcards" button

Flip-card component (tap to flip, CSS 3D flip animation) showing Question → Answer

Controls: Previous, Next, "Mark as Easy", "Mark as Difficult"

7. Notes Summarizer

Upload zone (drag/drop + file picker) accepting PDF, image, text

Output sections after processing: Summary, Key Points (bullets), Important Terms (definition list), Quick Revision, Practice Questions

"Save Summary" button

8. Profile

Avatar, name, email, education level, exam goal, subjects (as badges), study stats

Settings list: Notifications toggle, Dark mode toggle, Language select, Account settings, Privacy, Help & Support, Logout

Data & state

Use mock/local state (React state or a simple Zustand store) for all data — questions, quiz sets, quiz results, flashcard sets, notes, progress — structured so it's easy to swap in real API calls later. Add clear // TODO: connect to backend/AI API comments at each data-fetching point (question solving, quiz generation, flashcard generation, note summarization). Do not hardcode any API keys.

Build "StudyBuddy AI" — an AI-powered mobile-first education app for students preparing for JAMB, WAEC, NECO, and university exams.

Use Next.js (App Router), Tailwind CSS, and shadcn/ui components. Mobile-first layout (max-width container, bottom tab navigation), with dark mode support via next-themes. Clean, premium AI-app aesthetic: white background, blue/purple accent gradient, rounded-2xl cards, soft shadows, smooth transitions (framer-motion where useful).

Navigation

Bottom tab bar with 5 items: Home, AI Tutor, Quiz, Flashcards, Profile. Use lucide-react icons.

Screens to build

1. Onboarding (3-screen swipeable/stepped flow)

"Study Smarter" — "Your AI-powered personal tutor is always ready to help."
"Understand Difficult Topics" — "Get simple, step-by-step explanations instead of just answers."
"Prepare With Confidence" — "Practice with AI-generated quizzes and track your progress."
CTA button: "Get Started"

3. Home Dashboard

Header: "Good morning, [Name] 👋" / "Ready to learn something new?"
2x2 grid of large tappable action cards: 📸 Solve a Question ("Take a photo or type a question"), 📝 Generate Quiz ("Create a personalized practice quiz"), 🧠 Flashcards ("Turn any topic into flashcards"), 📚 Summarize Notes ("Upload notes and get an easy summary")
"Your Progress" stat strip: questions solved, quizzes completed, average score, study streak (use simple stat cards)
"Continue Learning" horizontal scroll list of recent topics

4. AI Tutor page

Textarea for typing a question + button to upload/take a photo
Subject select (Mathematics, Physics, Chemistry, Biology, English, Economics, Government, Geography, Computer Science, Other) and difficulty select
"Solve Question" button → renders a structured answer card with: Final Answer, Step-by-Step Explanation (numbered), Key Concept, Common Mistake to Avoid, Similar Practice Question
"Ask Follow-up" input at the bottom of the answer, chat-style
Sidebar/drawer showing question history

5. Quiz Generator

Setup screen: subject select, topic input, difficulty (Easy/Medium/Hard toggle), question count (5/10/20 toggle) → "Generate Quiz" button
Quiz-taking view: one MCQ at a time, 4 options, immediate correct/incorrect feedback with color states, progress bar at top
Results screen: "Quiz Complete 🎉", score ("8/10"), percentage, expandable list of each question with explanation, "Recommended topics to revise" card

6. Flashcard Generator

Setup: topic input + card count input → "Generate Flashcards" button
Flip-card component (tap to flip, CSS 3D flip animation) showing Question → Answer
Controls: Previous, Next, "Mark as Easy", "Mark as Difficult"

7. Notes Summarizer

Upload zone (drag/drop + file picker) accepting PDF, image, text
Output sections after processing: Summary, Key Points (bullets), Important Terms (definition list), Quick Revision, Practice Questions
"Save Summary" button

8. Profile

Avatar, name, email, education level, exam goal, subjects (as badges), study stats
Settings list: Notifications toggle, Dark mode toggle, Language select, Account settings, Privacy, Help & Support, Logout

Data & state

States to include

Loading skeletons/spinners for all AI-generation actions, empty states for history/flashcard sets/notes before first use, and error states with a retry button.

Scope

Build only the above (MVP). Skip monetization, exam-prep study plans, and
detailed analytics charts — those come in a later prompt.