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:
- Create the React App
- Set up Firebase by creating a “Realtime Database” and adding Firebase to my app.
- Give the user the ability to create rooms
- Give the user the ability to see a list of messages that is associated by the user’s current ‘active’ room.
- 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.
- Give the user the ability to send messages associated with his/her username.
- 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:
