documindrag

byRilvana

ROLE You are a senior full-stack engineer and product designer. Build a complete, production-quality website called "DocuMindRAG". PRODUCT VISION DocuMindRAG is a calm, distraction-free study workspace for students. It turns any study material (files or links) into summaries, visual explanations, quizzes, and relaxing brain breaks, so students can study in peace and stay focused. The feeling should be a quiet study desk, not a busy dashboard. TECH STACK - Frontend: React + Vite (JavaScript), plain CSS with design tokens (CSS variables), Three.js via @react-three/fiber and @react-three/drei for 3D, Framer Motion for UI transitions, Recharts for charts, Mermaid for diagrams - Backend: Python FastAPI, SQLite, Groq API for AI (key loaded from .env, never exposed to the frontend) - Retrieval: RAG pipeline (chunk uploaded content, embed, retrieve relevant chunks, answer with source references) - Fully responsive (desktop, tablet, phone) CORE FEATURES 1. Upload and library - Drag-and-drop upload for PDF, DOCX, PPTX, TXT, MD, and images (OCR for images/scans) - Multiple files at once, with progress bars and clear error messages - A file library sidebar where the student can select one or many files as the active study context 2. Link summarizer - Paste any link: YouTube, articles, blogs, Reddit, X/Twitter, Instagram, LinkedIn, and so on - Extract the content (YouTube transcripts, page text) and produce: a short summary, key points, key terms, and a "explain like I'm new to this" version - If a platform blocks extraction, show a friendly fallback: "We couldn't read this link. Paste the text or transcript instead." - Save every summary to the library like a normal file 3. Visual learning (charts, diagrams, graphs) - For every summary, automatically generate the best-fit visuals: concept maps, flowcharts, timelines, comparison tables, and charts for any numeric data - Each visual has a plain-language caption - Students can download visuals as PNG 4. Quiz engine - Generate a minimum of 15 questions per quiz (default 20) from the selected files or links - Mix of types: multiple choice, true/false, fill-in-the-blank, and short answer - Difficulty selector (easy, medium, hard) and question-count selector (15, 20, 30) - Instant feedback with explanations and the source passage for each answer - Results screen with a score ring, weak-topic breakdown (chart), and a "retry only the ones I missed" button - No time pressure by default (optional timer toggle) 5. Mind games and brain breaks (to relax between study sessions) - Guided breathing bubble (inhale/hold/exhale animation) - Memory card match - Sliding puzzle - Zen sand-draw or bubble-pop - Simple word-scramble using the student's own key terms from their notes - Every game is short (1 to 3 minutes), has no harsh sounds, no leaderboards, and no pressure 6. Ask your notes (chat) - Chat with the uploaded material, with streaming answers, markdown rendering, and source chips showing where each answer came from 7. Focus mode - One-click focus mode that hides everything except the current task - Optional Pomodoro timer (25/5) with a gentle chime - Optional ambient sounds (rain, soft piano, white noise) with a volume slider, off by default 3D MOTION AND UI DIRECTION - The welcome page has a slow, calm 3D scene: softly floating books, notes, and geometric shapes drifting in a warm-lit space, with gentle mouse-parallax depth - Cards use subtle 3D tilt on hover; page transitions use soft depth and fade (no fast or flashy motion) - Motion must feel slow and soothing (ease-in-out, 400 to 800 ms). Nothing spins fast, flashes, or shakes - Respect "prefers-reduced-motion": disable 3D and animations and show a static version - Keep performance high: lazy-load the 3D scene, cap the frame rate, and fall back to a 2D gradient on low-power devices - The 3D is decoration only. The study tools (upload, quiz, chat) must always be fast and 2D DESIGN SYSTEM - Mood: calm, warm, and focused, like a quiet library - Palette: warm cream backgrounds (#F4F1EA, #FBF9F4), sage green primary (#7FA99B, hover #5B8C7D), mist blue accent (#8FB3CC), deep slate text (#2F3E46), muted text (#6B7C85), soft sand highlights (#F3E8D2). No neon, no pure black, no pure white - Typography: Fraunces (italic display for the brand and headings), Manrope (interface text) - Rounded corners (12 to 20 px), soft slate-tinted shadows, generous spacing, low visual noise - Optional dark "night study" theme using deep slate and muted sage (never pure black) - All colors and spacing defined as CSS variables - Accessibility: WCAG AA contrast, visible keyboard focus rings, alt text, screen-reader labels PAGES AND FLOW Welcome page (3D hero, 3 feature cards, "Start studying" button), then the main app with tabs: Library, Chat, Summaries, Quiz, Mind Games. A persistent left sidebar holds the file list, and there is a mobile drawer version. BACKEND API (REST) - POST /upload, GET /files, DELETE /files/{id} - POST /link (ingest and summarize a URL) - POST /summarize, POST /visuals - POST /quiz/generate (with count, difficulty, type mix), POST /quiz/submit - POST /chat (streaming) - Enable CORS for the frontend origin. Validate file types and size. Handle errors with clear messages QUALITY BAR - Clean, commented, modular code with a clear folder structure - Loading skeletons, empty states, and error states for every screen - No hardcoded secrets; provide a .env.example - Include a README with setup steps for both frontend and backend (Windows PowerShell commands) DELIVERABLES Give the full file tree first, then every file's complete code, then run instructions. Build it step by step: start with the design system and welcome page, then the upload and library, then link summaries, then quiz, then mind games, then visuals, then polish.