Cat-alog

Have you wanted to visualize your dream room without the cost? This app will give you that, and allows to get creative with your design. Save your designs to a board and check out the possibilities.

Comment

Inspiration

Cat-a-log draws inspiration from the visual discovery of Pinterest and the immersive AR experience of the IKEA Place app. Pinterest inspired us to let users easily browse and collect décor ideas, while IKEA Place showed us the value of previewing furniture in real spaces. By combining these concepts, we created a lightweight, user-friendly application where users can explore categories, drag and drop items, and instantly visualize how their chosen pieces fit into their homes.

What it does

Once you allow the camera, you can use AR to drag and drop various objects into your environment.

How we built it

Had two teams to focus on frontend and backend. The front end focused on design and simple functionality. The backend implemented three.js and webXR. Their tasks included loading 3d models, object manipulation, and plane detection.

Challenges we ran into

  1. Button functionality for smooth screen navigation
  2. Figuring out the right CSS attributes for a clean, responsive layout
  3. Integrating UI with the AR features
  4. Managing and retrieving 3D furniture models efficiently
  5. Ensuring real-time communication between front end and back end
  6. Optimizing data so AR objects load quickly without lag
  7. Loading the models individually
  8. Running out of bandwidth for hosting
  9. Figuring out how to do hit detection
  10. Having object be on the ground when spawning

Accomplishments that we're proud of

  1. Designing a custom GIF from scratch
  2. Strengthened our CSS and JavaScript skills
  3. Successfully integrated the Augmented Reality feature with our front-end
  4. Built core AR logic for placing, moving, and removing furniture models
  5. Created APIs for smooth front-end integration

What we learned

  1. Importance of user-centered design for an intuitive interface
  2. Basics of working with AR and connecting it to front-end code
  3. Team collaboration and efficient task division
  4. Problem-solving under time constraints while balancing design and code

What's next for Cat-a-log

  • Mobile Compatibility: Optimize the app for smartphones, ensuring seamless performance across screen sizes.
  • Dynamic Screen Rotation: Support both portrait and landscape modes for flexible user experiences.
  • Design Capture: Allow users to save and share screenshots of their decorated spaces.
  • Personalized User Profiles: Enable saving favorite furniture, custom boards, and previous room setups.
Share this project:

Updates