React.js Firestore Project to Build Public Chat Room Using Google Login Authentication in TailwindCSS

 

 

Welcome folks today in this blog post we will be building a public chat room app inside browser using firestore realtime database.

 

And inside the front end we will be using the tailwindcss library.

 

 

First of all create a new react.js project

 

 

npx create-react-app publicchat

 

 

cd publicchat

 

 

npm i firebase

 

 

npm i react-firebase-hooks

 

 

npm i react-google-button

 

 

 

Configuring TailwindCSS

 

 

npm install -D tailwindcss postcss autoprefixer

 

 

npx tailwindcss init -p

 

 

tailwind.config.js

 

 

 

 

Now create the firebase.js file and copy paste the config code

 

 

 

 

index.css

 

 

 

 

 

App.js

 

 

 

 

 

Now create the components folder and inside it create a Chat.jsx file and copy paste the below code

 

 

 

 

LogOut.jsx

 

 

 

 

 

Message.jsx

 

 

 

 

Navbar.jsx

 

 

 

 

SendMessage.jsx

 

 

 

 

SignIn.jsx

 

 

 

 

npm start

 

 

 

 

 

Leave a Reply