Chat App with React and Firebase

React and Firebase are two technologies that are becoming more and more mainstream. You may have heard of both, but how do the pieces fit together? Join us in this series as we take React and build a chat application that leverages Firebase for all of the backend services. You will discover building React components, using Firebase observers to sync data to your front-end application, the difference between Stateful and Stateless Functional Components, and much more. If you are looking to level up your understanding of React and Firebase, then we will see you there!

In this episode, Justin and Peter talk about what goes in to creating a chat app with Reach and Firebase. Justin shows how to setup a new app in React and some of the tools that will be utilized from Firebase.

Now that the foundation is ready, Peter and Justin begin coding a chat app. The first step is to configure the signup component using the tools provided in Firebase. Justin will review the different options available and review the pros and cons of each.

Now that people can sign up, we need to let them login with their new credentials. In this episode Peter and Justin show you how to create that component and the key differences from the registration component that was previously created.

Now that the react app has started, we can start to pull elements from Firebase. In this episode, Justin and Peter show how to add and install the firebase service and give an overview of the features it provides.

With firebase installed and setup, Peter and Justin show how to use it to create the sign up section of the chat app. Justin also shows the different authentication options preloaded in firebase and how to make customizations.

With the sign up process complete, Justin and Peter use the log in functionality from firebase to authenticate users. Justin shows how to add that feature and test that it’s working with the sign up component.

In this Episode, Peter and Justin take a break from coding the chat app to add in some styling elements. Justin shows how to leverage Bulma to easily add design elements with cascading style sheets (CSS).

Adding in this much style isn’t easy, so Peter and Justin decided to do a second episode to finish. They continue to use the CSS provided by Bulma and show how to edit that file to create personalized elements within the app.

With the login feature complete, Peter and Justin move to creating the sidebar component. Justin shows why it’s important to break that feature in to its own component to make the code easier to manage.

In this episode, Justin and Peter begin developing the room list component in the app’s sidebar. They start by creating room names and adding them to the sidebar, giving users the ability to be able to see the room options.

In this episode, Justin and Peter continue to code the room list component. Now that it is created, Justin shows how he cleans up the code to make it easier to follow.

With the code better organized, Justin and Peter are ready to complete the room list component. In this episode, Justin sets the sidebar so clicking on a room actually sets a unique state which will allow chats to stay specific to them room they were written in.

When the app was originally created, it was set to log users out each time the app refreshes. In this episode, Justin and Peter will show how to change this to have users logged in until they log out using the tools provided in firebase.

In this episode, Justin and Peter get started on the heart of the applications - the chat panel. They begin by creating a new functional stateless component then and start coding.

Justin and Zach cover building the Chat Panel, Chatem, chat panel components, render message list, grid layout, UI implementation, UL, message list, and Moment js.

Justin and Zach conclude building the Chat Panel, sending a message to a room, App.js, React application, and Firebase.

Justin and Zach cover how to set up toggling the signup & login components in the Chat Panel with React and Firebase.

Justin and Zach cover how to add/modify a Room, keys issued by Firebase, Add-Room-Form component, Room-List component, maintain styling, refactoring, Build The Form, Placeholder = 'RoomName...', modify State, React Dev Tools, functional Sateless component, Rooms in the Firebase, and created date.

Justin and Zach continue to add a Room, LoadData, roomRef, data snapshot, and persists on refresh.

In this episode, Justin and Zach finish up the room adding functionality.

Justin and Zach cover deploying the Chat App to firebase, CSV of users, choices of hosting, static assets, steps to deploy, login to Firebase, and Firebase CLI.