# PART 1 — Build the Foundation of an AI Education Platform I want you to build **Part 1** of a modern AI-powered education platform called **EduExplain AI**. The platform is designed for: * Class 8 * Class 9 * Class 10 * Class 11 / Intermediate * Class 12 / Intermediate * NEET preparation The main purpose is to act like a **personal AI teacher**. A student should be able to enter any educational question/topic, select their education level, and receive a clear, step-by-step explanation appropriate for their level. --- ## 1. Tech Stack Use a modern production-ready stack. Preferred: * Next.js * TypeScript * Tailwind CSS * Modern component library such as shadcn/ui * PostgreSQL database * Secure authentication * Server-side API routes * AI provider abstraction Keep the architecture modular so AI providers and other services can be changed later. Do NOT expose API keys in frontend code. Use environment variables for secrets. --- # 2. Landing Page Create a polished landing page for **EduExplain AI**. Hero section: ### Learn Anything. Understand Everything. Subtitle: > Your personal AI teacher for Class 8–12 and NEET preparation. Main CTA: **Start Learning** Secondary CTA: **Try AI Tutor** The page should explain the product with sections such as: ### How It Works 1. Ask a question 2. AI understands your level 3. Get a step-by-step explanation 4. Practice what you learned Include feature cards for: * AI Tutor * Screenshot Questions * Step-by-Step Solutions * Practice Questions * AI Explanation Videos * Personalized Learning For this phase, only implement the features that belong to Part 1. The other features can be shown as "Coming Soon." --- # 3. Authentication Create: * Sign Up * Login * Logout * Forgot Password * Protected dashboard After registration, show an onboarding screen. Ask: ### What are you studying? Options: * Class 8 * Class 9 * Class 10 * Class 11 * Class 12 * NEET Then ask: ### Preferred Language * English * Hindi * Telugu Save these preferences in the database. --- # 4. Student Dashboard Create a clean dashboard. At the top: ### Welcome back 👋 Show: > What do you want to learn today? Large AI question input: ```text Ask a question or enter a topic... ``` Example suggestions: * Explain Newton's Laws * Solve x² + 5x + 6 = 0 * What is photosynthesis? * Explain human respiration * Explain integration Buttons: **Explain** **Solve** --- # 5. AI Tutor This is the most important feature in Part 1. When a student submits a question: 1. Send the question to the backend. 2. Read the student's education level. 3. Read the student's preferred language. 4. Send both to the AI. 5. Generate an appropriate response. 6. Display the result beautifully. The AI must adapt its explanation according to the student's level. ### Class 8 Use: * Very simple language * Basic examples * Short explanations * Real-life analogies ### Class 9–10 Use: * School-level terminology * Step-by-step explanations * Important formulas * Exam-focused points ### Class 11–12 Use: * Deeper concepts * Derivations where appropriate * Detailed formulas * Examples * Conceptual reasoning ### NEET Use: * Exam-oriented explanations * Important concepts * NCERT-focused explanations where appropriate * Common mistakes * Important facts * Practice MCQs Do not make the answer unnecessarily complicated. --- # 6. AI Result Page Create a dedicated result interface. Structure: ## Question Display the student's question. ## Quick Answer Give the direct answer. ## Understand It Explain the concept clearly. ## Step-by-Step Solution If it is a problem, show every important step. ## Example Give a simple example when useful. ## Important Points Use bullet points. ## Formula / Key Concept Display important formulas or concepts in a visually attractive card. ## Exam Tip Provide an exam-oriented tip when appropriate. ## Common Mistakes Explain likely mistakes. At the bottom add: * Explain Simpler * Explain in More Detail * Give Another Example * Generate MCQs * Generate Notes * Generate Video For Part 1, only **Explain Simpler**, **Explain in More Detail**, and **Give Another Example** need to be functional. The others can be marked as coming soon. --- # 7. Conversation History Save the student's questions and AI responses. Create a History page. Each item should show: * Question * Subject/topic if detected * Date * Short preview Clicking an item should reopen the complete explanation. --- # 8. Database Create the necessary database models. At minimum: ### User * id * name * email * education_level * preferred_language * created_at ### Question * id * user_id * question * response * subject * topic * created_at Make the database structure easy to extend later. --- # 9. AI Service Architecture Do NOT tightly couple the application to one AI provider. Create an AI service abstraction such as: ```text AIService ├── answerQuestion() ├── simplifyExplanation() ├── expandExplanation() └── generateExample() ``` The implementation should be replaceable later. Use environment variables for: * AI API key * AI model * Database URL * Authentication secrets --- # 10. UI Design The UI should look like a modern startup/product, NOT like a traditional school website. Design characteristics: * Clean * Modern * Friendly * Minimal * Student-focused * Responsive * Mobile-friendly Use: * Rounded cards * Good spacing * Clear typography * Smooth transitions * Loading skeletons * Empty states * Error states Support light and dark mode if practical. --- # 11. Security Implement: * Authentication protection * Server-side API calls * Input validation * Rate limiting architecture * Secure database access * No exposed API keys Students must only be able to access their own history. --- # 12. Error Handling Handle: * AI API failure * Empty question * Network failure * Authentication failure * Database failure * Rate limit errors Show friendly messages rather than technical errors. Example: > Something went wrong while preparing your explanation. Please try again. --- # 13. Important Development Rule Build a **working end-to-end application**. Do not create fake functionality. The flow should actually work: ```text Sign Up ↓ Select Education Level ↓ Dashboard ↓ Ask Question ↓ Backend ↓ AI ↓ Explanation ↓ Save to History ``` Use mock AI responses only if an AI API key is unavailable, but clearly isolate the mock implementation from the real AI implementation. Do not implement Part 2 or Part 3 features yet. --- # FINAL REQUIREMENT At the end of Part 1, I should have a functioning AI education website where a student can: 1. Create an account 2. Select Class 8–12 or NEET 3. Select English/Hindi/Telugu 4. Ask an educational question 5. Receive a level-appropriate AI explanation 6. Ask the AI to simplify or expand the explanation 7. View previous questions in History Make the codebase clean and ready for **Part 2**, where we will add screenshot/image understanding, document uploads, practice questions, notes generation, and other learning features.
Sign in to leave a comment
Architecture diagrams will be automatically generated when the Project Manager creates tasks for your project.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!