personalFeatured

SOLO LEVELING SYSTEM — Gamified Task Manager PWA

Personal

Mar 2026 – Jan 1970 (Ongoing )

Team of 1

Full Stack Engineer

01 Problem

Traditional task management apps lack motivation and engagement, leading to inconsistent usage.
Users struggle to maintain daily habits due to lack of reward systems and visual progress tracking.
Most productivity apps depend on internet connectivity, limiting accessibility in offline scenarios.
Existing apps do not support flexible task structures like nested (parent-child) tasks.
Habit tracking and streak systems are often basic and not deeply integrated into user experience.
Mobile-first immersive experiences are missing in most productivity tools.

Built Solo System as an offline-first Progressive Web App (PWA) inspired by the beloved Solo Leveling system UI.
Designed a gamified task system where tasks act like quests with precise XP rewards based on completion..
Implemented IndexedDB (`Dexie.js`) for robust offline data persistence, ensuring full functionality without an immediate network connection.
Integrated a comprehensive Cloud Synchronization system via Firebase to back up data and sync across multiple devices in real-time.
Developed rich task types:
- One-time quests (tasks)
- Daily recurring quests
- Custom weekday-based quests
Built a parent-child task hierarchy to support complex workflows, checklists, and subtasks.
Engineered a streak system with detailed UI logic to encourage daily consistency.
Designed a deep leveling system:
- XP progression (leveling) based on completed tasks
- Level-up screens and immersive animations triggered by XP milestones
Created immersive, Solo Leveling-style system dialogs for task interactions and completion.
Implemented real-time UI updates using `Zustand` for seamless state management.
Added full PWA capabilities:
- Installable application
- Service worker caching
- Fully functional offline environment with a resilient sync queue
Designed a mobile-first UI featuring responsive task layouts optimized for touch interactions constraint (drag-and-drop powered by `@dnd-kit`).

01Architected and built a local-first application architecture from the ground up, evolving it to support cloud synchronization.
02Designed the gamified task system and high-fidelity UI components using Tailwind CSS and `shadcn/ui`.
03Implemented the task hierarchy model and custom scheduling logic.
04Built reusable UI components with precise structure and accessibility.
05Managed global application state using `Zustand` and server state via TanStack React Query.
06Integrated `Dexie.js` for offline data persistence, and Firebase (Firestore & Auth) for distributed cloud sync.
07Configured PWA installability, caching strategies, and verified offline viability.
08Optimized rendering performance and UI flow for a premium mobile-first experience.

Delivered a fully functional, zero-latency productivity system utilizing a local-first robust data architecture.
Improved user engagement directly through gamification elements like XP, levels, and consecutive streaks.
Enabled users to easily handle and track complex goals using the hierarchical task structure.
Achieved perfectly smooth UI responsiveness regardless of network conditions.
Constructed a lightweight, seamlessly installable PWA pairing an offline experience with reliable cross-device cloud sync.
Demonstrated advanced capabilities in modern frontend engineering:
- Complex State Management (`Zustand`, `React Query`)
- Offline-First Network Design (`Dexie.js`)
- Eventual Consistency & Real-Time Sync (Firebase Firestore, Sync Queues)
- PWA Architecture
Created a unique, game-like productivity environment entirely distinct from traditional task applications.

ReactZustandTypeScriptProgressive Web App (PWA)TailwindCSSTanStack React Query

IndexedDB (Dexie.js)Firebase Auth (Authentication)Firebase Firestore (Cloud Database & Real-time Synchronization)

Vercel

Architecture Notes

Designed IndexedDB schema with normalized tables:
- users
- tasks
- task_completions
Implemented local-first data strategy eliminating network dependency
Used Dexie.js abstraction for efficient IndexedDB queries
Applied optimistic UI updates for instant feedback
Built streak logic using date comparison (ISO format)
Implemented task filtering logic for daily and custom tasks
Structured components using feature-based architecture
Designed PWA install flow with standalone detection and caching strategy
Ensured scalability for future features like cloud sync and leaderboards

Interested in working together?

Let's discuss how I can help with your next project.