Inspiration
Think back to the early 2000s- the time of innovation, glossy logos, and AOL Instant Messenger. A time when people didn't chat with AI, but with each other. A time before widespread social media, when genuine and candid human connection was truly valued. That is the beautiful time we were trying to emulate with ChatBubble.
What it does
Have you ever needed to chat with someone, but didn't want to share your personally-identifiable information, such as a phone number? Maybe you were in a project group or on a multiplayer game. Unfortunately, even standard messengers like Discord and GroupMe have their drawbacks; to chat with users, they must learn your username and can message you again later! ChatBubble is different. It maintains user anonymity will promoting a healthy communication environment. Instead of DMing a person using their profile information, simply give them a join code. Near-instant messaging allows you to chat without delay and without ever having to exchange numbers. Worried about your messages leaking? Our end-to-end encryption is designed to keep your messages unreadable to anyone accessing the database.
How we built it
We built it using a React frontend with JavaScript. Our Firebase backend handles authentication and stores encrypted messages within a Firestore database. The database is also used to hold and exchange public keys for messaging. The Web Crypto API handles cryptographic key generation, shared-secret derivation, and message encryption and decryption. Private keys are stored locally, while public keys are exchanged through Firestore.
Challenges we ran into
One of our main goals for this app was security and anonymity, so we knew that encryption was a must, even though none of us had experience with cybersecurity or messaging protocols. We researched cryptographic approaches that would fit our time frame and settled on Elliptic-Curve Diffie–Hellman (ECDH). When a user first sets up their account on a device, a public-private key pair is generated. The private key is stored locally in the user's browser, while the public key is uploaded to our Firestore database. When two users communicate, their devices use their own private keys and each other's public keys to independently generate the same shared secret. We then use HKDF to derive an encryption key from that secret, incorporating the chat room ID as context. To encrypt and decrypt messages, we use AES-256-GCM. When Person One sends a message, his device encrypts it before sending the ciphertext to Firestore. Person Two retrieves the encrypted message and decrypts it locally using the same independently derived key, without the key ever being sent through the database.
Accomplishments that we're proud of
As detailed above, completing the messaging functionality was a huge accomplishment for us. Using React was also an ambitious choice due to our small amount of experience with the framework across our three members; however, we are really happy on what we were able to learn. We are also very proud of our fruitiger aero UI/UX design. One of our members (Ashe) created the graphics and did most of the CSS by hand, so we feel that it has a very custom look and recalls a time that is nostalgic for all of us.
What's next for ChatBubble
In the future, we hope to expand the app to include group messaging. We also have plans for additional features such as accessibility controls like as voice capabilities like TTS and speech-to-text, font size settings, and an integrated dictionary.
We also made multiple graphics that we did not get a chance to implement, that we would like to add in eventually. We also want to add a CSS bubble animation for sending a message.
Log in or sign up for Devpost to join the conversation.