Laravel React Realtime Chat App
A Real Time Chat Web App made using React & Laravel, powered by WebSockets, with user to user private chats, channels for chatting between multiple users, notifications and a host of other features
📷 Image Gallery
💪 Motivation
Laravel React Realtime Chat App was created to help me learn Laravel, as well as ressurect my 4 year old dead Project that was also called Realtime Chat App, except it was built on the MEAN stack and used Socket.IO in place of WebSockets, which I never completed, much less Deploy it like I have with this new, improved and feature-complete reincarnation of it.
🛠️ Technologies Used
🔥 Challenges Faced
This is perhaps my most challenging side project till date, mainly because Laravel is ill-suited to the Web App model where you have a SPA built with a JS framework on the client side, which communicates with the server backend through a REST API.
Laravel seems designed more towards the traditional page based model, having prebuilt Authentication functionality templates and a robust templating engine, It also didn’t help that the “chosen” framework per the docs and online resources to go with this was Vue.JS and not React.
Another pain point was that the official Laravel docs utilize 3rd party services Pusher for “real time” functionality, instead of having a package that you can install and run locally, like how Socket.IO does, thankfully I found out about a package called “Laravel WebSockets” which is essentially a compatibility layer between the built-on-Pusher event Broadcasting features of Laravel, and Ratchet, which is a PHP based WebSocket server, this can be run natively on a host and didn’t require any third party services.
🎓 Lessons Learned
This project made me get out of my comfort zone to develop, test and deploy a fully functional real time chat app, using a Framework I had no prior experience with, and using a Package about which there wasn’t much documentation or resources aside from very trivial tutorials that didn’t teach me anything worthwile.
It has strengthened my SQL skills, adeptness with React & Redux and taught me new things about deploying a complex PHP app such as this, using NGINX to direct incoming requests to either the main PHP-FPM serve or the WebSockets server, Along with making me more patient and dedicated to finding solutions to the problems I encountered in building this through my own skill and innovation.
⭐ Features
- Real Time Chatting
- Direct Message chats between two users
- Friends system for Direct Messaging.
- General Channel where all users can Chat
- Groups Chat Channels, which can be Public or Private
- Create your own Group Channels
- Invitations or Request-to-Join for Private Channels
- Notifications system for friend, invite or join requests, delivered in real time
- List of all channels created on the Web App
- Online/Offline status changes in Real Time, for users on DM list
- Members List pane showing users Active or Offline in Channel in real-time
- Default Display Picture/Avatar on registration based on name initials.
- Upload custom Avatar image and Cropping functionality.
- User Profiles with changeable descriptions