StepPal

Log In Screen
Main / Character Screen
Activity Screen
Evolution Screen
Evolution Screen
Rewards Screen
Rewards Screen
Goals Screen
Profile Screen
Settings Screen

🚀 About the Project — StepPal 💡 Inspiration

Staying active is hard when fitness apps feel repetitive and purely data-driven. We were inspired by Tamagotchi-style virtual pets and asked: what if real-world movement directly shaped a digital companion? StepPal turns daily walking into a game where your effort visibly matters.

Instead of abstract streaks or numbers, your steps feed, grow, and evolve a virtual pet, making fitness more engaging and emotionally rewarding.

🛠️ How We Built It

StepPal is a full-stack fitness and virtual pet application.

The frontend is built with React + TypeScript, using Three.js (React Three Fiber) to render a 3D animated pet with multiple evolution stages. We used Zustand for global state management and Framer Motion for smooth UI animations.

The backend is built with Node.js + Express, handling authentication, step tracking, pet state, and rewards. We used SQLite (via sql.js) for a zero-config, portable database and JWT for secure authentication.

WebSockets (Socket.io) enable real-time updates so step progress, pet status, and rewards feel immediate.

A custom StepCoin system ties activity directly to progression—coins are “mined” through movement and scale with your pet’s evolution.

The entire app runs locally out of the box—no external databases required.

📚 What We Learned

How to integrate real-time systems into a full-stack app

Managing 3D rendering inside a modern React application

Designing game-like progression systems tied to real-world data

Structuring a project for scalability under hackathon time pressure

Making technical trade-offs to prioritize demo reliability

⚡ Challenges We Faced

Synchronizing pet state with live activity updates without race conditions

Balancing visual performance with smooth animations in Three.js