Gym Equipment Configurator

Project Summary

An interactive gym equipment configurator enabling real-time gym equipment customization with instant visual feedback, offering personalized options like steel finishes and upholstery colors and stitch. It offers an interactive visualization experience with real-time product rendering, multiple view angles, smooth zoom and pan controls, and high-quality WebP images. Users can customize products with various steel finishes, upholstery colors, and stitch patterns, all with real-time preview updates. Designed for an exceptional user experience, it features responsive design, touch-enabled mobile compatibility, intuitive controls, and image export functionality. Performance is optimized through image preloading, efficient asset delivery, fast page loads, and smooth transitions.

I worked with my teammate of over two years and a talented UI/UX designer. All images are taken from a 3D render of the equipment in TwinMotion and exported as individual layers. Built with Next.js, Tailwind, NextUI, Typescript, and data-centric principles, ensuring seamless future expansions.

Tools

  • UI Design: Adobe Photoshop, Figma

  • Development: Next.js 14, React 18, TypeScript, Tailwind CSS, NextUI v2, Twinmotion

  • Performance and Styling: WebP image optimization, ESLint, Prettier, Tailwind Variants

Platforms

A responsive web browser application built with modern web technologies, ensuring compatibility across devices and seamless interaction.

My Role

As the solo full-stack engineer, I transformed pixel-perfect UI/UX designs into functional, scalable code through seamless collaboration in technical forums and scrum calls. I built reusable, modular components using a data-first approach, enabling effortless addition of new machines with just a data file. I also optimized performance, accessibility, and responsiveness across all platforms, delivering a future-proof configurator.

Challenges & Learnings

Challenges

  • Balancing Quality and Performance: Delivered visually stunning images optimized for fast load times on  web and mobile

  • Scalability and Efficiency: Designed a flexible, modular framework for seamless equipment additions.

  • Complex User Interactions: Implemented smooth panning, zooming, and real-time  updates for intuitive customization.

    Key Learnings

  • Strategic Design Patterns: Built scalable, maintainable systems; exploring additional patterns could further reduce complexity

  • Strong Collaboration: Aligned closely with the UX designer for seamless design-to-code translation; more frequent check-ins could improve iteration cycles.

  • Goal-Driven Development: Focused on clean, performance-oriented UI with interactive features; earlier user testing could validate design decisions faster.

  • Optimizing Performance: Used WebP, lazy loading, and efficient state management to ensure speed and quality.

  • Data-First Scalability: Created a framework enabling new equipment with simple data file additions; automating data file generation could save time.

  • Teamwork and Documentation: Collaboration fostered trust and improved quality; standardized workflows and documentation would streamline future projects.

Solutions

Optimizing Image Quality and Load Time

  • Compressed 8K images to 4K and converted them to WebP, reducing load times by 70% while maintaining stitching detail at 150% zoom.

  • Added lazy loading and preloading for smooth transitions and enhanced performance.

Developing a Scalable Framework

  • Built a modular, data-driven system enabling new equipment additions with simple data file updates.

  • Segmented components to minimize pre-rendering, reducing load times and storage needs.

  • Created reusable UI components to streamline future development.

Enhancing User Experience

  • Delivered smooth zoom and pan with hardware scaling for responsiveness across devices.

  • Designed a mobile-friendly, touch-optimized interface for seamless usability.

  • Added intuitive controls and real-time feedback for a dynamic user experience.

Accessibility and Maintainability

  • Integrated ARIA roles and refined focus management to meet accessibility standards.

  • Modularized styles and components for a scalable, maintainable codebase.

Outcomes

The Gym Equipment Configurator is a scalable, user-friendly platform driving significant MRR. As the sole engineer, I seamlessly integrated design and functionality, ensuring performance, scalability, and an intuitive user experience. This project showcases the impact of combining technical expertise with a user-centered approach to deliver a sophisticated, future-ready product.