Interactive JavaScript Learning & Leaderboard Platform

The Challenge

The goal was to move beyond a simple "static" quiz and create a tool that felt like a professional assessment platform. Key technical challenges included:

• Preventing "Cheating" on Leaderboards: Implementing server-side validation and rate limiting to prevent automated score submissions.

• Complex Data Relationships: Handling hierarchical data where questions contain multiple shuffled answers, each with its own "correct" state and explanation.

• Dynamic Game Logic: Managing a real-time 60-second timer with a "twist"—10-second penalties for incorrect answers that sync with visual UI updates.

• State Persistence: Ensuring users can review their performance and explanations after the session ends without losing data on a page refresh.

• Security of API Credentials: Protecting sensitive database URIs and server configurations using environment variables.

The Solution

We developed a custom MERN platform that balances fast frontend interactions with a robust, secure backend.

Hybrid API Architecture The system uses Apollo Server and GraphQL for fetching complex quiz data, allowing the frontend to request exactly what it needs (question text, answers, and explanations) in a single query. Meanwhile, a REST API handles score submissions to easily integrate standard Express middleware like rate limiters.

Smart Game Engine The React-based engine handles complex state transitions, including client-side shuffling of questions and answers to ensure a unique experience every time, and a dynamic SVG timer that changes visual state (red/urgent) as time runs out.

Security & Integrity by Design The backend features a custom-built GraphQL Rate Limiter in the resolvers to prevent API abuse. It also employs strict input sanitization, trimming and slicing usernames to prevent database bloat and ensuring scores fall within the valid 0–100 range.

Comprehensive Answer Review Instead of a simple "Pass/Fail," the platform provides a detailed post-quiz breakdown. It maps the user's selected answers against the correct data and provides full explanations for every missed question to turn the test into a learning tool.

Key Features

For Users

• Real-time Pressure: A 60-second countdown with immediate time penalties for errors.

• Educational Review: Access to detailed explanations for every question to improve JS knowledge.

• Global Leaderboard: The ability to save scores and see how they rank against others.

Technical Implementation

• Mongoose Schemas: Structured data models for Questions and Scores with built-in validation.

• Apollo Client Integration: Efficiently fetching and caching quiz data to reduce server load.

• Express Middleware: Global CORS configuration and rate-limiting to secure the production environment.

The Outcome

• Zero Resource Waste: Using GraphQL reduced over-fetching of data, keeping the app snappy even on mobile connections.

• Secured Leaderboard: Implemented safeguards that successfully mitigated spam submissions.

• High Engagement: The "time-penalty" mechanic created a more engaging and repeatable user experience compared to standard quizzes.