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

Krishna Gaur — Sun, 04 Oct 2026 18:52:14 +0000

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

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:

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.
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.
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.
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.

DEV Community: Krishna Gaur

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

What I Built

Demo

Code

KrishnaGaur12 / HFDEV1

What I Built

How I Built It

Why Does Open Innovation Matter?