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..
What You Will Learn
This tutorial uses:
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
Click the button below to subscribe to this tutorial.
Premium members can subscribe for free.
Can't make it to our live courses? Join our online membership for video tutorials, code samples and access to our Slack Channel.