As a software engineer, I love building tools that solve real problems. I noticed that traditional online testing platforms often feel dull and disconnected. I wanted to build something different—a platform where students could compete in real-time, and teachers could easily create secure, private assessments.

That’s how King Ice Quiz was born. It is a full-stack web application with a React frontend, a Node.js/Express backend, and real-time chat capabilities powered by Socket.io.

You can check out the live app here: king-ice-quiz.vercel.app

The Tech Stack

For this project, I chose a robust MERN-style stack to ensure scalability and real-time performance:

· Frontend: React.js, React Router, Context API, Socket.io-client
· Backend: Node.js, Express.js, Socket.io
· Database: MongoDB (with Mongoose)
· Authentication: JWT & bcrypt
· Deployment: Vercel (Frontend) & Render (Backend)

1. The Core Feature: Private Quiz Codes

One of the main challenges I wanted to solve was security and privacy for teachers.

I built a system where teachers (Admins) can create a quiz and generate a unique, 8-character Access Code.

· If the quiz is marked "Public," it appears on the browse page for everyone.
· If the quiz is "Private," it is completely hidden. Students can only find it by entering the code on the "Join Quiz" page.

On the backend, I generated unique codes using a mix of alphanumeric characters to prevent collisions, ensuring each quiz has a secure, private entry point.

2. Real-Time Communication with Socket.io

I didn't want this to just be a solo experience. I integrated Socket.io to create a real-time chat room.

Setting up the WebSocket connection on the backend was interesting. I had to manage user connections, track online status, and broadcast messages to specific rooms (like sending a message only to users in a specific quiz room). This transformed the app from a simple test-taker into a social learning environment.

3. Local Scoring & Fallback Logic

One of the trickiest parts of building a quiz app is handling the score submission. What happens if the user’s internet drops right before they finish?

I implemented a system where the frontend fetches the quiz with the correct answers hidden, but calculates the score locally as a fallback. If the WebSocket or HTTP request to submit the score to MongoDB fails, the user still sees their result instantly.

4. Security & Role-Based Access

Since there are different types of users (Students, Teachers/Admins, and Super Admins), I implemented strict Role-Based Access Control (RBAC).

· Students can only see their own results.
· Teachers can only see the results of students who took their specific quizzes.
· I used bcrypt to hash passwords and JWT (JSON Web Tokens) to secure API routes.

5. The UI/UX Experience

I wanted the app to feel like a native mobile app. I implemented a PWA (Progressive Web App) manifest, allowing users to "install" the app on their phones. I also built a custom mobile bottom-navigation bar and supported both Dark and Light modes to make the platform accessible and comfortable for all users.

Lessons Learned

Building King Ice Quiz taught me a lot about state management, WebSocket connections, and the importance of security in full-stack applications. It was incredibly rewarding to see the transition from a blank folder to a fully deployed, production-ready application.

Let's Connect!

If you are a teacher looking for a better way to test your students, or a developer who wants to chat, feel free to reach out!

· Live App: king-ice-quiz.vercel.app
· GitHub: github.com/Kingice97
· Twitter (X): @IcekidOlubiyi

If you found this helpful or have any feedback on the app, let me know in the comments!