The latest articles on DEV Community by Harsh Kaushik (@harshkaushik494). https://dev.to/harshkaushik494 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F99mvlsfu5tfj9m7ku25d.png https://dev.to/harshkaushik494 en Harsh Kaushik Sat, 03 Oct 2026 19:25:47 +0000 https://dev.to/harshkaushik494/study-buddy-411d https://dev.to/harshkaushik494/study-buddy-411d <p><em>This is a submission for the <a href="https://dev.to/challenges/hacktoberfest-weekend-2026-10-01">Hacktoberfest Weekend Challenge: Build for a Friend</a></em></p> <h1> ⚡ StudyBuddy: An Aesthetic All-in-One Study Companion Built for My Best Friend </h1> <h2> What I Built </h2> <p>Every exam season, I watch my friend struggle with digital clutter and burnout. Like many students, they were juggling three or four fragmented tools at once:</p> <ul> <li>A separate tab for a Pomodoro timer (filled with banner ads and subscription popups),</li> <li>A clunky flashcard app with paywalled decks, and</li> <li>A rigid quiz tool that didn't allow quick question customization without paying for "premium tiers."</li> </ul> <p>This constant context-switching caused cognitive overload and drained focus right before critical study sessions.</p> <p>To solve this, I built <strong>StudyBuddy</strong> — a streamlined, distraction-free study companion designed to bring all their study workflows under one elegant, calm roof. It is built around a lightweight, zero-bloat <strong>3-file architecture</strong> (<code>app.py</code>, <code>index.html</code>, <code>style.css</code>) that anyone can run locally in seconds.</p> <h3> 🌟 Core Capabilities </h3> <ol> <li> <p><strong>⏱️ Pomodoro Focus Timer</strong>:</p> <ul> <li>Smooth circular SVG progress ring with real-time countdown.</li> <li>3 focused modes: <strong>Focus (25m)</strong>, <strong>Short Break (5m)</strong>, and <strong>Long Break (15m)</strong>.</li> <li>Synthesized Web Audio API bell chimes that sound without needing external audio downloads.</li> <li>Session cycle tracking (<em>Cycle 1 of 4</em>) and daily focus minute counters.</li> </ul> </li> <li> <p><strong>🗂️ Interactive 3D Flashcards</strong>:</p> <ul> <li>Realistic 3D card-flip animations on click or by pressing Space.</li> <li>Custom deck creator to organize study materials by subject.</li> <li>Spaced-repetition rating buttons (<strong>Need Practice</strong> / <strong>Mastered</strong>) to review tricky concepts.</li> <li> <strong>⚡ One-Click Quiz Generator</strong>: Converts any flashcard deck into an interactive multiple-choice quiz instantly!</li> </ul> </li> <li> <p><strong>📝 Customizable Quiz System ("Where You Can Set It")</strong>:</p> <ul> <li>Lets students create their own custom quizzes tailored to their exact exam syllabus.</li> <li>Full question builder: Question prompt, 4 choices, radio selector for the correct answer, and an optional explanation note.</li> <li>Instant visual feedback (green glow on correct answer, red highlight with shake on incorrect choice) and instant rationale display.</li> <li>Results scorecard with percentage score and answer breakdown review.</li> </ul> </li> <li> <p><strong>🎨 Calming Aesthetic Design</strong>:</p> <ul> <li>Minimalist glassmorphic dark mode (plus toggleable crisp light mode).</li> <li>Zero external library dependencies — works offline and saves all progress directly to browser <code>localStorage</code>.</li> </ul> </li> </ol> <h2> Demo </h2> <ul> <li>** Live Demo**:<div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__body flex items-center justify-between"> <a href="https://harsh4944.github.io/studybuddy/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"> <span class="mr-2">harsh4944.github.io</span> </a> </div> </div> </div> </li> </ul> <h3> 📸 Application Preview </h3> <ul> <li> <strong>Pomodoro View</strong>: Circular SVG timer with glowing accent progress, customizable intervals, and session counts.</li> <li> <strong>Flashcard View</strong>: 3D card scene with smooth perspective flips, keyboard shortcuts, and deck switcher.</li> <li> <strong>Quiz Maker View</strong>: Clean question builder with instant feedback checks and scorecard summaries.</li> </ul> <h2> Code </h2> <p>The complete source code is open source and hosted on GitHub:</p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/harsh4944" rel="noopener noreferrer"> harsh4944 </a> / <a href="https://github.com/harsh4944/studybuddy" rel="noopener noreferrer"> studybuddy </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><p><em>This is a submission for the <a href="https://dev.to/challenges/hacktoberfest-weekend-2026-10-01" rel="nofollow">Hacktoberfest Weekend Challenge: Build for a Friend</a></em></p> <div class="markdown-heading"> <h1 class="heading-element">⚡ StudyBuddy: An Aesthetic All-in-One Study Companion Built for My Best Friend</h1> </div> <div class="markdown-heading"> <h2 class="heading-element">What I Built</h2> </div> <p>Every exam season, I watch my friend struggle with digital clutter and burnout. Like many students, they were juggling three or four fragmented tools at once:</p> <ul> <li>A separate tab for a Pomodoro timer (filled with banner ads and subscription popups),</li> <li>A clunky flashcard app with paywalled decks, and</li> <li>A rigid quiz tool that didn't allow quick question customization without paying for "premium tiers."</li> </ul> <p>This constant context-switching caused cognitive overload and drained focus right before critical study sessions.</p> <p>To solve this, I built <strong>StudyBuddy</strong> — a streamlined, distraction-free study companion designed to bring all their study workflows under one elegant, calm roof. It is built around a lightweight, zero-bloat <strong>3-file architecture</strong> (<code>app.py</code>, <code>index.html</code>, <code>style.css</code>) that anyone can run locally…</p></div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/harsh4944/studybuddy" rel="noopener noreferrer">View on GitHub</a></div> </div> <p>👉 <strong>Direct Repository Link</strong>: <a href="https://github.com/harsh4944/studybuddy" rel="noopener noreferrer">https://github.com/harsh4944/studybuddy</a></p> <h3> Minimalist 3-File Architecture </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>studybuddy/ ├── app.py # Python Flask backend (serves app &amp; launches browser) ├── index.html # Responsive UI structure &amp; self-contained client logic ├── style.css # Complete modern CSS design system &amp; animations └── README.md # Comprehensive documentation &amp; setup instructions </code></pre> </div> <h2> How I Built It </h2> <p>To build StudyBuddy rapidly without sacrificing visual quality or performance, I paired with the <strong>Google Antigravity IDE</strong> autonomous coding agent:</p> <ol> <li> <p><strong>Rapid Architecture Iteration</strong>:</p> <ul> <li>We initially explored a multi-module client-side setup and then refactored it into an ultra-clean <strong>3-file setup</strong> (<code>app.py</code>, <code>index.html</code>, <code>style.css</code>) to ensure maximum simplicity, readability, and zero installation friction for my friend.</li> </ul> </li> <li> <p><strong>Zero-Dependency Web Audio Engineering</strong>:</p> <ul> <li>Instead of linking unreliable external <code>.mp3</code> files that fail offline or hit CORS issues, we leveraged the browser's native <strong>Web Audio API</strong> to synthesize harmonic chime frequencies (C5, E5, G5, C6) and soft tactile clicks purely through code oscillators.</li> </ul> </li> <li> <p><strong>Pure Vanilla CSS Design System</strong>:</p> <ul> <li>Handcrafted custom CSS variables, glassmorphic backdrop blurs, 3D perspective transforms (<code>rotateY(180deg)</code> with <code>transform-style: preserve-3d</code>), and fluid CSS Grid/Flexbox layouts without heavy CSS frameworks like Tailwind or Bootstrap.</li> </ul> </li> <li> <p><strong>Python Flask Backend</strong>:</p> <ul> <li>Built a lightweight server in <code>app.py</code> that serves the application, binds to <code>0.0.0.0:5000</code>, and includes an automatic browser launcher thread alongside a built-in fallback to Python’s <code>http.server</code> if Flask is absent.</li> </ul> </li> </ol> <h2> Why Does Open Innovation Matter? </h2> <p>Education is the ultimate equalizer, but modern educational tools are increasingly plagued by aggressive monetization, paywalls on flashcard decks, and data-harvesting trackers.</p> <p>Open innovation matters because:</p> <ul> <li> <strong>Privacy &amp; Focus</strong>: A study app should respect a student’s attention. By keeping StudyBuddy open source and offline-first, no personal data, study habits, or test scores ever leave the student’s machine.</li> <li> <strong>Full Customizability</strong>: No two learners study the same way. An open codebase means my friend (or any student worldwide) can fork the repository, tweak timer durations, craft custom quiz styles, and adapt the tool to their unique learning needs.</li> <li> <strong>Community Empowerment</strong>: Open source empowers developers to share educational resources freely, helping friends, classmates, and study groups grow together.</li> </ul> <h2> My Agent Session </h2> <p>This project was built with the assistance of the <strong>Google Antigravity IDE</strong>:</p> <ul> <li> <strong>Pair Programming</strong>: We brainstormed the user flow, designed the Pomodoro and Quiz state machines, refined the 3D card animation physics, and verified HTTP endpoints via automated Python test harnesses.</li> <li> <strong>Continuous Refactoring</strong>: When simplifying the project layout, the agent automatically removed intermediate scaffold files and unified the codebase into 3 clean, maintainable files.</li> </ul> <h2> Prize Categories </h2> <ul> <li><strong>Build for a Friend</strong></li> <li><strong>Most Useful Hack</strong></li> <li><strong>Best Overall Project</strong></li> </ul> <p><em>Made with ❤️ for students everywhere. Happy Hacktoberfest!</em></p> devchallenge weekendchallenge hf26challenge