Overview

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

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.

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.

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

Subscribe

Click the button below to subscribe to this tutorial.
Premium members can subscribe for free.

Online Membership

Can't make it to our live courses? Join our online membership for video tutorials, code samples and access to our Slack Channel.

Basic

Free
  • Access to Free Tutorials
  • Downloadable Code Samples
  • Downloadable Videos
  • Q & A Forum Access
Join

Premium

$14.99/mo
  • Access to ALL Tutorials
  • Downloadable Code Samples
  • Downloadable Videos
  • Q & A Forum Access
  • Discounts on Live Courses
  • Cross-Premium Membership to Turbo