One of the core challenges was architecting the real-time communication layer to be both efficient and secure. For this, I implemented Socket.IO for WebSocket connections. The key was to manage the socket lifecycle—connection, authentication, and event handling—without cluttering the React components. I solved this by centralizing all socket logic within the Zustand store. This approach not only decoupled the real-time layer from the UI but also made state synchronization across components seamless and predictable. Learning Zustand for the first time was a challenge in itself, but its simplicity and minimal boilerplate proved to be a perfect fit for managing both client-side state and complex server interactions like live chat.

Another significant challenge was securing the application against modern web threats. Instead of relying solely on standard authentication, I integrated Arcjet as a security layer. This involved implementing middleware in the Node.js backend to handle rate limiting, bot detection, and protect against common attacks like SQL injection. The most interesting part was configuring the rules to balance security with user experience—blocking malicious bots while allowing legitimate ones like search engine crawlers. This proactive approach to security ensured the application was not just functional but also resilient from the start.