RoomBuilder

Home Screen/Default Screen
Placeholder Room Template
AI Suggestions Loading
AI Suggestions from Real Stores
Object Moving and Editing
Item Info using View Mode
Community Section

Inspiration

I had trouble during my move-ins, trying to bring as much as I could to fill in my room so it didn't look so empty. Even though I measured out the dimensions of my future rooms, I still couldn't fit everything that I wanted to. That's when I had the idea of creating a perfect web app that can assist those like me who have a hard time fitting their needs and wants into their rooms.

What it does

The web app allows a user to reimagine their room with technology! The 3D environment allows for multiple different types of room designs with the same furniture, as well as a budget calculator to keep track how much the user has spent on their future room!

How I built it

The project was built mostly with TypeScript, using a Three.js library in unison with React Three Fiber to render the 3D environment, and the React.js framework to help with structuring the web app. As for the suggestions and community based posts, those were made using Gemini API to search and comb through the internet to find decorations catered towards the user's preference, and Firebase Firestore to store their designs and publish them to the web.

Challenges I ran into

There were many challenges I ran into, the biggest one being rendering the 3D space in a web app and making it interactable with the user. It took a lot of time debugging and searching online to help me throughout the process of creating a good render, and it eventually worked. The second biggest problem with the web app was allowing the 3D render to be rearranged so that the user could reorient their room to their liking.

Accomplishments that I'm proud of

To be frank, the biggest accomplishment of this project by far was the success of my render, where the web app's 3D visualizer was visible, allowing me to continue to work on the geometry and movement of the decorative furniture and items.

What I learned

I learned a lot about what it takes to create 3D renders without using other programs like Blender. Not just that, I honed my skills in HTML and TypeScript a lot more, whilst learning about a completely new way to view objects in 3D.

What's next for RoomBuilder

RoomBuilder will continue to be worked on in the background as I start working on other projects, and hopefully, people will begin to use the app to assist in brainstorming and designing future rooms, so they can plan their living situation better with less stress in moving in.