💬 Chatterbox
January - May 2023
Chatterbox is a real-time messaging app similar to Slack, built with React and powered by Firebase. Users can connect effortlessly through channels by signing in anonymously, with Google, or with email and password. The user-friendly interface filters out inappropriate language, maintaining a positive environment.
👩🏻💻 Development
I started developing Chatterbox as part of the application process for a software development club on campus. The only real requirement was to allow users to post messages in real-time across multiple devices.
This was my first complex React project and my first time using Firebase and was pretty daunting at first. However, I got the hang of both and was able to create a message board that anyone could post to. As a bonus, I added bad word filtering using a library and incorporated user authentication via Firebase. I decided to support logging in with Google, email and password, and anonymous sign-in. I deployed this as my first Netlify website, submitted the project, and was accepted as a software developer!
I was proud of this project and decided to keep expanding it so I could sharpen my React skills. I created a list of features that would fit in nicely, prioritized them, and got to work. The biggest overhaul was the addition of channels to organize messages by topic. I restructured the way I organized messages in Firebase and enabled users to create their own channels. This required the front-end to look different, and I decided to add a sidebar. This was pretty challenging with my limited CSS skills, but I was able to create a layout I liked! I also added user profile updating capabilities to the app.
Login options
Sidebar with channel specificity
Channel creation page
💡 Future Ideas
If I get a chance to revisit this project, I would love to add message editing and deleting. The ability to select channels to join and exclude others is another feature I want, along with the ability to create private channels. Direct messaging would also be cool.
I also would use this app to get better at backend development. Currently, the front-end directly interacts with Firebase, and I'd be interested in replacing that with a new API that handles these requests.