CompareSffSize

Problem

While planning my own SFF (Small Form Factor, PC cases typically under 20 litres in volume) build, I found it tedious to navigate multiple product pages just to gather basic size data. It was also difficult to meaningfully visualize the differences between cases, since they vary greatly in proportions. Similar sites like comparesizes.com and comparesffpc.com exist, but I found their UX lacking.

Solution

Built a 3D comparison tool that renders PC cases from real dimensions. Includes a pre-populated database and option for users to add custom items for easy comparison. Deployed on a VPS with custom domain and SSL.

Demo

Notable Tech Used

Technical Challenges

• 3D Scenes and Camera Positioning: When rendering multiple objects it becomes difficult to guarantee every item fits in the same view. To ensure all objects fit in view, the camera was auto-centered using drei helpers. Object positions were calculated dynamically based on their widths and gaps, updating bounds whenever the selection changed.
• Drag and Drop: The items list should be re ordered so the user can compare items side by side in the canvas. I originally implemented a drag and drop system using the native HTML Drag and Drop API however it does not support mobile input or keyboard events. An external library dnd-kit was used to provide additional accessibility.
• Form State Management: The item form handles both creating new cases and editing existing ones, with different validation and initial states. Used a mode prop and conditional initialization. Plus careful handling of the category switches which clears or restores form data depending on context.
• Responsive Mobile Layout: The split-pane design (3D canvas + item list) does not work well on mobile screens. This was solved by implementing a toggle view tab system where mobile users switch between the canvas and item list views.
• Database Management: A JSON file was used as a simple client-side database to avoid setting up a server. Initially easy to manage, it became cumbersome as the project grew. A basic form was added to edit and download an updated JSON file.

Lessons Learned

• React Three Fiber abstraction layer: Learned how React Three Fiber simplifies Three.js development by treating 3D objects as React components with props and hooks, making 3D scenes more maintainable and declarative compared to imperative Three.js code.
• Drag and Drop accessibility: Gained experience implementing accessible drag-and-drop using dnd-kit, including keyboard navigation support and proper ARIA labels for screen reader users.
• Data fetching with Caching: Understood how TanStack Query’s caching eliminates redundant network requests and provides consistent loading/error states across components, simplifying async data handling compared to manual fetch implementations.