Building web chat with ReactJS and Firebase

Quang Duy Tran
Nov 23, 2018 · 7 min read

Video demo


Let’s get started

Save this config and we’ll use it later
Use this mode for storage to accept only image file type
And this mode for database
The flow for this web app
Root screen
Simple login screen with google account
Require sign in with popup
UI main screen
Check login and get list user
List user
Rendering list user
Chat board
Loading history and listening new data added
Input form
Choose image from window and upload it
Open list sticker
Write new data to server
We should show the confirmation at first
Performing log out action
Profile screen
Upload avatar
Update info on both server and local

Node users
Node messages

Quang Duy Tran

Written by

My profile: https://duytq94.github.io/reactjs-my-profile/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade