Questly
Your to-do list, reimagined as an RPG quest board
The Problem
Task management tools are functional but forgettable
Most to-do apps get abandoned within weeks. They show you what needs to be done but give you no reason to care. Questly transforms your task list into an RPG quest board — completing tasks grants XP, levels you up, and unlocks rewards. The same work, wrapped in a system that makes you want to come back.
Architecture
How it's built
Component-based React SPA with Zustand for global state. Each 'task' is modeled as a 'quest' with metadata: difficulty tier, XP value, category, and deadline. The Zustand store manages the full quest lifecycle — creation, completion, XP calculation, and level progression.
System Flow
Quest Board UI
React Components
Zustand Store
Global State
XP Engine
Level & Reward Logic
Jira Sync
API Integration (planned)
Quest Input → Zustand Store → XP Engine → Level Up / Reward → Quest Board Update
Tech Decisions
Why these choices
Zustand over Redux
Lighter API, sufficient for this scope. No boilerplate, no action creators — just a store that scales with the app.
TypeScript throughout
Type safety on quest metadata prevents subtle bugs. Also produces portfolio-ready, production-grade code.
Tailwind for styling
Rapid iteration on UI without writing custom CSS. Consistent design tokens with zero configuration overhead.
Challenges & Learnings
What was hard
- 01.
Designing the XP/reward system logic to feel fair and genuinely motivating — not arbitrary or gameable.
- 02.
Structuring the Zustand store to handle growing complexity as quest categories, filters, and history are added.
Screenshots / Demo
In action
