Self Storage units are the number one way for college students and young professionals to store their belongings while taking time off school or relocating for jobs.

However, renters often run into the issue of not knowing which storage unit to get to fit all their possessions. If you want to play conservative and get an extra large space, you might run into the issue of wasting all the empty space and pay extra for nothing. If on the other hand, you want to try to fit everything in a small space, you might run into the issue of needing to stack everything multiple layers, which could potentially damage your belongings.

As college students, we found that the existing storage estimation tools were overly simplistic. They took into consideration only volume and not dimensions, and were difficult to trust due to their lack of visualization, so we created Box-it the ultimate app for storage estimation.

What it does

Box-it allows people to put in the item people have as well as their quantity through our interactive bar. Or they can also take a picture of the item and our image recognition software will be able to detect the object in the picture and put it in for you. Then, we will run the algorithm and come up with an estimate to the storage unit you would need to store everything you put inside it as well as how to store it with our dynamic visuals.

How we built it

We used typescript for the frontend. For the interactive diagram, we decided to use three.js for the model and rendering. For the backend, we decided to use Express.js and Node.js to make the server component. We also integrated Google-vision-API for image recognition purposes. Lastly, the entire product is deployed using Heroku.

Challenges we ran into

The two main challenge we had is configurating the Google Vision API and building the model in three.js. This was the first time we used any of the google products so there was definitely a learning curve to get use to the configuration and everything. It took us a bit of time to go through the documentation. We also had issue with three.js. It was our first time using a modeling tool like three.js so we were unexperienced with a lot of its concepts and how it render the model. Furthermore, each model need to be written independently (because each model is so different from one another). Therefore, we had to spend a lot of time building all these models. Furthermore, the models sometimes may render in an untended way, which also took us a while to fix. Furthermore, getting to know the algorithm from the paper is also a big challenge. A lot of those paper are really in depth and really required us to do a lot of searching to be able to understand.

Accomplishments that we're proud of

Our proudest accomplishment has to be the three.js modeling. Before we started the project, we didn't think we could have created so many models in such short amount of time. However, we were really glad we eventually managed to do it. It was also quite rewarding to see how creative we can be with some of the models, which we are really proud of.

What we learned

There was definitely a lot of learning that we took away from it. We learned how to use three.js, google-vision-api as well as had an further understanding to typescript and express.js. Furthermore, we also got a chance to read some of the paper in the field to learn about the algorithms related to packing problem. Overall, it was a super rewarding experience and we definitely took a lot from it.

What's next for Box-it

The next steps for box-it can be mainly divided into two parts:

  1. We want to develop our own image recognition api instead of continuing using the one from Google. This can allow us to have more autonomy on the labels we use. Instead of having google giving us all these labels and we iterate through it and select the ones we want. We want the API to recognize only a couple labels from the start. Furthermore, we also hope to add some more functionalities to the existing API. A lot of what people will actually store in storage unit tend to be rectangular boxes. With the existing API one can only recognize if this is a box or not but cannot distinguish the different types of box base on dimension. Therefore, we are hoping to write an API that can do dimensional analysis to output the dimension of the object to make the experience a more seamless one.
  2. We want to develop the Package API we used. The currently one can only perform on regular shaped objects. We recognize there are a lot of irregular shaped objects out there and we want it to be possible to recognize those as well. Therefore, we will probably find some more paper on this issue and try to build a better algorithm that can do that.


Ma, Y., Chen, Z., Hu, W., & Wang, W. (2018). Packing irregular objects in 3d space via HYBRID Optimization. Computer Graphics Forum, 37(5), 49-59. doi:10.1111/cgf.13490

Fu, H., Jia, R., Gao, L., Gong, M., Zhao, B., Maybank, S., & Tao, D. (n.d.). 3D-FUTURE: 3D Furniture shape with TextURE. Retrieved April 30, 2021, from

Share this project: