DEV Community

Krishna Gaur
Krishna Gaur

Posted on

StudyFlow — A Study App Built for My Friend Who Can't Focus

#hacktoberfest #opensource #javascript #productivity

Hacktoberfest: Maintainer Spotlight

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

I built StudyFlow — a clean, all-in-one study app with three core tools:

  • Pomodoro Timer — A customizable focus timer with circular ring animation, configurable work/short-break/long-break durations, automatic round cycling, and an audio notification when each session ends.
  • Flash Cards — Create cards with a front (question/term) and back (answer/definition), flip them with a satisfying 3D animation, and navigate through your deck.
  • Quiz Mode — Build multiple-choice quizzes (A–D options), take them with instant correct/wrong feedback, and see your score visualized in an animated results ring.

I built it for my friend who's preparing for exams and struggles to stay focused. They were juggling between a separate Pomodoro app, physical flash cards, and a quiz website — all disconnected. StudyFlow puts everything in one place so they can set a focus timer, review flash cards during breaks, and test themselves with quizzes — all without switching tabs.

Demo

🔗 Live Demo: https://krishnagaur12.github.io/HFDEV1/

The app features:

  • A sleek dark theme with teal and coral accents
  • Glassmorphism UI with smooth micro-animations
  • Fully responsive design that works on mobile and desktop
  • No sign-up required — just open and start studying

Code

GitHub logo KrishnaGaur12 / HFDEV1

title StudyFlow — A Study App Built for My Friend Who Can't Focus
published false
tags hacktoberfest, opensource, javascript, productivity

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

I built StudyFlow — a clean, all-in-one study app with three core tools:

  • Pomodoro Timer — A customizable focus timer with circular ring animation, configurable work/short-break/long-break durations, automatic round cycling, and an audio notification when each session ends.
  • Flash Cards — Create cards with a front (question/term) and back (answer/definition), flip them with a satisfying 3D animation, and navigate through your deck.
  • Quiz Mode — Build multiple-choice quizzes (A–D options), take them with instant correct/wrong feedback, and see your score visualized in an animated results ring.

I built it for my friend who's preparing for exams and struggles to stay focused. They were juggling between a separate Pomodoro app, physical flash cards, and a…

View on GitHub

The project is intentionally simple — three files, zero dependencies, no build step:

File Purpose
index.html Semantic HTML structure with all three tabs
style.css Complete design system — dark theme, glassmorphism, animations
app.js All interactive logic — timer, cards, quiz engine

How I Built It

I used Google Gemini (an open-weight AI model) through an agentic coding assistant to pair-program the entire app. The AI helped with:

  • Architecture decisions — structuring the single-page app with tab navigation and state management
  • Design system — creating a cohesive teal/coral dark theme with CSS custom properties, glassmorphism cards, and micro-animations
  • Timer logic — implementing the Pomodoro cycle with SVG ring progress, auto-mode switching, and Web Audio API beep notifications
  • Flash card flip — CSS 3D transforms with preserve-3d and backface-visibility for a smooth card-flip effect
  • Quiz engine — question bank management, answer validation with visual feedback, and an animated SVG score ring

The entire project is built with vanilla HTML, CSS, and JavaScript — no frameworks, no npm packages, no build tools. This was a deliberate choice to keep it lightweight and instantly deployable.

Why Does Open Innovation Matter?

Open innovation made this project possible in a meaningful way:

  1. Transparency in the AI workflow — Using an open AI model meant I could understand and verify every line of code it suggested. There's no black box — I could see the reasoning and adjust the approach in real time.

  2. Zero-cost, zero-barrier deployment — The app is pure static HTML/CSS/JS hosted on GitHub Pages. No API keys, no server costs, no vendor lock-in. My friend can fork it, modify it, and host their own version for free.

  3. Community-driven improvement — Because both the code and the AI tools are open, anyone can contribute. A closed API would have meant proprietary code generation with usage limits, making it harder to iterate freely during a weekend hackathon.

  4. Reproducibility — Another developer can take the same open model, the same prompts, and build on top of this. Open innovation means the knowledge compounds — it doesn't stay locked behind a paywall.

Open source isn't just about free software — it's about giving people like my friend the tools to learn, customize, and own their study experience.

Top comments (0)