What Inspired Bantr?

Ever since I started coding, I've been fascinated by how real-time communication works. This curiosity led me to explore chat applications to understand seamless messaging. Bantr became my project to experiment and create a streamlined chat experience with servers, channels, moderation, inspired by platforms like Discord, focusing on connecting people without clutter.

Tech Stack & Tools

For this project, I wanted a stack that could handle large volumes of data fast and keep the UI super responsive. Here's the core:

• React.js: Chose React.js for its component-based architecture, which allows for building reusable UI components and creating a dynamic user experience.
• Hono.js: Opted for Hono.js for its lightweight and fast APIs performance, making it good for building efficient and scalable real-time chat applications.
• MongoDB: Fast and scalable NoSQL database. With all the chat messages and user data, MongoDB's document structure helped keep things organized.
• Socket.IO: The MVP of Bantr, Socket.IO is what gives Bantr its real-time chat capability.
• Tailwind CSS: For that clean, minimalistic design vibe. It's easy to use, saves time, and makes everything look sharp.

The Challenge of Socket.IO

Here's where things got… interesting. Setting up Socket.IO to run smoothly between HTTP and HTTPS was a test of patience. At first, I was getting CORS errors, a nightmare when you're trying to keep connections seamless. After a bunch of digging, I realized it was because I was running the frontend on HTTPS and the backend on HTTP. Which is not allowed by browsers because of security.

To fix it, I had to configure custom headers and enable CORS on the server. Not so fun but I learned a ton from that experience. Once everything was in place, watching messages appear instantly by utilizing Hono.js for Fast Performance was totally worth it.

Building an Engaging UI

I wanted to use a mix of TailwindCSS and normal CSS for the UI to save time. The platform needed to feel premium, so I opted for a dark theme with subtle shades of gray and vibrant yellow accents. Clean icons from remixicon, consistent spacing, and smooth animations brought everything together.

Final Thoughts

Working on Bantr has been an incredible experience and a fun challenge. While it was just an experimental project, I'm proud of what I accomplished. Bantr isn't just a chat app it's a project I built to bring people together, even if only for a short while.