Estopia Chat
This is a Chat App made in React. I made this to practice my skills with websockets commutations for real-time messaging.
This project has been archived. Development stopped when I moved my focus to Estopia Engineering.
This project is no longer hosted and has been replaced with a more professional and feature-rich landing page.
Project Overview
I am excited to show my project I have been working on for some time now, That is currently hosted on https://chat.estopia.net. I made this to practice my skills with websockets commutations for real-time messaging. The main use of this would be to have learn the knowledge of how social medias work and expanding my knowledge on databases and websockets.
Project Highlights
- Real-Time Messaging: I utilized websockets to allow for real-time messaging, to allow users to feel more interaction on the website.
- React and Node.js: I picked these due to the robust framework nature React has, as well as the powerful back-end that Node.js has, which provided a solid foundation for the website.
- MongoDB Database: I used MongoDB, so I could take advantage of it’s flexible NoSQL structure to store large amounts of data efficiently. This was particularly useful when dealing with messages and other dynamic content.
What I learned
- WebSocket Communication: and maintaining the connections between the client and the server.
- React Development: Gaining deeper insights into React’s component-based architecture.
- Database Management: I learned about the pros and cons of using a NOSQL database like MongoDB and a SQL like MYSQL.
- Backend Development: Adding to my ability to make and manage scalable backend services in Node.js. These have already gave me valuable information on my ongoing React Native project.
Challenges and Solutions
Challenge: Real-Time Communication Managing persistent WebSocket connections was a challenge.
Issue: I tried to identify what was causing the websockets to reset and not be synced, This was caused by:
- The backend using ‘multi-threading’, I tried to implement multi-threading to the websockets but this just caused issues with each ‘thread’ being out of sync with each other.
- The frontend was in a useEffect that seemed to reset every single time the user clicked on a new chat
My fixes:
- I reverted the mutli-threading on the backend to remove that issue
- I also made the frontend make the websocket connection on the main page, and then passing the arguments on to the sub pages using React’s feature set.
Challenge: Data Management Handling messages in a efficient manner.
Issue: I was stuck trying to find a nice and simple efficient way to handle messages
My fix: I researched the pros and cons for the major database types and made my decision based on this.
Link to the Projects
The website is currently hosted on https://chat.estopia.net
Future Plans
- End-to-End Encryption: To ensure user privacy and trust.
- Feature Expansion: Adding features like group chats and notifications.
- Mobile App: To add a simple way users can access the app on mobile devices
Conclusion
This was a fantastic experience, combing and working on multiple technologies and development practices. This helped me with my skills that I can now apply to more larger and complex applications. I am excited about the potential improvements and features planned for the future.