Study-Habit-Coach

Study Habit Coach is a simple, user-friendly web app designed to help students improve their study habits by tracking their mood and hours studied daily.

Comment

Inspiration

As students ourselves, we often find it difficult to maintain a consistent study routine while balancing stress, mood swings, and deadlines. Many existing apps for habit tracking are either too complex, require sign-ups, or lack personalization. We wanted to create something simple, accessible, and motivating — a tiny web app you can run instantly in your browser that not only tracks your study habits but also lifts your mood with motivational quotes. That’s how Study Habit Coach was born, as part of HawkHacks @ Harper 2025 with the theme Everyday Innovation.

What it does

Study Habit Coach is a lightweight, browser-based web app designed to help students stay consistent with their study routines while boosting motivation. Here’s what it does: 📊 Tracks your daily study habits — you select your current mood and input the number of hours you studied for the day. 📝 Provides smart study suggestions based on your mood and study hours. For example: If you're tired and studied little, it might suggest short, light study sessions. If you're stressed but productive, it might recommend breaks and relaxation. 💬 Displays a motivational quote chosen randomly from a JSON list every time you get a suggestion. 🗂️ Saves your study history locally using the browser’s LocalStorage API — no sign-up, no servers, fully private. 🎨 Features a clean, responsive UI that works on both desktop and mobile. ⚡ Runs instantly — no installation, accounts, or downloads needed. It’s a simple, feel-good, everyday tool for students to check in with themselves, track small habits, and stay encouraged. 🚀 .

How we built it

We built the project using: HTML5 & CSS3 for a clean, responsive UI Vanilla JavaScript for logic and DOM interaction LocalStorage API for saving study history without backend dependencies A JSON file with motivational quotes to deliver encouragement dynamically We hosted the app locally using a simple Python HTTP server to fetch the JSON file properly, avoiding CORS issues during development.

Challenges we ran into

Initially, fetching the JSON file using fetch("data/quotes.json") resulted in a CORS error when opening the index.html directly. We resolved it by serving the project via a local HTTP server. Designing the UI to be visually appealing yet simple took multiple iterations. Managing data persistence purely on the client side without a backend. Generating and displaying random quotes without repeating the same one consecutively.

Accomplishments that we're proud of

The biggest win for us was creating a tool that feels friendly, helpful, and frictionless for students to use daily. We’re proud that the entire project was built from scratch within the hackathon timeframe using only free, open technologies. We hope it encourages students to build small but meaningful tools that improve everyday life.

What we learned

How to work with fetch API to load external JSON data into a web app. Implementing LocalStorage for client-side persistence. Designing a minimal, clean, and responsive UI with HTML and CSS. Managing asynchronous operations and error handling in JavaScript. Organizing a lightweight front-end project with good file structure and clear documentation.

What's next for Study-Habit-Coach

While Study Habit Coach is currently a simple browser-based tool, we have several ideas to take it further: 📱 Mobile App Version Develop a lightweight mobile app version for Android/iOS so users can track habits on the go with push notifications and reminders. 📊 Study Analytics Dashboard Add charts and graphs to visualize weekly and monthly study trends, average moods, and productivity spikes. ☁️ Cloud-based Data Sync Allow users to optionally create accounts and sync their study history across devices securely via a backend service. 💌 Daily Motivation Notifications Integrate a notification system that sends a motivational quote or productivity tip every morning. 🧠 AI-Powered Study Suggestions Use an AI model (open-source or local) to offer smarter, context-aware study strategies based on user patterns and moods. 🎨 Customizable Themes and UI Let users personalize the app’s colors, fonts, and mood emojis to make it feel more personal. 🌍 Multi-language Support Include quotes and UI translations in multiple languages to make it accessible to a global student community.

Built With

Share this project:

Updates