Dorm Designer

Collaborative online tool to help you remotely design your dorm with your roommate in real-time from anywhere in the world.

Comment

Inspiration

The theme for this Hackathon was "hack with a friend", and we decided that to reflect the spirit of this theme we should create an application that could be used by friends to mutually solve a problem. Because we are both rising college freshmen, an immediate problem facing us both is creating a layout for our soon-to-be-occupied dorm rooms that meets the needs of both ourselves and our roommates. For this reason, we decided to build an application that could help to make the process of creating a layout for a dorm room easier. - @sdsd19

I've been trying to plan my dorm with my roommate before I move in just two weeks, since I will be moving in a few days before he does and I don't want to set it up a way he doesn't like and have to rearrange everything, but when we've been talking on the phone (because we live several states apart), we keep misinterpreting each other's ideas. This led me to think it would be great if I could just draw my idea so we can both visualize it, and now I have a way to do just that. - @tfinnm

What it does

Dorm Designer gives you a floor plan of your dorm room and allows you to virtually arrange the furniture in it with your roommate. You can add and remove furniture, move it around, and rotate it, all while any changes are synced between both you and your roommate, allowing you to collaboratively edit together. Dorm Designer also allows you to select your dorm and automatically generate the initial floorplan based on the size/shape of the room and the furniture included with the room, all based on data scraped from the school's websites

How we built it

Dorm Designer uses Fabric.js to render and edit the floor plan of the dorms, the rooms are stored on a mySQL database as are the floor plans scraped from the schools. A PHP backend powers join rooms, both through keeping track of different rooms and their join links, as well as in relaying changes between clients and saving data. On the client side, a combination of SSE and ajax is used to send and receive changes that are made.

Challenges we ran into

Neither of us had used JavaScript recently, and neither of us had ever used the libraries that we were using to power this project, so there was definitely a learning curve there. Besides that, we had a fair few problems with weird behaviors of how some of the technologies we were using were implemented, for example, Fabric.js handles the collisions on an 8-sided polygon as a rectangle, so we had to build our own polygon class to have accurate collisions, similarly, HTML5 canvases simply refuse to follow typical html layouts, so we really had to work around that constraint in our design.

As my teammate, @sdsd19, put it: "Some of the challenges we ran into stemmed from limitations of the Fabric framework. The framework was, by the admission of its creators, not designed to handle collisions with complex shapes, which made it difficult to confine the furniture objects within the room."

Accomplishments that we're proud of

As always, I'm very proud of having completed a cool project is just a weekend, but there are also a few things special to this project that we're proud of. I'm especially proud that we could create something that is immediately useful to us. I'm also proud of having gotten to build something with a close friend from high school right before we split paths to go to college, and I think it is even cooler that what we built helps us with collaborating with the new friends we will have in college, kind of leading us onto our next phase in life. From a tech standpoint, I'm really proud of how we implemented cloud saving and syncing changes, because it is rather simple, but super robust.

What we learned

This project drastically improved our skills at working on team projects, and it definitely helped me improve my software architecture/design skills. It also served as a great refresher for us on JavaScript. This project also introduced us to some new super versatile and useful libraries like fabric.js which will likely prove useful again in the future, as well as exposing me to several technologies added in html5 that I've never had a chance to experiment with before.

What's next for Dorm Designer

Dorm Designer will be getting support for more schools, as well as more buildings/rooms as the currently supported schools and will be moving to a public website so that anyone can use it with their roommates. sdsd19 has also brought up: "At the start of the project we had initially discussed including user-controlled human avatars that could navigate the dorm room to simulate how inhabitants of the dorm might be able to move around with the designed layout. In the future, we may still want to implement these features."

Share this project:

Updates