DEV3 Free Habit and Goal Tracker — Source Code (React + Tailwind)

Source code of the DEV3 Habit and Goal Tracker, a browser-only habit and goal tracker with daily and weekly habits, current and best streaks, 26-week SVG heatmaps, goals with milestones and Notification API reminders.

Free download: sign in to any DEV3 account and click Download ZIP. Try it live: https://dev3.tech/tools/habit-goal-tracker shows the finished tool running.

What is in the download

• A standalone Vite + React + TypeScript + Tailwind CSS project: src/tool holds the tool, shared pieces sit beside it
• package.json with exact versions plus a lockfile, so npm ci works
• README.md (run, build, embed in Next.js or plain React) and an MIT LICENSE

What the code does

• Daily and weekly-target habits with seven-day check-in strip and editable history
• Current and best streak logic for days and for Monday-to-Sunday weeks
• Flat SVG heatmap calendars per habit and combined, last 26 weeks
• Goals with milestone checklists and progress bars
• Optional browser notifications by time of day with an in-app Due now banner fallback, JSON backup and CSV export

Tech stack

React 19, TypeScript, Vite, Tailwind CSS 4, jspdf.

Install and customise

The How to install and How to use tabs list the steps. In short: unzip, npm ci, npm run dev, then copy the tool folder into your own app if you want to embed it.

Good to know

• A browser-only tool: there is no backend or database in the code.
• Notifications fire only while the page is open in a tab; there is no background push and no sync between devices.