Over the past two weeks, I went on a an exciting journey to build Devchat, a real-time messaging app specifically for developers. The goal was simple:
- Learn websockets
- Create a messaging app
- Make it open-source
But, as with any project, devchat brought its fair share of challenges, hurdles and triumphs.
Starting with the Basics
I decided to build the front-end with React and Vite. I had to think twice whether to use Nextjs but it figured it word a level of complexity to the project. For styling, Tailwind CSS and Daisy UI came to the rescue, making it easy to create responsive layouts without writing to much CSS.
The front-end's focus was all about simplicity and user experience. With React Router, I set up smooth transitions between routes, including user authentication, messaging components, and user profiles. When it came to handling state between components, I used zustand for the first time and setting it up was as simple is it could get. Real-time messaging was next on my list.
Backend Architecture: Node.js & MongoDB
The backend was powered by Node.js and Express, with Mongoose as the ORM for the Mongo database. Structuring the API to handle user authentication, chat room creation, and message storage required a bit of planning. I used JWT for secure authentication and MongoDB's flexibility to store messages and user data efficiently. I knew that this could be simply implemented using firebase but that meant I would miss out out on learning the core concepts of websockets.
One challenge I faced here was designing a schema that could handle a large number of real-time messages without impacting performance and user experience. It was crucial to effectively save every conversation between users to the database and sync them with broadcast them to the client without conflict. After some thorough digging I found a solution.
Deployment & Scaling
Once the core functionality was in place, it was time to deploy. I chose Vercel for the client and Render to host the server. Both platforms have seamless integration with GitHub making it easy to set up continuous deployment. Every push to the repository automatically triggered a new deployment, which kept the entire development cycle smooth and efficient.
I also bought a domain from Hostinger and configured it on vercel pretty easily.
Key Takeaways
Building DevChat taught me so much in a short time. Here are a few key lessons:
- Real-time systems are fascinating but complex. Managing live data streams requires planning and careful resource management.
- Socket.io is a powerful tool for WebSocket communication, but it’s important to keep scalability in mind from the start.
- Tailwind CSS and Daisy UI save a ton of time. Styling that would normally take hours (or days!) was simplified thanks to these tools.
- Deployment is as important as development. Setting up automated deployments and managing environment variables across different environments (development and production) was key to ensuring a smooth experience.
The Open-Source Journey
What excites me most about DevChat is that it’s open source. Developers are welcome to contribute, add features, or adapt it to their own needs. The journey of building this project is ongoing, and I’m eager to see how it evolves with community input.
This project was a fantastic learning experience, and I’m proud of what I’ve built in such a short time. Right now, it boasts a simple connecting and messaging features, but I look forward to improving DevChat further and hope it becomes a valuable tool for developer communities around the world!
If you're interested, you can check out the site here and contribute here!
Adios
Top comments (0)