Back to projects

Full-StackPrototype2026

Solo Ascend

A habit tracker that plays like an RPG: daily habits become quests that earn XP, train stats and climb the hunter ranks of Solo Leveling.

50
XP per completed quest
20
Named levels
8
Hunter ranks, E-Rank to Shadow Monarch

Timeline

Jan 2026

Role

Design and front end

Team

Solo

Domain

Personal productivity · Gamification

Status

Prototype

Stack

React 19Vite 7Tailwind CSS 4Framer Motiondate-fns

Source

Section 01

Overview

Habit trackers are checklists, and checklists are easy to abandon. Solo Ascend borrows the System interface from the Solo Leveling manhwa, where the hero levels up by completing daily quests, and applies it to real habits.

Each habit is a quest tied to a stat you choose to train, like Focus or Strength. Completing it earns XP and raises that stat; finishing the day produces an evaluation and can level you up.

Landing page
Solo Ascend landing page with the headline Gamify Your Existence
Player onboarding
Onboarding form with a player name and selected attributes including a custom Research attribute

Section 02

The Progression System

Every completed quest gives 50 XP and +2 to its stat, capped at 100. Each 1,000 XP is a level, granted when you finalise the day, and the 20 levels carry titles from the series, from The World's Weakest to The Absolute Sovereign. Total XP sets your hunter rank across eight tiers, from E-Rank at the start to Shadow Monarch at 250,000 XP.

The numbers are tuned so progress is visible daily (20 quests is a level) while the top rank takes years of consistency.

Dashboard
Dashboard with level, rank progress bars and a weekly completion chart
Attributes and daily quests
Player attribute bars beside a daily quest list with three quests completed

Section 03

Finishing the Day

Finalising the day opens an Evaluation Manifest: quests cleared, completion rate, stat gains and XP harvested. If the level bar is full, the player levels up and earns a new title. Each finalised day is archived, and the Quest Archives calendar shows completion per day with a breakdown of every quest.

Evaluation Manifest
Evaluation screen showing five quests cleared, 83% completion, stat gains and 250 XP
After a level up
Dashboard after levelling up to level 7, Instance Dungeon Crawler
Quest Archives
Monthly calendar of completed days with a per-quest breakdown for one day

Section 04

How It's Built

Solo Ascend is a React 19 app built with Vite, styled with Tailwind CSS 4 configured entirely in CSS, and animated with Framer Motion. A small state machine moves the player from landing to login, onboarding and the dashboard, with animated transitions between them.

Everything is stored in the browser, namespaced by player, so the app needs no account or server. Dark and light themes share one set of design tokens, and the layout collapses to a single column on phones.

Light theme
Dashboard in the light theme
Solo Ascend landing page on a phone
Landing on a phone
Solo Ascend dashboard on a phone
Dashboard on a phone

Section 05

What's Next

The roadmap turns the prototype into something to use every day:

  • Reset quests automatically at midnight and compute real streaks
  • Sync across devices with a hosted database
  • Let players choose the stat each quest trains
  • Bring back the System Advisor as an AI coach that reads your history