Quartz

Inspiration

One in six people live with a significant disability, and for neurodivergent students, studying often feels like fighting two battles at once: the content AND the environment. ADHD students face apps with too many choices and no clear next action. Dyslexic learners encounter walls of text with poor formatting. Autistic students deal with unpredictable interfaces. We started asking: what if the study tool adapted to the learner instead of forcing the learner to adapt?We also realized something bigger. Even students without a diagnosis struggle with the same outcomes: distraction and forgetting. So we kept it neurodivergent-first and made it universal. When you design for the margins, you build better tools for everyone.

What it does

Quartz is a one-stop study system that adapts to how each student's brain works. During onboarding, students select support modes (ADHD, Dyslexia, Autism, Sensory Sensitivity, Dyscalculia, Motor Difficulties, Chronic Fatigue), and the entire experience transforms: UI spacing, font choices, animation behavior, task limits, AI tutor communication style, and more. Core features include:

Focus Sessions: Pomodoro timer with a visual coffee cup that empties as time passes Smart Library: Chapters with notes, flashcards, and practice questions tagged to skills AI Tutor: Adapts its responses based on active modes (short sentences for dyslexia, action items for ADHD) Quartz Road: Enter your syllabus and exam dates, get a generated study roadmap Exit Tickets: End-of-session checks so students know what to revise Interactive Labs: Visual, hands-on learning modules (starting with chemistry)

How we built it

We used Lovable for rapid prototyping, which let us move fast on the UI. The frontend is React 18 with TypeScript, styled with Tailwind CSS and shadcn/ui components. Framer Motion handles animations (disabled automatically in sensory-safe mode). The backend runs on Supabase: authentication, PostgreSQL database, and Edge Functions. The AI tutor uses Google Gemini 2.5 Flash via Lovable's AI Gateway, with system prompts that dynamically adapt based on the user's selected modes. The real work was the system design: a central ModeContext that computes an "experience profile" from user selections, cascading one toggle into dozens of UI and AI changes. We also built scheduling logic for Quartz Road, skill tagging for recommendations, progress analytics, and focus-state tracking.

Challenges we ran into

Making adaptations actually visible. Early on, toggling a mode changed internal state but users couldn't SEE the difference. We had to implement dramatic CSS changes (font size, spacing, colors, animation removal) so the adaptation felt real and immediate. AI prompt engineering. Getting Gemini to consistently follow mode-specific instructions (short sentences, no idioms, step-by-step math) took iteration. We ended up with explicit, labeled sections in the system prompt for each mode. Balancing complexity. Students can select multiple modes simultaneously. Computing the right experience when someone has ADHD + Dyslexia + Low Energy required careful logic to avoid conflicts. Time pressure. Building a full adaptive system, curriculum content, AI integration, and interactive modules in hackathon timeframe meant ruthless prioritization.

Accomplishments that we're proud of

The interactive chemistry simulator. Instead of just reading about chemical bonding, students can visually build molecules, see electron arrangements, and understand reactions by doing. It's experiential learning that aligns with NEP 2020's push away from rote memorization. This is our proof of concept that the same approach can scale across subjects wherever visualization improves understanding.

What we learned

Design for the margins first. Features we built for neurodivergent students (clear next actions, reduced choices, calm UI) turned out to be things ALL students wanted. State management is everything. The ModeContext architecture made or broke the project. Getting that abstraction right early saved us from spaghetti code later. AI needs constraints. Gemini is powerful but needs explicit, structured prompts to behave consistently across different user modes. Show, don't tell. Judges and users understand the product when they SEE the mode toggle change the UI live. A demo is worth a thousand slides.

What's next for Quartz

Google Calendar integration: Sync Quartz Road schedules to students' calendars Parent/teacher dashboard: Progress monitoring for guardians and educators Class mode: Teachers can assign tasks and track class-wide analytics More interactive modules: Expand visual labs beyond chemistry to physics, biology, math Offline mode: Service workers for studying without internet Voice input: For students with motor difficulties Multi-language support: Starting with Hindi for Indian market reach

Built With

• 2.5
• date-fns
• edge
• flash
• functions)
• gemini
• google
• lovable
• lucide
• postgresql
• query
• react
• react-18-typescript-vite-tailwind-css-shadcn/ui-framer-motion-supabase-(auth
• router
• tanstack