Sridevi Asara

Posted on Oct 10

STUDY BUDDY

#devchallenge #weekendchallenge #hf26challenge

🦉 StudyBuddy: A Gentle, Distraction-Free Study Companion

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

💡 What I Built

I built StudyBuddy, a minimalist, privacy-focused, and customizable web application that brings three essential study tools into one cohesive experience:

Customizable Pomodoro Timer: A circular progress indicator, adjustable study sessions, and gentle synthesized audio cues.
Interactive 3D Flashcards: Animated flashcards with self-assessed learning progress, allowing users to mark cards as Mastered or Needs Review.
Instant Quiz Arena: Generates multiple-choice quizzes from flashcard decks or allows users to create custom quizzes.

StudyBuddy is designed to make studying feel more organized, focused, and enjoyable without requiring users to switch between multiple applications.

💖 Who I Built It For and the Problem It Solves

I built StudyBuddy for my friend Alex, who is preparing for demanding certification exams while managing ADHD and study-related anxiety.

While studying, Alex faced two major challenges:

Tab overload and context switching: Using separate applications for timers, flashcards, and quizzes interrupted concentration and made studying feel fragmented.
Distracting features and restrictive monetization: Many study tools include unnecessary interface elements, subscription restrictions, tracking mechanisms, or notifications that can interrupt a focused study session.

Alex needed something simple, calming, and customizable: one place to manage study intervals, practice active recall, test knowledge, and receive gentle encouragement from a friendly owl companion.

That inspired StudyBuddy: a lightweight study companion designed around focus, simplicity, and user control.

🚀 Demo and Source Code

GitHub Repository: 25b05a1201/studybuddy
Live Demo: https://25b05a1201.github.io/studybuddy/(https://25b05a1201.github.io/studybuddy/)
Local Setup: Open index.html in a browser or run npm start using the included Node.js server.
Video Preview: Add a demo GIF or video walkthrough link if available.
AI Agent Session: Add the conversation transcript or agent session link if available.

Key Features

⏱️ 1. Customizable Pomodoro Timer

Circular SVG countdown with visual progress tracking.
Quick +1m, -1m, and +5m adjustments.
Customizable study-session targets.
Gentle sound cues generated using the Web Audio API.

🗂️ 2. Interactive Flashcards

Animated 3D card-flipping effects.
Self-assessed learning progress using Mastered and Needs Review.
Keyboard shortcuts for a smoother study experience:
- Space — Flip a flashcard.
- Arrow keys — Navigate between cards.
- M — Mark a card as mastered.
- R — Mark a card for review.

📝 3. Instant Quiz Arena

Generate multiple-choice questions from flashcard decks.
Create custom quizzes.
Randomize answer options and select distractors from other cards in the deck.
Review answers and quiz results after completion.

🎨 4. Personalized Study Experience

Five color palettes: Indigo, Sunset, Emerald, Rose, and Slate.
One-click dark mode.
Customizable settings for a more comfortable study environment.

🔒 5. Local-First Data Storage

Save flashcard decks, study statistics, daily streaks, and settings in browser local storage.
Export and import data as JSON.
Run the application without requiring a backend service for its core study features.

🛠️ How I Built It

Tech Stack

HTML5: Semantic page structure and native dialog elements.
CSS3: Responsive layouts, CSS variables, 3D animations, and dark mode.
Modern JavaScript (ES2022): Application state, timer logic, flashcards, and quiz generation.
Web Audio API: Synthesized audio cues without external sound files.
SVG: Circular timer progress visualization.
Browser Local Storage: Persistent local data and preferences.
Node.js: A lightweight local static server with no additional server dependencies.

The application is designed to run without a frontend framework, bundler, or third-party tracking scripts.

Project Structure

studybuddy/
├── index.html    # Main interface and native dialog modals
├── styles.css    # Responsive styling, animations, and themes
├── app.js        # Timer, application state, flashcards, and quizzes
├── server.js     # Lightweight local Node.js server
├── package.json  # Project metadata and npm scripts
└── README.md     # Setup instructions and user documentation

Technical Highlights

1. Synthesized Audio Using the Web Audio API

Rather than loading external audio files, StudyBuddy generates its sound cues dynamically with the browser's Web Audio API.

The following simplified example demonstrates the oscillator and gain-envelope approach used to create a gentle bell-like sound:

