Inspiration
We realized that designing a closet is often an frustrating process. Off-the-shelf closet systems rarely maximize space, and custom solutions are expensive. We wanted to create a tool that would allow users to design a fully optimized, custom closet layout in minutes, with the freedom to design anywhere without an internet connection. Our core inspiration was to make professional-grade home organization accessible and highly efficient through a dedicated mobile experience.
What it does
Closet Designer is a cross-platform mobile application that allows users to:
- Design On-the-Go: Input their exact closet dimensions (width, height, depth) directly on their phone or tablet.
- Interactive 2D/3D View: Drag and drop modular components (shelves, drawers, hanging rods) to customize the internal layout. The design updates instantly in both a schematic 2D view and a rotatable 3D model.
- Real-Time Capacity: Automatically calculate storage capacity based on component placement and visualize how much inventory (e.g., shirts, shoes) the design can hold.
- Offline Data: Save and load multiple designs locally for quick access, quoting, and future modifications without needing cloud storage.
- Generate a Parts List: Create a final, exportable parts list with material dimensions and costs, ready for ordering or DIY assembly.
How we built it
We built the application using React Native for rapid development and cross-platform compatibility (iOS and Android). The user interface, including the drag-and-drop design canvas, was implemented using React Native's core components and Gesture Handler for smooth, intuitive mobile interactions.
The critical component was data persistence: all design data, component libraries, and user settings are stored on-device using SQLite3. We leveraged the react-native-sqlite-storage library to manage the relational data structure of the closet layouts, ensuring the app is fast, reliable, and fully functional offline. The 3D visualization was rendered using a WebView integration running a lightweight WebGL library like Three.js or a similar performant solution to minimize the app's overall package size.
Challenges we ran into
The primary challenge was managing the performance of the 3D rendering within the constraints of a React Native mobile environment, particularly on older devices. We had to heavily optimize the geometry and rendering logic to maintain a smooth frame rate during rotation and component manipulation.
The other major hurdle was managing complex relational data in an offline SQLite database. Ensuring the component library, user designs, and associated metadata (like calculated cost and capacity) remained consistent and easy to query required careful schema design and robust database migrations. We spent significant time ensuring ACID properties for save/load operations.
Accomplishments that we're proud of
We are most proud of achieving complete offline functionality. Users can be in a closet, taking measurements and designing, without worrying about Wi-Fi or cellular signal. This was a core goal and a major technical achievement. We are also very proud of the seamless performance of the 2D-to-3D visualization pipeline, which makes the complex task of closet design feel effortless and highly accessible on a small screen.
What we learned
We gained significant experience in optimizing React Native for complex UI/UX involving custom gestures and advanced state management. More specifically, we learned the nuances of mobile data persistence with SQLite3, understanding how to structure tables for a performant design tool rather than a simple content app. This project taught us a lot about the trade-offs between local performance and data complexity.
What's next for Closet Designer
- AR Measurement Tool: Integrate native Augmented Reality (ARKit/ARCore) features to allow the user to automatically measure the closet walls by scanning the room with their phone camera.
- Cloud Sync Option: Offer an optional, secure cloud backup and synchronization feature for users who want to access their designs across multiple devices.
- Material Integration: Expand the component library with a greater variety of finishes, colors, and hardware, pulling live pricing data (when online) from major retailers.
