React Discord Clone

Follow along with the youtube tutorial 🔴 Build a Discord clone with REACT.JS for beginners! (With REDUX) and set up the firebase app.

The clone is limited to simple multiple channels messaging app.

What I have learned?

• CSS modules
• React Redux
• Integration of Firebase for database and hosting (firestore=realtime Firestore database to store comments)
• Integrate Firebase with Google authentication
• Integration of Material ui (https://material-ui.com/)

Steps

Create react app sample and start the app

npx create-react-app discord-clone
cd discord-clone
npm start

Components

• App
• • Sidebar
• • • SidebarChannel
• • Chat
• • • ChatHeader
• • • Loop of [Message]

React modules

• install redux with npm i redux

Deployment

• Install Firebase for backend with npm i firebase

• Login to the app with firebase firebase login

• Deploy firebase with the following command in the console

firebase init
Enter yes to proceed
? Hosting: Configure and deploy Firebase Hosting sites
? Use an existing project
? discord-clone-6ee6e (discord-clone)
? What do you want to use as your public directory? build
? Configure as a single-page app? Yes

• Clean and create the version to deploy with npm run build
• After any update, run the command again and deploy with firebase deploy

Link

• Live
• GitHub