const SoundEngine = {
  ctx: null,

  init() {
    if (!this.ctx) {
      const AudioContextClass =
        window.AudioContext || window.webkitAudioContext;

      if (AudioContextClass) {
        this.ctx = new AudioContextClass();
      }
    }
  },

  play(style = "bell") {
    if (!AppState.settings.soundEnabled) return;

    this.init();

    if (!this.ctx) return;

    const now = this.ctx.currentTime;
    const osc = this.ctx.createOscillator();
    const gain = this.ctx.createGain();

    osc.type = "sine";
    osc.frequency.setValueAtTime(528, now);
    osc.frequency.exponentialRampToValueAtTime(
      520,
      now + 1.8
    );

    gain.gain.setValueAtTime(0.4, now);
    gain.gain.exponentialRampToValueAtTime(
      0.0001,
      now + 1.8
    );

    osc.connect(gain);
    gain.connect(this.ctx.destination);

    osc.start(now);
    osc.stop(now + 1.8);
  }
};

This example illustrates the core synthesis technique; the complete implementation is available in the repository.

2. Dynamic Flashcard-to-Quiz Conversion

StudyBuddy can transform flashcards into multiple-choice questions by using the front of a card as the question and its back as the correct answer. Other distinct answers from the deck are sampled as distractors.

const questions = selectedCards.map((card) => {
  const correctAns = card.back;

  const distractors = deck.cards
    .filter(
      (c) =>
        c.id !== card.id &&
        c.back !== correctAns
    )
    .map((c) => c.back)
    .sort(() => Math.random() - 0.5)
    .slice(0, 3);

  const options = [
    correctAns,
    ...distractors
  ].sort(() => Math.random() - 0.5);

  return {
    question: `Question: ${card.front}`,
    options,
    correctIndex: options.indexOf(correctAns),
    explanation: `Answer: ${correctAns}`
  };
});

This is a rule-based quiz-generation approach, not an AI-powered question-generation model. The number of available distractors depends on the content of the selected deck.

🤝 Development with AI Pair Programming

I developed and refined StudyBuddy with assistance from Antigravity (Gemini 3.8) as an AI pair-programming tool.

The development process involved:

Exploring study workflows that reduce unnecessary interface complexity.
Refining the circular SVG timer's progress calculations using stroke-dasharray and stroke-dashoffset.
Designing keyboard navigation for a smoother, mouse-free study experience.
Considering edge cases involving deck deletion, quiz scoring, and browser audio behavior.

The AI assistant supported the development process; the application's described quiz-generation logic is rule-based.

🌍 Why Does Open Innovation Matter?

1. Privacy and Autonomy

Study notes, flashcards, and learning habits are personal. A local-first architecture gives users greater control over their study data and reduces dependence on cloud services.

2. Accessible Learning Tools

Useful study tools should not require expensive subscriptions just to access basic timers, flashcards, or quizzes. StudyBuddy aims to make these core features available through a browser-based application.

3. Customization and Ownership

Everyone has different learning preferences. By making the source code available, StudyBuddy allows developers and learners to inspect the implementation, adapt the interface, customize study workflows, and extend the application.

4. Community-Driven Improvement

Open-source projects can evolve through feedback, contributions, bug fixes, and new ideas from the community. StudyBuddy is an opportunity to explore how a small, focused tool can grow through collaboration.

🧠 What I Learned

Building StudyBuddy gave me an opportunity to bring together several web development concepts in one practical project:

Managing application state using JavaScript.
Creating animated SVG progress indicators.
Working with the Web Audio API.
Designing reusable flashcard and quiz workflows.
Persisting application data with browser local storage.
Improving keyboard navigation and interface usability.
Thinking about privacy and offline-friendly design from the beginning.

The most important lesson was that a useful product does not always need more features. Sometimes, the best solution is to remove friction and make essential tasks easier.

🏆 Challenge Tracks

Primary Track: Build for a Friend
Additional themes: Accessible and Delightful UX; Offline-First and Privacy-Focused Tools

Please confirm the official eligibility and prize-category names before submitting.

🔗 Explore the Project

👉 View StudyBuddy on GitHub
https://25b05a1201.github.io/studybuddy/

If you find the project useful, feedback, suggestions, and contributions are welcome!

devchallenge #weekendchallenge #hf26challenge

DEV Community