STUDAYS AI

Inspiration

Studying for major exams is overwhelming — students juggle scattered notes, disorganized schedules, and generic practice questions that don't adapt to what they actually need to review. We wanted to build one workspace where an AI agent, a study planner, and interactive exam practice all live together instead of being spread across five different apps.

What it does

STUDAYS is an all-in-one AI study companion:

Dashboard — a live overview of the day: study hours, focus sessions, completed tasks, and a visual schedule. AI Agent — a chat-based assistant students can ask to explain a lesson, summarize a topic, or generate a mind map on the spot. Interactive Exam Workspace — students can review a full exam in a preview mode, or switch to a distraction-free Focus Mode with a countdown timer that walks them through one question at a time. Answers are entered through inputs designed specifically for exams: auto-growing text boxes for written answers (so a new line never breaks the page layout) and click-to-mark boxes for multiple choice / true-false questions. Weekly Schedule & Pomodoro Timer — for planning and executing focused study sessions. How we built it Frontend: React (Vite) + Tailwind CSS + Framer Motion for animation State: Zustand AI: Google Gemini API (@google/genai), called directly from the client Mind maps / canvas: React Flow (@xyflow/react) Design system: a custom "liquid glass" component library (blurred glass panels, gradient borders, ambient glow) built from scratch in CSS to give the whole app a consistent, cinematic look, paired with a video-crossfade background that changes per section.

We designed the layout around two distinct modes: a cinematic "background" mode for planning/dashboard screens, and a solid, distraction-free "focus" mode for the AI workspace and exam practice — switching automatically based on what the student is doing.

Challenges we ran into Balancing two visual languages in one app. Our AI workspace was originally built as a more utilitarian, IDE-style interface, while the rest of the app uses a soft, glassy, animated aesthetic. Reconciling them without a full rewrite — under serious time pressure — meant deliberately splitting the app into two consistent "modes" instead of forcing one visual style everywhere. Building exam inputs that can't break. A normal can overflow, clip, or misalign a exam sheet as a student types. We built a self-resizing input that grows with content and never disrupts the surrounding layout, plus click-based answer boxes for multiple-choice questions so free text can never break structured answers. Environment configuration under deadline pressure. Late in the hackathon we discovered our Gemini API key wasn't loaded in the environment, which silently put the agent into a fallback/demo response mode. Diagnosing that a missing .env value — not the API integration code — was the root cause, and getting live responses working again, came down to the wire. What we learned Keep environment/config as a first-class thing to verify early and often — a single empty .env variable can look exactly like a "broken AI integration" until you check the right layer. Consistent design systems matter as much for judging as functionality — mismatched UI between sections reads as "unfinished" even when the underlying logic works. When time is short, it's better to clearly separate two coherent experiences than to half-blend them into one inconsistent one. What's next Full AI-powered exam generation directly from an uploaded photo of a real exam paper (image → structured, interactive HTML exam) Automatic answer grading, where the agent reads a student's written response and gives feedback Localization so students anywhere in the world can select their own curriculum/grade level instead of a single fixed system</p>