In this blog I'm going to recreate Slack using Firebase, HTML, CSS and Javascript.

In the first part of this tutorial, we looked at the basics of HTML, CSS and Javascript. In this section, I want to dig a little deeper into Firebase's data structure, and how you can create you own functionalities.

Similar to the first section, I have created short videos that you can follow along to, as well as diverge from to make something unique!

Structure of this Post

Under each video, if there were any sites that I used, I will attach a link. Or if there was any code that I created that was not explained in detail I will paste it below.

1) Revisiting the Data in Firebase

2) Saving Users Data

    a) Creating the Users Node
    b) Check if the User is New
3) Retreiving User Data

NOTE: Please note that I am still learning as well and sometimes I do silly things. Especially if something works, it becomes a habit and some would say borderline superstition. Throughout these videos I tell you to restart your sever again and again and again every time you make a change. This is not necessary. Only when you change things in your backend do you need to restart the server. Please ignore this in this tutorial, and I will update the content in the future.

Revisiting the Data in Firebase

For more information on the getAuth() Function.

Saving Users Data

Creating a Users Node

Check if the User is New

This video is also a little rough to watch but hopefully I explain why we are using the exists function and how we can check for new users. If you have any questions, please leave me a comment!

For more information on the exists() Function.

Retrieving the User Data

So that covers the basic calls to our Database, you should play around with your chat application a bit more, create new functionality such as channels, and switching rooms, sounds when someone sends or recieves a message, ability to have private conversations, and favourite certain users etc.

If you are interested in learning more about Firebase, I strongly recommend checking out Code4Startup's Task Rabbit Tutorial which looks at Angular, Firebase and Bootstrap!

comments powered by Disqus