Real-Time Chat App with React and Google Firebase - Connection with Email, Github, Facebook or Google

April 2020

🔨 Chat made with React using Google Firebase as DB to store messages and for the connection (sign up / log in) . From CSS Tricks 'Building a Real-Time Chat App with React and Firebase'.

See the demo on Heroku.

Homepage

Sign Up

Chat

About

• /components: contains reusable widgets used in different pages (footer, header)
• /helpers: a set of reusable functions (auth, db)
• /pages: the app views (Home, Signup, Login, Chat)
• /services: third-party services that we’re using (Firebase)
• App.js: the root component

Authentication

How to use

Local

• Clone the local-version branch
• Update node_modules: npm install
• To run: npm start
• Open the app using http://localhost:3000/

Online

See the demo on Heroku.

Usefull links

• Building a Real-Time Chat App with React and Firebase
• Building a Real-Time Chat App with React and Firebase: Github sources
• What are Higher-Order Components (HOCs) in React?
• The Circle of a React Lifecycle
• Github: Register a new OAuth application
• Facebook for developers
• Firebase: Allow creation of multiple accounts with the same email address
• Deploy Your React App To Heroku