A cool study tracker that actually keeps me motivated and tracks my progress.
I built StudyFlow to fix that. It's a clean, modern dashboard that makes tracking your study habits feel less like a chore and more like a game. It has a cool, glowing interface with a few different color themes to match your mood.
Best of all, it saves everything right in your browser. No sign-ups, no accounts. Just open the page and all your progress is there waiting for you.
- Track Your Sessions Live: Just type in a subject, hit "Start," and the timer gets going.
- Set a Goal: Use the simple slider to decide how long you want this study session to be.
- Quick Stats: The main screen shows you all the important stuff at a glance—total time studied, number of sessions, and your top subject.
- A Calendar for Your Hard Work: The calendar automatically puts a dot on days you studied. You can click any day to see a chart of what you worked on.
- Cool Charts to See Your Progress: See how you've done over the last week with a simple bar chart, or check out the "More Charts" page for a donut chart that breaks down all your subjects.
- It Remembers You: No need to worry about saving. Your data is automatically stored in your browser.
Staring at the same screen can get old. I added a few themes to help you switch things up.
🟣 Purple Haze- The classic cool and focused purple theme.🌐 Cyber Glow- A bright, futuristic-looking theme with lots of cyan.🔥 Solar Flare- A warm, high-energy orange theme for when you need a boost.
I kept things simple and focused on the front-end. No complicated servers or anything like that.
- HTML5
- CSS3 (I used variables to make the themes work!)
- JavaScript
- Chart.js (This library does all the heavy lifting for the cool charts)
A big thanks to Google's Gemini 2.5 Pro model, which helped me code, debug, and document this project. (Codespaces is awesome for this feature)
This project is already set up to work perfectly in GitHub Codespaces.
- Get the "Live Server" extension: If you don't have it, go to the Extensions tab on the left and search for
Live Server(the one by Ritwick Dey is great). Click install. - Launch it: In the file explorer, find the
index.htmlfile, right-click on it, and choose "Open with Live Server". - Check the pop-up: A little notification will appear in the bottom-right corner. Just click "Open in Browser" and you're all set.