Skip to content
Back to ProjectsFull-Stack Platform

Case Study · Full-Stack Platform

BrainSpark Quiz Platform

A structured quiz engine with scoring and attempt flow.

  • React.js
  • Node.js
  • Express.js
  • MongoDB
  • REST APIs
Overview

What it is

BrainSpark is a MERN-stack quiz platform. Quizzes and questions are modelled in MongoDB and served through an Express API, while the React client drives the attempt flow, tracks answers in memory and submits a completed attempt for scoring.

Problem

The objective

Quiz content needs a schema flexible enough for different question sets, and scoring must not be editable from the client.

  • Quiz content needs a schema flexible enough for different question sets.
  • Attempt state must survive navigation within a quiz without losing answers.
  • Scoring has to be consistent and not trivially editable from the client.
Solution

How it was solved

Quizzes and questions are modelled as related MongoDB documents served by a small REST surface, attempt state lives in one client store, and the completed attempt is scored server-side.

  • Modelled quizzes and questions as related MongoDB documents served by a small REST surface.
  • Kept attempt state in a single client store so navigation between questions is non-destructive.
  • Submitted the full attempt to the API and derived the score server-side.
Features

Key features

Quiz data model

Quizzes and questions as related documents, extensible per question set.

Guided attempt flow

Question-by-question navigation that never discards answers.

Server-side scoring

Attempts submitted whole and scored on the server.

Stack

Technology

Frontend

  • React.js
  • Tailwind CSS

Backend

  • Node.js
  • Express.js

Database

  • MongoDB
  • Mongoose

Other

  • REST API
Approach

Development approach

  • Quizzes and questions modelled as related MongoDB documents behind a small REST surface.
  • Attempt state kept in a single client store so navigation is non-destructive.
  • Full attempt submitted to the API with the score derived server-side.
UI / UX

Interface decisions

  • Content-driven UI: adding a quiz requires no component changes.
  • Progress and remaining questions always visible during an attempt.
Challenges

Challenges & solutions

Answers were lost when navigating back through questions.

Attempt state centralised in one store keyed by question id.

Client-side scoring could be tampered with.

Scoring moved to the API, with the client submitting raw answers only.

Screenshots

A look at the interface

Quiz attempt interface
Links

Project links

Next Project

Weather Forecasting App

Live conditions and forecasts through a fast, focused interface.

Read case study