DEV Community

Cover image for How to Vibe Code Your Own Study Time Tracker (Claude Code, Codex, Cursor, Antigravity)
Affan Bajwa
Affan Bajwa

Posted on Originally published at threshyr.com AI-assisted

How to Vibe Code Your Own Study Time Tracker (Claude Code, Codex, Cursor, Antigravity)

#vibecoding #productivity #webdev #timetracking

This guide walks you through building one with Claude Code, Codex, Antigravity, or Cursor. You'll get a copy-paste prompt, a step-by-step loop, and an honest look at where a DIY tracker stops being enough.

What You'll Build

A single-page study timer that can:

  • Hold a list of courses: Add, rename, and color-code your subjects.
  • Start and stop a timer for a course: Run real-time tracking with a large clock.
  • Save every session: Automatically record date, duration, and associated coursework tasks.
  • Show today's and this week's totals per course: Visual progress bars for instant feedback.
  • Export your log to CSV: Clean backup of all your recorded study hours. It's one file, it runs offline, and your data stays in your browser. No account, no server, and zero cost.

Step 1: Pick a Setup That Works in Any Tool

Ask the AI for one index.html file with plain JavaScript and localStorage.
There is nothing to install and no framework (like React or Vue) to debug, and every modern AI coding model handles vanilla web code exceptionally well. Storing state locally also keeps your study data private on your own machine.

Step 2: Open Your Tool in an Empty Folder

Pick the AI coding environment you prefer:

  • Claude Code: Create an empty folder, open your terminal inside it, and run claude.
  • Codex CLI: Same workflow. Open the folder in your terminal and run codex.
  • Cursor: Open the empty folder in Cursor, then press Cmd+I (or Ctrl+I) to open the Composer / Agent chat panel. If you'd rather skip the terminal, tools like Windsurf, Lovable, or Bolt work just as well. Simply paste the exact same prompt into their chat interface.

Step 3: Paste the Starter Prompt

Copy the prompt block below and paste it directly into your AI tool:

Build a study time tracker as a single file called index.html (HTML, CSS and vanilla JavaScript only, no frameworks, no build step, no external requests). It must work offline by double-clicking the file.

Features:
1. Courses: add, rename and delete courses. Each course has a name and a color.
2. Timer: pick a course, press Start, press Stop. Show a large running clock (HH:MM:SS). Only one timer can run at a time. If the page is refreshed while the timer is running, the timer must keep counting correctly (store the start timestamp, not a counter).
3. Tasks: each course can have tasks (title, done checkbox). When starting the timer I can optionally pick a task to attach the session to.
4. Timesheet: a table of all saved sessions with date, course, task, start time and duration. I can delete or edit a session's duration.
5. Totals: show time studied today and this week, per course and overall, with simple horizontal bars (no chart library).
6. Export: a button that downloads the timesheet as a CSV file.

Data and technical rules:
- Store everything in localStorage under one key, as JSON. Handle an empty or corrupted state without crashing.
- Use Date.now() timestamps, not setInterval counters, to calculate durations.
- Clean, minimal dark UI, responsive, large readable text, keyboard accessible.
- Keep the code in clearly commented sections: state, storage, timer logic, rendering, event handlers.

When done, explain how to open it and list any assumptions you made.
Enter fullscreen mode Exit fullscreen mode

Step 4: Open and Test It

Double-click index.html to open it in your browser and try this:

  1. Add two courses (e.g. Biochemistry and Organic Chemistry).
  2. Start the timer, wait ten seconds, and click stop.
  3. Check the timesheet: Verify the session shows up in the table.
  4. Test persistence: Start the timer, refresh the browser page, and verify that the clock continues ticking without resetting to zero. If something breaks, paste the exact error or describe what you saw back to the AI. Don't try to fix the code manually. Simply prompt: "When I refresh while the timer runs, the clock resets to zero. Please calculate elapsed duration from the start timestamp." and let the AI fix it.

Step 5: Improve It with Small Prompts

Add features one prompt at a time. Small prompts break code far less often than big ones:

  • "Add a Pomodoro mode: 25 minutes of focus, 5 minutes of break, with an audio beep at the end."
  • "Add a daily study goal in hours and display a circular progress ring."
  • "Add a dark/light theme toggle in the top corner that remembers my preference in localStorage."
  • "Add a weekly view with a bar for each day."

Step 6: Keep Your Code and Data Safe

  • Version control: Commit to Git (or copy the file) after every change that works so you can roll back.
  • Back up data: Use the CSV export button regularly. Clearing your browser cache wipes localStorage.
  • Code audit: Ask the AI to review its own code for bugs once you're done.

Where a DIY Tracker Runs Out

A weekend vibe-coding project is fun and educational, but browser-based timers carry natural limits:

  • Requires manual discipline: It depends on you remembering to switch tabs and click Start and Stop for every reading session or lecture.
  • Storage volatility: Clearing browser history wipes your entire semester of logs unless you manually export CSV files.
  • No OS integration: It doesn't sit in your macOS menu bar or Windows system tray, meaning you have to keep a browser tab open alongside heavy PDF readers.
  • Zero device sync: Hours logged on your laptop won't reflect on your desktop without manually merging files.
  • Maintenance tax: As your exams approach, you spend study time fixing web bugs instead of learning coursework. For a weekend experiment, a DIY tracker is great. For a high-stakes semester of MCAT, USMLE, Bar Exam, or thesis research, you may want something finished.

If You'd Rather Not Maintain It: Threshyr Edu

Threshyr Edu is a native desktop app built specifically for students, researchers, and coursework. It is 100% free forever, requires no account or credit card, and keeps all your data locally on your computer:

  • Course budgeting: Set weekly target hours per course and track syllabus completion.
  • Integrated task timers: Click start directly on coursework cards so your task board and timesheet never drift apart.
  • Zero distractions: Runs natively on your desktop with zero notifications or phone proximity distractions.
  • Complete offline privacy: Powered by a local SQLite database that never uploads your study habits to the cloud.

It is available right now on desktop app stores:

Build your own for the fun of it, or let Threshyr Edu handle the tracking so you can get back to studying.

Top comments (0)