<h1 id="heading-react-facebook-messenger-clone">React Facebook-messenger Clone</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1644930763974/F_awVeNOd.png" alt="image.png" /></p>
<p>Follow along with the youtube tutorial  <a target="_blank" href="https://www.youtube.com/watch?v=KB7JEnfc7Dc&amp;ab_channel=CleverProgrammer">🔴Full Stack React and Firebase Tutorial - Build a Facebook Messenger Clone</a> and set up the firebase app</p>
<h2 id="heading-what-i-have-learned">What I have learned?</h2>
<ul>
<li>Getting started with ReactJs</li>
<li>Component oriented conception</li>
<li>React modules </li>
<li>React forward ref</li>
<li>CSS BEM convention (check <a href="http://getbem.com/naming/" class="autolinkedURL autolinkedURL-url" target="_blank">getbem.com/naming</a>)</li>
<li>Integration of Firebase for database and hosting (firestore=realtime Firestore database to store comments)</li>
<li>Integration of Material UI (<a href="https://material-ui.com/" class="autolinkedURL autolinkedURL-url" target="_blank">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 create<span class="hljs-operator">-</span>react<span class="hljs-operator">-</span>app facebook<span class="hljs-operator">-</span>messenger<span class="hljs-operator">-</span>clone
cd facebook<span class="hljs-operator">-</span>messenger<span class="hljs-operator">-</span>clone
npm start
</code></pre><h3 id="heading-components">Components</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1644960911656/g9Kpz0vme.png" alt="image.png" /></p>
<ul>
<li>App</li>
<li><ul>
<li>Messages list</li>
</ul>
</li>
</ul>
<h3 id="heading-react-modules">React modules</h3>
<ul>
<li>install flip-move for a smooth animation when sending message with
<code>npm i react-flip-move</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>Log in the app with firebase
<code>firebase login</code></p>
</li>
</ul>
<ul>
<li>Deploy firebase with following command in console</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>
? facebook-messenger-<span class="hljs-keyword">clone</span><span class="hljs-number">-8</span>cc6b (facebook-messenger-<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://facebook-messenger-clone-8cc6b.web.app/">Live</a></li>
<li><a target="_blank" href="https://github.com/leopaul29/facebook-messenger-clone">GitHub</a> </li>
</ul>


# React Facebook-messenger Clone


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

Follow along with the youtube tutorial  [🔴Full Stack React and Firebase Tutorial - Build a Facebook Messenger Clone](https://www.youtube.com/watch?v=KB7JEnfc7Dc&ab_channel=CleverProgrammer) and set up the firebase app

## What I have learned?

* Getting started with ReactJs
* Component oriented conception
* React modules 
* React forward ref
* CSS BEM convention (check http://getbem.com/naming/)
* Integration of Firebase for database and hosting (firestore=realtime Firestore database to store comments)
* Integration of Material UI (https://material-ui.com/)

## Steps

Create react app sample and start the app

```
npx create-react-app facebook-messenger-clone
cd facebook-messenger-clone
npm start

```


### Components


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

* App
* * Messages list

### React modules

* install flip-move for a smooth animation when sending message with
`npm i react-flip-move`

### Deployment

* Install Firebase for backend with
`npm i firebase`

* Log in the app with firebase
`firebase login`


* Deploy firebase with following command in console

```
firebase init
Enter yes to proceed
? Hosting: Configure and deploy Firebase Hosting sites
? Use an existing project
? facebook-messenger-clone-8cc6b (facebook-messenger-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://facebook-messenger-clone-8cc6b.web.app/)
* [GitHub](https://github.com/leopaul29/facebook-messenger-clone) 

⚙ React Facebook-messenger-clone

React Facebook-messenger Clone

What I have learned?

Steps

Components

React modules

Deployment

Link