Friend Study Buddy：一款为朋友打造的 AI 学习伴侣 Web 应用

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

What I Built

Friend Study Buddy is a clean, accessible, and lightweight study companion web application designed specifically for students and study groups.

I built this for my friend and study partner who often gets overwhelmed when trying to plan study sessions for technical subjects like Data Structures, Web Development, and Computer Science fundamentals. During exam crunch times and hackathons, they struggled with:

Deciding how much time to allocate between learning concepts, practicing problems, and doing final revisions.
Quickly testing fundamental concepts without getting distracted by heavy, complex quiz platforms.
Finding concise, cheat-sheet-style revision notes for quick refreshers.
Staying motivated during late-night study marathons.

Friend Study Buddy solves this by putting everything in one distraction-free place:

Dynamic Study Planner: Calculates tailored time breakdowns (concept learning, examples, hands-on practice, revision, and quick self-testing) based on custom durations and difficulty levels.
Quick CS Quiz: An interactive multiple-choice quiz testing core CS fundamentals with instant score calculations and encouraging feedback.
Quick Revision Notes: Instant flashcards for HTML, CSS, JavaScript, and DSA fundamentals.
Motivation Generator: A random affirmation generator to keep spirits high during tough study sessions.
Night-Owl Friendly Dark Mode: An accessible, soothing dark theme to reduce eye strain during late-night study sessions.

Demo

Live Demo Link: https://tilakraj1108.github.io/friend-study-buddy/
Preview / Walkthrough: A zero-dependency, lightning-fast static web app that runs smoothly on mobile, tablet, and desktop screens with full dark/light theme support.

Code

The project is built with clean, semantic open web technologies (HTML5, CSS3, and Vanilla JavaScript ES6+) with zero build tools or dependencies required.

GitHub Repository: https://github.com/tilakraj1108/friend-study-buddy

friend-study-buddy/
├── index.html   # Semantic HTML5 layout and structured forms
├── style.css    # Responsive design system, CSS variables & dark mode
├── script.js    # Vanilla JS planner logic, quiz engine, & quote generator
└── README.md    # Documentation and local setup guide

How I Built It

I designed and developed Friend Study Buddy using open-source agentic workflows and standard modern web primitives:

AI-Assisted Pair Programming: Leveraged open-source AI tooling and agentic coding workflows to rapidly scaffold semantic HTML5 structures, formulate balanced study breakdown algorithms, and create responsive UI layouts.
Pure Web Stack Architecture:
- HTML5: Fully accessible and semantic tags (<header>, <nav>, <main>, <section>, <form>, <footer>, <fieldset>).
- CSS3 Design System: Custom properties (CSS variables) for seamless Light/Dark theme switching, responsive CSS Grid and Flexbox layouts, and smooth transitions.
- Vanilla JavaScript (ES6+): Clean, dependency-free DOM manipulation, event delegation, and modular state management for the planner calculations and quiz evaluator.

Why Does Open Innovation Matter?

Open innovation and open-source software are the bedrock of modern technology education. When building for a friend, open innovation made it possible to:

Zero Barriers to Access: Anyone can inspect, modify, fork, or run the project locally without paying subscription fees, managing API keys, or dealing with vendor lock-in.
Longevity and Reliability: Because it relies purely on open web standards, this tool will work today, tomorrow, and decades from now without breaking due to closed API deprecations or pricing changes.
Collaborative Learning: Friends can contribute new quiz questions, add custom subject notes, or customize study algorithms collaboratively via pull requests.

My Agent Session

I created and iterated on this application using an AI pair-programming agent session to draft, refine, and verify the study planner algorithms, accessibility features, and documentation.

Prize Categories

Hacktoberfest Weekend Challenge: Build for a Friend