<h1 id="heading-react-discord-clone">React Discord Clone</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1645048599759/fBWrTS2QT.png" alt="image.png" /></p>
<p>Follow along with the youtube tutorial  <a target="_blank" href="https://www.youtube.com/watch?v=zc1loX80TX8&amp;ab_channel=CleverProgrammer">🔴 Build a Discord clone with REACT.JS for beginners! (With REDUX)</a> and set up the firebase app.</p>
<p><strong>The clone is limited to simple multiple channels messaging app.</strong></p>
<h2 id="heading-what-i-have-learned">What I have learned?</h2>
<ul>
<li>CSS modules</li>
<li>React Redux</li>
<li>Integration of Firebase for database and hosting (firestore=realtime Firestore database to store comments)</li>
<li>Integrate Firebase with Google authentication</li>
<li>Integration of  Material ui (<a target="_blank" href="https://material-ui.com/">https://material-ui.com/</a>)</li>
</ul>
<h2 id="heading-steps">Steps</h2>
<p>Create react app sample and start the app</p>
<pre><code>npx <span class="hljs-keyword">create</span>-react-app discord-<span class="hljs-keyword">clone</span>
cd discord-<span class="hljs-keyword">clone</span>
npm <span class="hljs-keyword">start</span>
</code></pre><h3 id="heading-components">Components</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1645048846604/WjN47R2av.png" alt="image.png" /></p>
<ul>
<li>App</li>
<li><ul>
<li>Sidebar</li>
</ul>
</li>
<li><ul>
<li><ul>
<li>SidebarChannel</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li>Chat</li>
</ul>
</li>
<li><ul>
<li><ul>
<li>ChatHeader</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><ul>
<li>Loop of [Message]</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="heading-react-modules">React modules</h3>
<ul>
<li>install redux with
<code>npm i redux</code></li>
</ul>
<h3 id="heading-deployment">Deployment</h3>
<ul>
<li><p>Install Firebase for backend with
<code>npm i firebase</code></p>
</li>
<li><p>Login to the app with firebase
<code>firebase login</code></p>
</li>
<li><p>Deploy firebase with the following command in the console</p>
</li>
</ul>
<pre><code>firebase init
Enter yes to proceed
? Hosting: Configure and deploy Firebase Hosting sites
? <span class="hljs-keyword">Use</span> an existing <span class="hljs-keyword">project</span>
? discord-<span class="hljs-keyword">clone</span><span class="hljs-number">-6</span>ee6e (discord-<span class="hljs-keyword">clone</span>)
? What <span class="hljs-keyword">do</span> you want <span class="hljs-keyword">to</span> <span class="hljs-keyword">use</span> <span class="hljs-keyword">as</span> your <span class="hljs-keyword">public</span> <span class="hljs-keyword">directory</span>? <span class="hljs-keyword">build</span>
? Configure <span class="hljs-keyword">as</span> a single-page app? Yes
</code></pre><ul>
<li>Clean and create the version to deploy with
<code>npm run build</code></li>
<li>After any update, run the command again and deploy with
<code>firebase deploy</code></li>
</ul>
<h2 id="heading-link">Link</h2>
<ul>
<li><a target="_blank" href="https://discord-clone-6ee6e.web.app/">Live</a></li>
<li><a target="_blank" href="https://github.com/leopaul29/discord-clone">GitHub</a> </li>
</ul>


# React Discord Clone



![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645048599759/fBWrTS2QT.png)

Follow along with the youtube tutorial  [🔴 Build a Discord clone with REACT.JS for beginners! (With REDUX)](https://www.youtube.com/watch?v=zc1loX80TX8&ab_channel=CleverProgrammer) 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/](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


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645048846604/WjN47R2av.png)

* 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](https://discord-clone-6ee6e.web.app/)
* [GitHub](https://github.com/leopaul29/discord-clone) 

⚙ React Discord-clone

React Discord Clone

What I have learned?

Steps

Components

React modules

Deployment

Link