Back to templates

Template details

Habit Tracker

A minimalistic habit-tracking template built with Nuxt 3, Drizzle ORM, and SQLite, featuring GitHub auth, calendar heatmap, and dark mode.

About this template

Habit Tracker is an open-source full-stack habit-tracking template built with Nuxt 3, Drizzle ORM, and SQLite, designed to help users log daily habits and monitor consistency through a calendar heatmap and dynamic progress rates. The project ships as a complete Nuxt 3 application with server-side rendering (SSR), GitHub authentication via nuxt-auth-utils, and Pinia for client-side state management. It is published on GitHub under the zackha/habit repository and is licensed under the MIT License.

What is Habit Tracker?

Habit Tracker is a full-stack web application template for tracking daily habits. It takes habit definitions and daily completion check-ins as input, then produces a calendar heatmap, completion-rate statistics, and a progress view for each habit. The stack is Nuxt 3 on the frontend and backend, Drizzle ORM with SQLite for persistence, and Nuxt UI for the component library. It uses server-side rendering to improve performance and SEO, and it is designed for one-command deployment on NuxtHub.

Key Features

  • Server-side rendering (SSR) — Nuxt 3 SSR renders habit pages on the server, improving initial load times and search-engine visibility.
  • GitHub authentication — Users sign in with a GitHub account using the nuxt-auth-utils module; no custom auth backend is required.
  • Drizzle ORM with SQLite — Database models and queries are written with Drizzle ORM against a lightweight SQLite file, avoiding a separate database service.
  • Calendar heatmap — A heatmap visualization shows completion history for each day, making streaks and gaps immediately visible.
  • Progress tracker — Dynamic completion rates for each habit update automatically as users log their daily check-ins.
  • Dark/light mode toggle — Nuxt UI components provide a built-in theme switcher between dark and light appearances.
  • Markdown habit descriptions — Habit entries accept markdown formatting, so notes can include links, lists, and emphasis.
  • Component-based architecture — The Vue 3 codebase is organized into modular components, simplifying maintenance and customization.

Who is it for?

  • Self-hosters — Individuals who want a private, self-hosted habit tracker without a subscription; they can deploy the app to their own NuxtHub instance.
  • Nuxt/Vue developers — Developers who want a real project demonstrating SSR, Drizzle ORM, GitHub OAuth, and Pinia working together in one codebase.
  • Product teams — Teams building habit, routine, or task-management products who need a functional open-source starting point with SQLite persistence.

What can you do with Habit Tracker?

  • Personal habit logging: Create daily habits, mark them complete each day, and watch the calendar heatmap fill in to reflect your consistency.
  • Visual habit analysis: Use the progress tracker's completion percentages to see which habits are hardest to maintain over time.
  • Production deployment: Because the project is MIT-licensed and NuxtHub-ready, you can deploy your own copy or visit the live demo at https://habit.nuxt.dev.

FAQ

Is Habit Tracker free?

Yes. The project is open source under the MIT License, so the code is free to use, modify, and redistribute. There is a live demo at https://habit.nuxt.dev, but self-hosting is required for your own instance.

What authentication does it use?

Habit Tracker uses GitHub authentication through the nuxt-auth-utils module. Users sign in with their GitHub account; there is no built-in email/password registration flow.

What database does it use?

The app uses SQLite with Drizzle ORM. This keeps the database embedded in the project and eliminates the need to set up a separate database server.

Can I deploy to NuxtHub?

Yes. The README lists seamless deployment with NuxtHub as a feature, and the demo at https://habit.nuxt.dev is hosted on the Nuxt platform.

screenshot of Habit Tracker on template0.com