This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend
StudyBuddy is a browser-based productivity + learning app I built for my friend — a college student who was juggling exam prep across three different tools: a phone timer for Pomodoro, a notes app for flashcards, and a Google Form quiz a teacher shared. Every session, they'd context-switch between apps, lose focus, and end up doomscrolling between switches.
StudyBuddy collapses all three into one beautiful, distraction-free dark-mode app that lives entirely in the browser — no login, no account, no backend.
⏱️ Pomodoro Timer Animated circular ring timer with a gradient stroke that depletes in real time Three modes: Focus, Short Break, Long Break — fully configurable Session dot tracker (dots turn green as sessions complete) Sound alerts via the Web Audio API — no external files Auto-start next session toggle Keyboard shortcuts: Space to start/pause, R to reset
🃏 Flashcards Create cards with a question (front) and answer (back) Silky smooth 3D flip animation on click or Space Navigate with arrow buttons or ← → keys Optional deck/tag label per card After flipping: rate each card as Hard / OK / Easy for self-paced spaced repetition Full card list with per-card delete; all data persists via localStorage
🧠 Quiz Mode Build custom multiple-choice questions (up to 4 options each) Mark the correct answer with a ✓ toggle right in the builder Per-question countdown timer (configurable 5–300 s) with urgent pulsing at ≤5 s Shuffle toggle for randomised question order Live score counter during the quiz Results screen: animated progress bar, score %, emoji feedback, and a full per-question review showing what you got wrong and what the right answer was
Friends who were burning hours every week just managing study tools. Now they open one tab, set a 25-minute Pomodoro, reviews flashcards during the break, and takes a self-quiz at the end. Zero friction, zero context switching.
To run locally: clone the repo and open index.html directly in your browser — no build step, no npm install, no server required.
The project is vanilla HTML + CSS + JS — three files, zero dependencies, zero build tooling.
| File | Role | |------|------| | index.html | Semantic structure, ARIA labels, all three tab panels | | style.css | Dark glassmorphism design system — custom tokens, animations, responsive grid | | app.js | All logic: timer engine, flashcard state, quiz engine, localStorage persistence |
Circular timer ring — pure SVG with a stroke-dashoffset that ticks down in sync with setInterval:
3D card flip — CSS perspective + rotateY with backface-visibility: hidden, zero JS for the animation:
Sound alerts with no audio files — Web Audio API oscillator, generated on the fly:
I built StudyBuddy with Antigravity IDE — an open agentic coding assistant powered by Google DeepMind's Gemini models. The entire session was a dialogue: I described features, the agent scaffolded the HTML, generated the CSS design system, wrote the JavaScript logic modules, and I reviewed and iterated in real time.
The workflow was: Described the three feature areas — the agent planned the tab structure and data model Design pass — prompted for a dark glassmorphism aesthetic; the agent authored the full CSS custom-property token system Feature implementation — timer engine, flashcard CRUD, quiz state machine — all built iteratively with me reviewing and adjusting Polish — fixed layout gaps (the Pomodoro right-side empty space issue), resolved CSS linter warnings (appearance vendor prefix compatibility), tuned responsive breakpoints
The agent also caught and fixed a real CSS issue mid-session: -moz-appearance: textfield without the standard appearance: textfield companion — a cross-browser compatibility gap that linters flag.
Open-source AI stack: 🤖 Antigravity IDE — agentic coding assistant (Google DeepMind / Gemini) 🌐 Google Fonts (Outfit typeface) — the only external resource 🔊 Web Audio API — browser-native, no library
StudyBuddy is intentionally dependency-free. No React, no bundler, no CDN-hosted UI kit. That was only possible because an open AI agent understood my constraints ("pure HTML/CSS/JS, runs by opening a file") and worked within them — rather than defaulting to whatever popular framework its training data skewed toward.