WordPress Plugin Dev - Build & Deploy A React.js Chat App On WP Page Template Via A ShortCode Plugi

This is about creating a Direct Messaging-based Chat Application with React.js & SCSS and deploying that on a WordPress page template via a WP plugin-generated Shorcode.

I created the React App using create React app first, styled it, and debugged it. Then wrote a simple plugin to generate a WordPress Shortcode which displayed an HTML block with an ID and used that ID to target my React Chat App onto the WordPress page template.

As a backend, I used Chat Engine as a service and used components from their core code from Github and altered them to make my own components to customize the Chat App. By default, Chat Engine was designed to show group chats, but I needed to create a Direct Messaging based Chat system like Slack. So, I had to make heavy changes to the default Chat Engine components.

I found too many bugs in Chat Engine's code for the mobile side. Had to implement lots of React & jQuery trickery to bypass those bugs. Unfortunately, I received no support from the Chat Engine team. I opened at least 3 bugs in their GitHub repo but never hear back from them ever.

One specific thing I have to mention is that to create the left column Chat List search functionalities I had to use jQuery inside React.js. Under the circumstances, I had no choice. But it worked. That's all that mattered to me.

HERE ARE MY GITHUB LINKS:

The Framework
https://github.com/ahmedmusawir/react-ready-plugin-framework-2022

The MooseChat App Plugin
https://github.com/ahmedmusawir/moose-chat-plugin-v2