Portable Chat Plugin


The Daily Slate | Portable Chat Plugin
In this tutorial, we build a React based portable chat module that can be loaded into any website as a plugin. The plugin will then load a series of comments specific to the site or page and allow readers to add their own comments. All comments will be updated in real time using Firebase for a backend. A key feature of this project is that the result can be used in other sites that do not use React, Redux, Node and such. It can be added to any site by simply including the script tag - essentially a stand alone plugin.

Who

This tutorial is well suited for beginners who have basic Javascript experience but little to no knowledge of React and Redux. If you are a complete beginner with no coding experience at all, this is too advanced and we suggest learning the basics of Javascript and object oriented programming (tutorials on that will be posted soon).

What You Will Learn

This tutorial uses:
  • React
  • Webpack
  • Babel
  • ES6
  • Firebase

Units


1. Setup and Basic User Interface

In this video, we set up the widget on the lower right corner of the page and use an article from CNN.com as an example of realistic content. We enable the widget to toggle between showing & hiding comments then add a comments components. Comments are loaded locally in state for now and will be connected to a live Firebase backend in video 2.

2. Connecting To Firebase

In this video, we connect our comments module to Firebase in order to save comments and load new ones in real time. We then structure our Firebase backend to uniquely identify the url for each set of comments thereby enabling the plugin to load comments specifically for the page currently rendered.

3. Design and Distribution

In this video, we enhance the UI and design to give the chat plugin a better appearance. We also incude timestamps on each comment. Finally, we package the plugin for distribution and test it by hosting the JS bundle also on Firebase then integrating it in an entirely new project with no React setup whatsoever. When said and done, the plugin is truly portable and able to be used in any project, React or otherwise

Purchase

$15.00

Purchase this tutorial for $15 and receive all videos, code samples and access to the forum where people post questions and answers.

Purchase, $15

Membership

Premium

$19.99/month

Join as a premium member for $19.99 each month and receive unlimited access to all tutorials, code samples, and forums on the site.

  • Downloadable Code Samples
  • Downloadable Videos
  • Q & A Forum Access
  • Discounts on Live Courses
Join

Basic

Free

Join as a basic member to gain access to the free tutorials, get notifications when new tutorials and courses are published, and participate in the Q&A forums.



Join