WeBubble

WeBubble: Cast anonymous thoughts into a sea of silent stories. Share secrets, read others', no replies—just connect in quiet.

Comment

HackNJIT_2023 - WeBubble

YeJu Lee, Steven Packard

Inspiration

Rutgers University has a missed connections page, which behaves as an anonymous posting board for people hoping to reconnect with someone they have seen but have not taken their contact info. To drive home the NJIT Hackathon's nautical theme, we turn inspiration from a message "lost at sea", to a "message in a bottle", then eventually bubbles rising from the ocean (since 'chat bubble' is a common term).

What it does

Users can see the most recent anonymous posts submitted to website, or contribute their own anonymous message for others to see. May be used to spread positive affirmations or even behave as the 'missed connections' page it was inspired by.

How we built it

  • HTML, CSS, JavaScript for the front-end
  • ExpressJS to connect front-end and back-end
  • Socket.io to connect to database and live feed
  • NodeJS for the server-side back-end
  • Heroku Cloud for app/web hosting
  • MongoDB for message storage
  • GoDaddy for domain

Library used:

Since submissions are anonymous, bad apples are bound to submit explicit language. To prevent this, we used a public library called "bad words" (linked below) to filter out profanities before they reach the server. *https://www.npmjs.com/package/bad-words

Challenges we ran into

  • Learning fundamentals from scratch: --- Yeju relearned HTML and learned CSS from scratch. Constructed the design of the website and HTML structure. --- Steven worked with Socket.io, MongoDB, ExpressJS for the first time. Difficulties during the steep learning curve.
  • Difficulties in CSS (animations, random-positions, images, scaling)
  • Connecting the database to the local code
  • Having Heroku connect to MongoDB

Accomplishments that we're proud of

  • Learning HTML and CSS and utilizing it in four hours
  • Creating a functional project (YeJu's first hackathon!)
  • Learning CSS animations and how to make it wonderful
  • Setting up a functional database that connects to our code

What we learned

  • Web sockets, connecting databases, deploying websites online
  • HTML and CSS
  • Maybe not have homework due the next day

What's next for WeBubble

  • Have bubbles that were from earlier texts rise as you pop a recent bubble

Links Used:

https://www.godaddy.com/ https://dashboard.heroku.com/ https://www.mongodb.com/ https://www.npmjs.com/package/bad-words

Learning:

Troubleshooting:

Share this project:

Updates