From Idea to Live: Building QuizzNight as a Technology Exploration Project
As a freelance IT professional, I've always believed that the best way to truly understand new technologies is to build something real with them. Reading documentation and following tutorials is valuable, but there's nothing like the pressure of a production application to reveal both the strengths and limitations of a technology stack. This is the story of how QuizzNight came to be—a real-time multiplayer quiz platform that became my playground for exploring modern web technologies.
The Genesis
The idea for QuizzNight was born from a simple observation: traditional pub quizzes rely on paper, pens, and manual scoring. In an increasingly digital world, why couldn't we create a seamless, real-time quiz experience that brings people together while leveraging modern web technologies?
The vision was clear: a platform where quiz masters could create and host quizzes, participants could join with a simple code, and everything would happen in real-time with synchronized questions, instant scoring, and live leaderboards. But to make this work, I'd need to explore technologies I hadn't used extensively before.
Technology Stack Exploration
React 18 + TypeScript: A Modern Frontend Foundation
I chose React 18 with TypeScript for the frontend because I wanted to leverage the latest React features while maintaining type safety. TypeScript has become essential for any serious project—catching errors at compile time rather than runtime saves countless hours of debugging. React 18's concurrent features and improved performance made it an obvious choice for a real-time application that needs to handle frequent state updates.
The Context API provided a clean way to manage authentication and settings state without the overhead of a full state management library. For a project of this scope, it struck the right balance between simplicity and functionality.
Supabase: Rethinking Database and Authentication
One of the most significant decisions was choosing Supabase over a traditional database setup. As a freelance developer, I wanted to focus on building features rather than managing infrastructure. Supabase offered:
- PostgreSQL database with a generous free tier
- Built-in authentication with Google OAuth support
- Real-time subscriptions (though we'd later use WebSockets for our specific needs)
- Automatic API generation from database schema
- Row Level Security (RLS) for multi-tenant data isolation
This was my first deep dive into Supabase, and it fundamentally changed how I think about backend infrastructure. The developer experience is exceptional—what would have taken weeks to set up manually was working in days.
Socket.IO: Real-Time Communication Made Accessible
The core challenge of QuizzNight is real-time synchronization. When a quiz master advances to the next question, all participants need to see it instantly. When someone submits an answer, scores need to update in real-time across all devices.
I explored Socket.IO for WebSocket communication, and it quickly became clear this was the right choice. Socket.IO provides:
- Automatic fallbacks to polling if WebSockets aren't available
- Room-based messaging perfect for quiz sessions
- Built-in reconnection handling for network interruptions
- Event-driven architecture that maps naturally to quiz events
The learning curve was manageable, and the documentation is excellent. Within a week, I had a working real-time system that could handle multiple concurrent quiz sessions.
Anthropic Claude: AI-Powered Question Generation
One of the most exciting features to implement was AI-powered question generation. Using Anthropic's Claude API, quiz masters can generate questions on any topic with a single click. This required learning:
- Prompt engineering to get consistent, high-quality questions
- API integration patterns for handling async operations
- Cost optimization through question reuse and caching
- Model migration when Claude Sonnet 4 became available
The AI integration opened up possibilities I hadn't initially considered. Quiz masters can now create quizzes on niche topics without spending hours researching and writing questions.
Vite: Modern Build Tooling
I chose Vite over Create React App for its speed and modern tooling. The development experience is significantly faster, with near-instant hot module replacement. For a project where I'd be iterating quickly, this made a real difference in productivity.
The Learning Curve
First-Time Experiences with Supabase Auth
Implementing Google OAuth through Supabase Auth was my first experience with their authentication system. The initial setup was straightforward, but I encountered several challenges:
- Redirect URL configuration required careful coordination between Google Cloud Console and Supabase
- Session management needed careful handling to prevent authentication loops
- User creation flow required understanding Supabase's auth hooks and database triggers
The documentation helped, but there were moments of frustration when things didn't work as expected. However, working through these issues gave me a deep understanding of how the system works, which has been invaluable for debugging and optimization.
WebSocket Implementation Challenges
Moving from HTTP polling to WebSockets was a significant architectural shift. The initial implementation used polling every 1-2 seconds, which created a bottleneck: 100 quiz masters × 50 participants × 2 requests/second = 10,000 requests per second. This was clearly unsustainable.
Implementing WebSockets solved the performance issue but introduced new challenges:
- Connection management: Handling disconnections, reconnections, and cleanup
- State synchronization: Ensuring all clients have consistent quiz state
- Rate limiting: Preventing abuse while maintaining responsiveness
- Error handling: Graceful degradation when things go wrong
The solution involved room-based session management, where each quiz session becomes a Socket.IO room. This allows targeted broadcasting—when a quiz master advances a question, only participants in that session receive the update.
AI Integration and Prompt Engineering
Integrating Anthropic Claude required learning the nuances of prompt engineering. The initial prompts generated questions, but they weren't always in the right format or quality. Through iteration, I learned:
- Structured prompts produce more consistent results
- Few-shot examples help the model understand the desired format
- Temperature settings affect creativity vs. consistency
- Error handling is crucial when API calls fail or timeout
The most recent update involved migrating to `claude-sonnet-4-20250514`, which required updating the API integration and adjusting prompts for the new model's characteristics.
Key Milestones
From HTTP Polling to WebSocket Architecture
The migration from polling to WebSockets was a game-changer. The numbers tell the story:
- Before: 10,000 requests per second at scale
- After: ~100 persistent WebSocket connections
- Latency: Reduced from 1-2 seconds to <100ms
- Server load: Dramatically reduced
This wasn't just a performance improvement—it fundamentally changed the user experience. Real-time updates feel instant and natural, making the platform feel more like a native application than a web app.
Authentication Flow Implementation
Implementing Google OAuth was a milestone that unlocked the multi-tenant architecture. Quiz masters can now:
- Sign in with their Google account
- Access their personalized dashboard
- Create and manage their own quizzes
- Start sessions that are isolated from other users
The authentication flow went through several iterations to get the user experience right. The final implementation redirects users directly to the Quiz Master Portal after login, eliminating unnecessary steps.
Deployment to Render
Deploying to Render was my first experience with their platform. The process was smoother than expected:
- Backend: Node.js web service with automatic deployments
- Frontend: Static site with SPA routing support
- Environment variables: Configured for both build-time and runtime
- Custom domain: Set up with automatic SSL certificates
The deployment process revealed the importance of environment variable management and build-time vs. runtime configuration, especially for the frontend static site.
Lessons Learned
What Worked
1. Starting with modern tools: Using React 18, TypeScript, and Vite from the start avoided technical debt
2. Supabase for rapid development: The integrated platform accelerated development significantly
3. WebSockets for real-time: The performance improvement justified the added complexity
4. TypeScript everywhere: Type safety caught countless bugs before they reached production
5. Modular architecture: Refactoring the progression engine into focused modules improved maintainability
What Didn't Work (Initially)
1. HTTP polling: Clearly unsustainable at scale
2. Over-engineering early: Some abstractions added complexity without value
3. Insufficient error handling: Early versions failed silently in ways that were hard to debug
4. Authentication flow: Took several iterations to get the UX right
What Surprised Me
1. Supabase's developer experience: Better than I expected, with excellent documentation
2. WebSocket reliability: More robust than anticipated, with Socket.IO handling edge cases well
3. AI question quality: Claude generates questions that are often better than manually written ones
4. Community support: The open-source community around these tools is incredibly helpful
Current State
QuizzNight is now live at www.quizznight.com with:
- Enterprise-grade scaling: Support for hundreds of concurrent quiz masters and thousands of participants
- Real-time synchronization: Sub-100ms latency for all updates
- AI-powered question generation: Create quizzes on any topic instantly
- Google OAuth authentication: Seamless login experience
- Responsive design: Works beautifully on mobile and desktop
- Comprehensive error handling: Graceful degradation when things go wrong
The platform has evolved from a technology exploration project into a production-ready application. But the journey of exploration continues—there's always another technology to learn, another optimization to make, another feature to build.
Conclusion
Building QuizzNight has been an incredible learning experience. As a freelance IT professional, this project has given me hands-on experience with technologies I might not have explored otherwise. More importantly, it's demonstrated the value of learning through building—there's no substitute for the insights you gain when your code needs to work in production.
The technologies I chose—React 18, TypeScript, Supabase, Socket.IO, and Anthropic Claude—have all proven to be excellent choices. They've enabled rapid development while maintaining code quality and scalability. But perhaps the most valuable lesson is that the best way to understand a technology is to build something real with it.
For fellow freelance developers considering similar projects, my advice is simple: start building. Choose technologies that interest you, solve real problems, and don't be afraid to refactor when you learn better approaches. The journey from idea to live application is where the real learning happens.
*This is the first in a series of blog posts about building QuizzNight. Next up: a technical deep-dive into the WebSocket architecture and real-time implementation.*
