found-you

byAkif Empire

# 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.

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 8

System Requirements Document for found-you

1. Introduction

EduExplain AI is a modern AI-powered education platform designed to serve as a personal AI teacher for students in Class 8 through Class 12 and those preparing for NEET exams. The platform allows students to enter educational questions or topics, select their education level, and receive clear, step-by-step explanations tailored to their level of understanding.

2. System Overview

EduExplain AI provides a personalized learning experience through AI-generated explanations, a student dashboard, and conversation history. The platform is built using a modern tech stack, ensuring modularity, security, and responsiveness. The initial phase focuses on core functionalities such as student registration, personalized AI explanations, and conversation history, with a design that is friendly and approachable for students.

2a. Product Interpretation and Delivery Boundary

EduExplain AI is delivered as a web application using Next.js, TypeScript, and Tailwind CSS. It includes secure authentication and server-side API routes. The platform is designed to be modular, allowing for future expansion and integration with different AI providers. The current phase does not include features beyond Part 1, such as screenshot/image understanding or document uploads.

Page 2 of 8

2b. Source Content Inventory

Not applicable as no content source directive was provided.

2c. Page Content and Component Coverage

Landing Page

  • Hero Section

    • Headline: "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"
  • How It Works

    • Steps: Ask a question, AI understands your level, Get a step-by-step explanation, Practice what you learned.
  • Feature Cards

    • AI Tutor, Screenshot Questions (Coming Soon), Step-by-Step Solutions, Practice Questions (Coming Soon), AI Explanation Videos (Coming Soon), Personalized Learning (Coming Soon).

Authentication

  • Sign Up, Login, Logout, Forgot Password
    • Secure authentication flow.
    • Onboarding screen post-registration to select education level and preferred language.
Page 3 of 8

Student Dashboard

  • Welcome Message

    • "Welcome back 👋 What do you want to learn today?"
  • AI Question Input

    • Input field with example suggestions.
    • Buttons: "Explain", "Solve".

AI Tutor

  • Question Submission
    • Backend processing of questions with student level and language preferences.
    • AI-generated responses tailored to education level.

AI Result Page

  • Question Display

  • Quick Answer

  • Understand It

  • Step-by-Step Solution

  • Example

  • Important Points

  • Formula / Key Concept

  • Exam Tip

  • Common Mistakes

  • Interactive Options

    • Explain Simpler, Explain in More Detail, Give Another Example.
    • Generate MCQs, Generate Notes, Generate Video (Coming Soon).
Page 4 of 8

Conversation History

  • History Page
    • List of past questions with subject/topic, date, and preview.
    • Click to view complete explanation.

Database

  • User Model

    • Fields: id, name, email, education_level, preferred_language, created_at.
  • Question Model

    • Fields: id, user_id, question, response, subject, topic, created_at.

AI Service Architecture

  • AIService Abstraction
    • Methods: answerQuestion(), simplifyExplanation(), expandExplanation(), generateExample().

3. Functional Requirements

  • As a student, I should be able to create an account and log in securely. (explicit)
  • As a student, I should be able to select my education level and preferred language during onboarding. (explicit)
  • As a student, I should be able to ask educational questions and receive AI-generated explanations tailored to my level. (explicit)
  • As a student, I should be able to view and manage my conversation history. (explicit)
  • As a student, I should be able to request simpler or more detailed explanations and additional examples. (explicit)
Page 5 of 8

4. User Personas

  • Student
    • Responsibilities: Register, select education level and language, ask questions, view AI explanations, manage conversation history.

5. Core User Flows

  1. Registration and Onboarding

    • Student signs up and logs in.
    • Student selects education level and preferred language.
    • Preferences are saved in the database.
  2. Asking a Question

    • Student enters a question/topic in the dashboard.
    • Student selects "Explain" or "Solve".
    • Question is processed by the backend and AI.
    • AI generates and displays a tailored explanation.
  3. Viewing AI Explanation

    • Student views the explanation with options to simplify, expand, or get another example.
    • Student can save the explanation to history.
  4. Managing Conversation History

    • Student accesses the history page.
    • Student views past questions and explanations.
    • Student can reopen complete explanations from history.
Page 6 of 8

6. Visuals Colors and Theme

  • Muse: Pablo Stanley
  • Palette:
    • Background: #FFFFFF
    • Surface: #FAF3E0
    • Text: #333333
    • Primary: #FF6F61
    • Accent: #FFD700
    • Muted: #E0E0E0
  • Typography:
    • Headings: Nunito — Bold, generous tracking, sentence case
    • Body: DM Sans
    • Scale: 1.25 modular, 48/32/24/18/16
  • Shape Language: Big, rounded radii on cards and inputs, pill-shaped buttons.
  • Layout: Flexible grid with soft-offset shadow cards, generous spacing.
  • Motion: Playful micro-interactions, springy transitions, hover states.

7. Signature Design Concept

The landing page features a full-width hero section with a large illustrated scene of students interacting with an AI tutor. The primary CTA button is in a warm red-orange, and the layout includes layered elements for depth. Rounded pill-shaped buttons and feature cards with playful animations enhance the user experience.

Page 7 of 8

8. Interaction Model & Motion Direction

  • Interaction Model: Animated
  • Motion Tempo: Expressive
  • Hero Dimensionality: Layered_2d

Landing Hero Motion Brief: The hero section features an illustrated scene of students engaging with an AI tutor. Upon page load, elements animate into view with springy transitions. Hover effects on buttons and feature cards add interactivity. In reduced-motion mode, animations are minimized to simple fades and slides.

9. Non-Functional Requirements

  • Security: Implement secure authentication, server-side API calls, input validation, rate limiting, and secure database access. (explicit)
  • Performance: Ensure responsive design and fast load times. (basic_default)
  • Scalability: Design the architecture to be modular and easily extendable. (explicit)

10. Tech Stack

  • Frontend: Next.js, TypeScript, Tailwind CSS, shadcn/ui
  • Backend: Server-side API routes
  • Database: PostgreSQL
  • AI Integration: AI provider abstraction
  • Security: Secure authentication, environment variables for secrets
Page 8 of 8

11. Assumptions and Constraints

  • The platform will initially support English, Hindi, and Telugu languages.
  • The AI explanations will be tailored to the student's selected education level.
  • The architecture will remain modular to allow future integration with different AI providers.

12. Glossary

  • AI Tutor: The feature that provides AI-generated explanations to students.
  • NEET: National Eligibility cum Entrance Test, an entrance examination in India for students who wish to study undergraduate medical courses.
  • CTA: Call to Action, a prompt on a website that tells the user to take some specified action.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing Page: View landing page
Sign Up: Create account
Login: Log in
Forgot Password: Reset password
Onboarding: Select education level
Onboarding: Select preferred language
Student Dashboard: View welcome message
Student Dashboard: Enter question or topic
AI Tutor: Submit question to AI
AI Result Page: View explanation
AI Result Page: Request simpler explanation
AI Result Page: Request detailed explanation
AI Result Page: Request another example
Conversation History: View past questions
Conversation History: Reopen explanation
Logout: Log out

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing Page: View landing page
Sign Up: Create account
Login: Log in
Forgot Password: Reset password
Onboarding: Select education level
Onboarding: Select preferred language
Student Dashboard: View welcome message
Student Dashboard: Enter question or topic
AI Tutor: Submit question to AI
AI Result Page: View explanation
AI Result Page: Request simpler explanation
AI Result Page: Request detailed explanation
AI Result Page: Request another example
Conversation History: View past questions
Conversation History: Reopen explanation
Logout: Log out