WF

Gamified Habit & Skill Tracker

TypeScriptNext.jsReactTailwindCSSShadcnZodTanstack QuerySWRSupabaseDrizzlePostgreSQLVercelCoolifyResend

Habitlevel.com is a web app that turns improving real-life habits and skills into a video game with levels, rewards, and insightful metrics.

Feature Gallery

Habitlevel.com Marketing Banner
Habitlevel.com Marketing Banner
User Creation and Authentication
User Creation and Authentication
Dashboard Page
Dashboard Page
Habit List and CRUD
Habit List: Create, Read, Update, and Delete habits.
Effort Points Bar and Levels
Effort Points Bar and Levels
Habit Detail Page
Habit Detail Page
Email Verification
Email Verification
Password Reset
Password Reset

Background & Capstone

HabitLevel began as my Software Engineering Capstone at Western Governors University. The capstone is a rigorous, multi-stage project that walks students through the software development lifecycle: plan, design, develop, test, and deploy. Each phase required documentation and deliverables paired with concrete development tasks, which helped shape HabitLevel's initial scope, architecture, and quality.

My chosen goal for the capstone was to create a Minimum Viable Product for a start-up tech company. As such, the tech-stack was chosen to help provide more time toward feature development rather than maintenance and deployment tasks. This meant using Supabase for the database, and Vercel for the deployment. These services helped provide a simplified and cost-effective solution for the MVP.

The capstone was a 6-week project, beginning 01/18/2025 and ending 02/28/2025. I'm proud to say that I completed the project on time, stayed within the defined scope, and produced a solid MVP that I'm still happy with today.

After graduation, I continued to work on HabitLevel as a side project as time allowed, adding features and continuing to refine the product. It is my goal to push forward toward a more complete product, and to eventually launch it as a SaaS start-up.

Problem

As an avid gamer, it always struck me that it's often so easy to devote many hours at a time toward video gaming. Opening our favorite games day after day, without a second thought. Meanwhile, so many of us struggle to maintain the same consistent effort on our real-life goals and skills.

I theorize that the miscongruence stems from a lack of the same immediate feedback loops in real-life activities as players find in games. Video games often reward players for the simplest tasks at first. The feedback loops are tight and the rewards are immediate.

Especially when first setting out on building a new habit or skill, we will often exert a frenzy of effort - enjoying the novelty of something new. However, motivation declines as novelty fades, and without clear reinforcement, it's easy to abandon habits and long-term skill development.

HabitLevel is an effort to bridge this gap. Turn your real-life skills and habits into a game with levels, rewards, and insightful metrics. Set up daily, weekly, or monthly goals for your habits, and watch your progress unfold.

Insight & Approach

Drawing from MMORPGs, HabitLevel adapts familiar progression systems—like 'Experience Point' gains and 'leveling up' to real-life habit building. The idea is to capture attention with clear, incremental rewards, while directing that engagement toward personal growth.

Each accomplishment earns Effort Points that contribute to levels, helping to make progress visible day-to-day, and reinforce consistency.

Core Features

Marketing pages educate new visitors and encourage sign-up. Authentication and session management provide a secure, persistent user experience. The dashboard surfaces key insights and entry points into daily workflows.

Habit List and Detail views enable users to create structured routines, visualize weekly and historical streaks, and track completions over time.

The User Profile and Account pages were not deemed a high priority during MVP development. They provide minimal settings and customization options, however expansion in these areas are planned for the future.

Technical Overview & History

As an MVP, the goal was to create a simple, functional product that met requirements. Next.js was chosen for the simplicity of keeping the frontend and backend in the same codebase, and utilizing some of the great server-side features it offers. This helped keep the project within the goal timeline.

The Next.js ecosystem offers many great options which also helped simplify development. The SWR library was chosen for state management, helping to organize and streamline data fetching and caching. The Drizzle ORM library was chosen for database interactions, and it made database migrations extremely simple as the schema grew.

When it came to backend and infra choices, the traditional route I'm familiar with would include using Github Workflows to automate deploying to a VPS, or IaaS product like a AWS S3 or ECS. After some research, I decided to use some PaaS solutions for the first time.

For hosting and deployment, the project initially used Vercel. For database, I chose the Supabase database product. These solutions allowed for almost one-click setup and deployment of the project, so I could focus on developing the core features of the application.

However, soon after the Capstone project was completed and the MVP launched I decided to refactor and migrate the project while the product is still minimal. As many PaaS users do, I realized that there are risks of vendor-lock in on Vercel and Supabase. They are both highly scalable, with automated load-balancing and replication/scaling... however these come at a cost. And these costs may fluxuate in the future beyond my control!

This is why HabitLevel has migrated away from Vercel and Supabase, and is now hosted on a self-managed VPS using Coolify. Coolify is an amazing product that provides many of the benefits of a PaaS like Vercel or Supabase, but with a more dependable fixed cost structure.

Migrating to Coolify and a self-managed PostgreSQL database was a fantastic opportunity for practice. Coolify's webhook-based deployment system, combined with DrizzleORM and PlayWright, I created a relatively simple deployment process that automatically runs the test suite, migrates database changes, and deploys the project.

With these changes, the project was refactored from using SWR to Tanstack Query for it's state management. I believe SWR is great for simple use cases, but Tanstack Query provides more robust and flexible features that I've already found to be a great fit for the project.

Market Context & Opportunity

With the rise of at-home learning in the post-pandemic era a demand for effective, engaging self-improvement tools has accelerated. A product that meaningfully supports habit formation, skill development, and learning has been found to become financially self-sustaining.

The personal development market is projected to grow at 6%+ CAGR over the next decade—from roughly $51B to around $70B by 2034 (source: Personal Development Global Market Report 2025).

Vision for the Future

Habits are the building blocks of personal growth, and HabitLevel will continue to evolve to support users with expanding the organization, reinforcement, and reward systems for their habits. This is the core of HabitLevel's vision, but not the limit of it's potential.

The next feature set planned for the application centers around Skills, scaffolding short term tasks into long term goals. Helping users tackle that new skill or hobby they've always wanted to try.

Then by combining the same structured tracking, incremental rewards, and motivational insights, the product will evolve into a practical teaching tool. Providing experts with the ability to produce task-driven teaching content, and support building a community of learners.

The future is looking bright, and I'm excited to share the journey with you. Sign up for an account and start tracking your habits today!