Our inspiration for this project came from the the website,, which allows you to throw a paper plane using your phone to someone across the globe and receive one in exchange, each marked with its own individual stamp. To implement the same sort of idea, we came up with Bottle It Up!

What it does

Bottle It Up! takes a user's information from their Facebook profile and allows them to send their own 'message in a bottle' as well as receive one, with all messages being stored and executed out of a particular database.

How we built it

We built Bottle It Up! using Javascript, Firebase, CSS, Bootstrap, and HTML.

Challenges we ran into

It was our first time extensively using Javascript, more specifically to access and use databases (and our first database usage, ever!). Our original background image for the second page was an SVG image pulled off of the web. The quality was lacking, and thus we decided to graphically design our own background.

Accomplishments that we're proud of

We are proud of successfully implementing the database to store user-inputted information as well as output random entries from the database. We also learned how to integrate Javascript with the Facebook API.

What we learned

We learned lots of Javascript and how to use databases, specially Firebase. In terms of Firebase we learned how to get and receive information from the database. We also learned how to use the Facebook API to receive user profile information such as their username and full name. Lastly, we learned how to create our own SVG images, such as the background image displayed on the second page of the website.

What's next for Bottle It Up!

We plan on taking the messages sent/received to a new level - users will be able to display their messages on their Facebook walls and share them with their friends. We would also like to add a system of 'restricted words' to the database.

Share this project: