🚀 Idea & Curiosity

• You might be surprised to know that I decided to build this when I only knew HTML, CSS, and had just finished intermediate JavaScript.
• The idea came from a simple thought — users enjoy things like emojis, GIFs, and visually appealing chat spaces. But most messaging apps focus heavily on security (which is important), while design flexibility and personalization often feel limited.
• I wanted to explore a different angle: what if a chat app allowed users to make their chat space more expressive and visually engaging — almost like customizing their own room (okay, maybe not literally a bedroom 😅).
• Since this was my first time building something like this, I decided not to overthink everything at once. My focus was to first understand how real-time chat actually works, and then gradually improve things like security later.
• The challenge was obvious — I had barely practiced JavaScript deeply, knew only around 10% of Node.js, and had never worked with concepts like Socket.IO before. I wasn’t even sure what technologies were required at the beginning. To figure that out, I consulted an AI chatbot, which gave me a starting direction — and from there, the real journey began.

😵 Starting Without Knowing

• You might think that starting a project without fully understanding the concepts isn’t a good idea, but I realized the opposite. When you try to build something with even a little knowledge and figure things out along the way, the learning becomes much more engaging and real. It keeps you from getting bored and pushes you toward actual developer-style learning, not just theory.
• Programming isn’t about memorizing — it’s about practicing and experimenting. I believed that if I kept building and modifying things in my own way, I would eventually go beyond just copying code and truly understand what I was doing.

🤖 Using AI as a Learning Tool

• At the beginning, I wasn’t even sure what technologies were required to build a real-time chat application. So, I asked an AI chatbot what I needed. It suggested using Node.js for the backend and Socket.IO for real-time communication.
• I then asked whether I needed to complete Node.js fully before starting. The answer was no — I only needed to understand the basic concept, like how the backend connects with the frontend. I also asked about Socket.IO, thinking it might be as large as JavaScript or Python, but it turned out to be a small and focused tool that could be understood quickly.
• After that, I tried learning Socket.IO from YouTube, but most videos were teaching everything in depth, which wasn’t what I needed at that moment. I didn’t want to master the entire concept first — I wanted to start building.
• So instead, I asked the AI to give me a basic working code. I copied it and ran it. Surprisingly, the code was much smaller and simpler than I had imagined. That gave me confidence.
• Then I carefully observed how HTML, CSS, JavaScript, and Node.js were working together. I asked the AI to explain the code line by line and cleared my doubts step by step.
• After understanding it, I challenged myself to build it on my own. I got confused again at some points and faced errors, but I kept debugging and asking questions. Finally, on my second attempt, I was able to create it myself — not by memorizing the code, but by actually understanding it.
• One thing I learned from this process is that it doesn’t matter which AI tool you use. What matters is how you use it — as a guide or teacher, not just for copying answers.

🧩 Breaking & Fixing Things

• I didn’t treat AI-generated code as something to copy blindly. Instead, I used it as a guide and tried building things in my own way. When things worked, it reinforced my understanding; when they didn’t, I debugged and asked why the error occurred.
• Because I focused on concepts rather than memorization, mistakes became a key part of my learning process.

🔁 Iterations & Improvements

• I enhanced the chat experience by adding features like emoji support, message formatting, and keyboard-based message sending. I also experimented with localStorage to persist user data and messages across refreshes (though not extensively yet).
• These small improvements helped me understand how frontend state, UI behavior, and real-time updates work together.

⚡ Understanding the Core Concept

• While building this project, I understood how real-time communication actually works.
• The client connects to the server using Socket.IO, and both communicate through events. When a user sends a message, it is emitted to the server, which then broadcasts it to all connected clients
• I also learned how the server keeps track of users using sockets, and how events like joining, messaging, and disconnecting are handled in real time.
• This helped me move from just “using code” to actually understanding the flow behind real-time systems.

🧠 What Changed in Me

• Before this project, I used to think that I needed to learn everything first before building something real. But this experience changed that mindset completely.
• I realized that starting with limited knowledge and learning along the way is far more effective than waiting to feel “fully ready.” Instead of depending on tutorials, I began focusing on understanding how things work and building from that understanding.
• I also became more comfortable with confusion and errors. Earlier, they felt like obstacles, but now I see them as part of the process.
• Overall, this project shifted me from just learning code to actually thinking like a developer.

🔮 What’s Next

• This was the final stage of my journey with this real-time chat application. While writing about it, I also had to balance the experience with the overall UX of this portfolio.
• If you preview this project, you might wonder — where are the advanced features I mentioned, like custom designs, emojis, or interactive chat spaces? There aren’t even separate rooms or authentication yet.
• The reason is simple: toward the end, I realized that my goal was learning, not perfection. I had already understood the core concept of real-time communication, and I didn’t want to get stuck focusing only on design or extra features.
• Instead, I chose to move forward and explore other projects, applying what I learned here in new ways.
• I’ve also shared the source code above — feel free to explore it, understand it, take help from AI if needed, and try building it yourself.