Quarter Clock: A Visual Year Tracker for indie hackers
It's mid-March. You had goals in January. Big ones. Life-changing ones.
Where are they now?
Buried in a Notion page you haven't opened since February. Lost in a Jira backlog with 47 other "P2" tickets. Forgotten in a Google Doc titled "2025 Goals (FINAL) (2)".
I built Quarter Clock because I was tired of this cycle. I wanted one thing: a visual slap in the face showing how much of my year is already gone.
Why I built this (the honest version)
I'm not a productivity guru or anything. I don't have a system with a clever name. I just noticed that time moves faster than my progress, and... that bothered me.
Every quarter, I'd look up and think "wait, it's April already?" Then July. Then October. And my yearly goals? Still sitting at 20% complete.
I had plenty of motivation. What I lacked was any sense of where I actually stood.
I couldn't see time passing. Calendars are just squares. To-do apps are just lists. Nothing showed me the brutal truth: you're 67% through the year and only 30% done with your goals.
So I built a "yearly" clock. A literal clock that shows the year ticking away.
Forget task managers and productivity suites. This thing answers one question: am I on track or not?
The UI: what you're looking at
The year clock
This is the centerpiece. An analog clock, but instead of hours, it shows months. The hand points to where you are in the year right now.
Each quarter gets its own colored arc. I actually kind of like watching it tick away? It's weirdly motivating, though also a bit stressful if I'm being honest.
Quarter progress cards
Four cards. Q1, Q2, Q3, Q4. Each shows:
- How many days have passed
- How many days remain
- A percentage complete
One number per card. That's it.
The project sidebar
Your projects live here. Add as many as you want, though I usually keep it to 3-4 because... well, I'm not that organized. Each one shows its name and a quick status indicator.
Click "Add Project", give it a name, pick your dates, done.
Project details & subtasks
Click a project and it expands. You'll see:
- Start date and deadline
- A list of subtasks with checkboxes
- Your completion percentage
- The status badge (more on this below)
Break your project into bite-sized pieces. Check them off as you go. The math happens automatically.
The status badge: ahead, behind, or on track
Here's the point. Quarter Clock doesn't just track what you've done—it tells you if you're keeping pace with time.
Here's the logic:
- If you're 50% through your project timeline, you should be ~50% done
- More than 10% ahead? You're Ahead (green)
- More than 10% behind? You're Behind (red)
- Within that 10% buffer? You're On Track (yellow)
It's math, nothing more. But math you can actually use.
Export & import
Two buttons. Export downloads your data as JSON. Import lets you load it back.
Moving computers? Export, import, done.
Want a backup? Export.
Paranoid about browser storage? Yeah, me too. Export.
It's your data, it's your file. I don't know, it just feels right that way.
How it actually works (the technical bits)
If you're a developer, you might be wondering what's under the hood.
Everything lives in localStorage
const STORAGE_KEY = "quarter-clock";
That's it. One key. All your data lives in your browser's localStorage under quarter-clock.
When the app loads, it grabs your data:
export const loadData = (): StoredData => {
const raw = window.localStorage.getItem(STORAGE_KEY);
if (!raw) return createEmptyData();
return normalizeData(JSON.parse(raw));
};
When you make changes, it saves automatically via Svelte's reactivity. No save button. No "don't forget to save". It just works.
The quarter progress formula
How do we know you're 67% through Q2? Simple:
const percentComplete = (daysElapsed / totalDays) * 100;
We calculate the total days in the quarter, figure out how many have passed, and divide. That's your quarter progress.
The status calculation
This is where it gets interesting. How do we know if you're ahead or behind?
export const getProjectStatus = (project, quarter, today): ProjectStatus => {
const completion = getCompletionPercent(project);
const startDate = new Date(project.startDate);
const deadline = new Date(project.deadline);
const totalTime = daysBetween(startDate, deadline);
const elapsed = daysBetween(startDate, today);
const expected = (elapsed / totalTime) * 100;
const delta = completion - expected;
if (delta >= 10) return "ahead";
if (delta <= -10) return "behind";
return "on_track";
};
We compare your actual completion (subtasks done / total subtasks) with your expected completion (time elapsed / total time).
The difference is your delta:
- Delta ≥ +10%: You're ahead
- Delta ≤ -10%: You're behind
- In between: You're on track
That ±10% buffer exists because life happens. You don't need to be perfectly linear. But if you're seriously off pace, you'll know.
Project completion
export const getCompletionPercent = (project: Project) => {
const total = project.subtasks.length;
if (total === 0) return 0;
const done = project.subtasks.filter((task) => task.completed).length;
return (done / total) * 100;
};
Nothing fancy. Completed subtasks divided by total subtasks. Multiply by 100. Done.
The data shape
export type Project = {
id: string;
name: string;
startDate: string; // YYYY-MM-DD
deadline: string; // YYYY-MM-DD
subtasks: Subtask[];
};
export type Subtask = {
id: string;
description: string;
completed: boolean;
};
export type ProjectStatus = "ahead" | "on_track" | "behind";
I kept the data model pretty minimal. Maybe too minimal? But I liked not having created_at, updated_at, last_modified_by_user_id everywhere.
Why Svelte? (my first time, honest review)
I'd never used Svelte before this project. I wanted to learn something new. Here's my honest take.
What I liked
It's tiny. The entire bundle is under 100KB. No React runtime. No virtual DOM overhead. Just compiled JavaScript.
Reactivity is magic. You change a variable, the UI updates. No useState, no useEffect, no dependency arrays. Just... change the thing.
Less boilerplate. A Svelte component feels like writing HTML with superpowers. Not like writing JavaScript that pretends to be HTML.
What I didn't like
The ecosystem is small. Need a specific library? Good luck. React has everything. Svelte has "maybe someone made that".
Tooling is okay, not great. VS Code support exists but it's not as polished as React/TypeScript tooling.
Jobs don't exist. If you're learning for career reasons, React/Next.js is still the safe bet.
The verdict
Svelte is cute. I enjoyed using it. The DX is genuinely nice for small projects like this.
But for my next project? I'll probably go back to React. Not because React is better (it's not), but because the ecosystem and job market are there.
Svelte is a weekend project framework. And that's not an insult. Quarter Clock was a weekend project.
The philosophy: your data, not mine
Here's what Quarter Clock doesn't do:
- No accounts
- No login
- No backend
- No database
- No analytics
- No tracking
- No "we value your privacy" bullshit while selling your data
Everything lives in your browser. Period.
I don't know what projects you're working on. I don't know if you're ahead or behind. I don't know if you're using the app at all.
And I like it that way.
Want proof? View source. Read the code. There's no fetch() calls to any server. No Google Analytics. No Mixpanel. No Segment. Nothing.
Just HTML, CSS, and JavaScript running on your machine.
Why this matters
Every productivity app wants your data. They want to know your habits, your goals, your patterns. Then they want to sell you a premium tier. Then they want to sell your anonymized data to "partners".
F*ck that.
Your goals are nobody's business. Neither are your setbacks. None of that belongs on someone else's server.
Quarter Clock is for people who don't want another SaaS subscription tracking their life.
It's free and open source. Do what you want with it.
Try it, fork it, make it better
Quarter Clock lives on GitHub and on my website. Star it if you find it useful. Fork it if you want to make changes. Open issues if you find bugs.
Or just use it. That's fine too.
Links:
The year keeps moving whether you're ready or not.
Built with Svelte 5. Just a clock and your goals.