Inspiration
The new rec center is massive. This creates chaos when you try to find your next machine. You walk down seven flights of stairs to check the pec deck. Someone is using it with a line of people waiting. You go back up to find a bench. All benches are taken. This cycle repeats. Frustration builds.
We needed a solution. Real-time machine availability would solve this problem. You plan your workout before you start. No more wasted trips between floors.
What it does
StairMastered shows you which gym machines are available across all floors. Users log into the website and select different floors. You filter between machine types. When you start using a machine, you mark it as occupied. Other users see this update immediately.
The app features a 3D visualization of all five gym floors. You tap any floor to zoom in and explore. Individual machines become interactive. Double-tap toggles machine availability status. Touch gestures let you pinch to zoom and pan to rotate the view.
How we built it
We built StairMastered with Next.js 14 and React Three Fiber for 3D graphics. TypeScript provides type safety throughout. Tailwind CSS handles styling with custom design tokens.
The 3D environment uses React Three Fiber and Three.js with Drei helpers. Framer Motion creates smooth animations between views. We optimized performance with adaptive shadow quality and dynamic pixel ratio adjustment.
Key technologies include:
- Framework: Next.js 14 with App Router
- 3D Graphics: React Three Fiber + Three.js + Drei
- Styling: Tailwind CSS
- Animations: Framer Motion
- Database: MongoDB for real-time updates
- Language: TypeScript
The mobile-first design prioritizes touch interactions. Single taps select floors and machines. Pinch gestures zoom the 3D scene. Pan gestures rotate the camera view.
Challenges we ran into
MongoDB integration proved difficult. Real-time updating between multiple users created synchronization issues. We struggled with connection timeouts and data consistency.
Touch gesture optimization took longer than expected. Different devices handle touch events differently. We had to implement custom debouncing to prevent excessive re-renders.
3D performance on mobile devices required significant optimization. Initial shadow quality settings caused frame rate drops. We implemented adaptive rendering based on device capabilities.
Accomplishments that we're proud of
We delivered all main features within the time constraint. The 3D visualization works smoothly across devices. Real-time machine status updates function properly.
The mobile-first approach paid off. Touch interactions feel natural and responsive. Users navigate between floors effortlessly.
Performance optimizations work effectively. The app maintains 60fps on most devices. Adaptive quality settings ensure smooth operation across hardware capabilities.
What we learned
Real-time database synchronization requires careful planning. We learned to handle edge cases like network interruptions and concurrent updates.
Mobile 3D optimization needs different strategies than desktop. Touch targets must be large enough for fingers. Gesture recognition requires proper event handling.
User experience matters more than technical complexity. Simple interactions often require complex backend logic. Focus on what users need, not what technology enables.
What's next for StairMastered
Auto-routing will plan optimal workout paths. The system suggests the best sequence of exercises based on current machine availability. When your planned machine becomes occupied, the app suggests alternatives targeting the same muscle groups.
WebSocket integration will enable true real-time updates. Users see machine status changes instantly without refreshing.
User profiles will track personal workout history. Analytics will show usage patterns and suggest improvements.
Equipment details will display machine specifications and usage instructions. New users get guidance on proper form and settings.
A booking system will let users reserve machines in advance. This prevents conflicts during peak hours.
VR support through WebXR will create immersive gym exploration. Users navigate the space virtually before arriving.
Log in or sign up for Devpost to join the conversation.