Life-RPG

Your life. Your rules. Level up.

Comment

What inspired me

I've tried nearly every productivity app out there — and I always quit within a week. Not because they lacked features, but because they lacked feeling. There was no reward, no momentum, nothing that made me want to come back. Then I thought: what if finishing a task felt like leveling up in a game? That one question became Life RPG.

How I built it

I built the entire app from scratch — no templates, no boilerplate. The frontend is React 18 with Tailwind CSS, running directly in the browser with no build step. Every animation — the XP floating up, the cinematic level-up rings, the achievement glow — was hand-crafted in CSS. Firebase handles authentication and real-time cloud sync, so user data persists across devices seamlessly. The analytics dashboard is powered by Chart.js. Three files. Zero dependencies to install. Just open and play.

What I learned

I learned that design is a feature, not a finish. The first version worked perfectly — and nobody would have cared. It was only when the animations felt satisfying, the colours felt intentional, and the interactions felt rewarding that it became something worth showing. I also learned how surprisingly powerful browser-native tools are when used with care — you don't always need a framework or a build pipeline to ship something great.

Challenges I faced

The hardest challenge wasn't technical — it was balance. Gamification can easily feel gimmicky. Too many animations and it's distracting. Too few and it's just another to-do app. Finding the line where the game mechanics genuinely motivate without becoming the point themselves took a lot of iteration. On the technical side, syncing Firebase state with local React state in real time — without race conditions or data loss — required careful architecture, especially around the debounced save logic and auth state transitions.

Built With

  • babel-standalone-cloud-services-&-auth-firebase-authentication-(google-sign-in-+-email/password)
  • chart.js
  • css-frameworks-&-libraries-react-18
  • firebase
  • firebase-firestore-apis-&-other-google-fonts-api
  • html
  • javascript
  • sdk
  • tailwind-css
Share this project:

Updates

posted an update —

Life RPG is live — and it's been a ride.

What started as a simple idea — what if a to-do list felt like a game? — turned into a fully functional productivity platform built entirely from scratch during this hackathon.

Here's what's live right now:

Complete tasks and earn XP based on priority Level up with a full cinematic effect — rings, animations, the works Maintain daily streaks to build real momentum Unlock 12 achievements for hitting milestones Track your progress with a live analytics dashboard Sign in with Google or email — your data syncs to the cloud instantly via Firebase The thing I'm most proud of isn't any single feature. It's how it feels. Every interaction was designed to give you that small dopamine hit — the XP floating up, the level-up burst, the glow on an unlocked achievement. That feeling is the whole product.

Built with React, Firebase, Tailwind CSS, and Chart.js. No build step, no install — just open the browser and start leveling up.

More updates coming. This is just v1.

Log in or sign up for Devpost to join the conversation.

Submission history