React frontend Chat App

Formerly known as Bloc-Chat. This is a SPA chat app built with React.js and Firebase as the NoSQL database. You are able to log in using Firebase for authentication, create new chat rooms as you see fit, and of course – chat with others.

Technologies Used:

  • npm – Node package manager
  • React Developer Tools Chrome extension – helped with debugging
  • Firebase – Backend as a Service (BaaS) NoSQL database.
  • JSX – This was written with JSX which is JavaScript expressions with an HTML-like syntax
  • React Router – to help with client-side page transitions
  • Git – version-control
  • CSS/CSS Grid- for layout and style
  • Bootstrap – for some style
  • React – timestamp – for showing dates/times of newly created messages

List of features:

  • Create chat rooms to talk about different topics
  • Firebase authentication to authenticate users
  • Create messages to talk with others

This was a step up in difficulty level from my last React project, “Resonate.” This gave me more practice building with React and this project also introduced me to Firebase which is a Baas (Backend as a Service). Firebase is used for database storage, authentication, and hosting so this was a perfect tool for this project since I needed a place to store the chat rooms and the messages that went along with it.

To create this project I needed to:

  1. Create the React App
  2. Set up Firebase by creating a “Realtime Database” and adding Firebase to my app.
  3. Give the user the ability to create rooms
  4. Give the user the ability to see a list of messages that is associated by the user’s current ‘active’ room.
  5. Using Firebase Authentication, I needed to figure out how to set/display a username for each user, give him/her the ability to sign in/out, and store user data.
  6. Give the user the ability to send messages associated with his/her username.
  7. Give it some style

In the near future I plan on adding additional features such as deleting/editing rooms and messages because that is what I would want as a user. There’s always room to grow!

But for now if you’d like to see it in action or go behind the scenes you can view it here:

Published by lauramariemeehan

Full-stack JavaScript web developer looking for interesting front end development positions in Snohomish and King counties, in Washington state.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s