Case Study — 02 of 03

Cloud-Native Quiz Game.v1

Date
Last updated: Loading...
Type
Web Application
Stack
HTML5, JavaScript, Node.js, Azure Functions
Status
Live

A sleek, responsive web-based quiz game featuring a serverless backend and real-time visitor tracking.

01

Why I Made This

After taking a short break from coding, I just needed something to get back into the rhythm before jumping into anything bigger. I didn't want to start a complex project, so a quiz app felt like the right warmup. It was familiar enough to build quickly, but still had enough moving parts to get me thinking about frontend layout, API calls, and how a small app ties together on the backend.

Cloud-Native Quiz Game showing the active question screen with a countdown timer, answer options, score counter, and glassmorphism UI
./jin-quiz/screen.png — Active quiz screen with 20-second countdown, answer options, and live visitor HUD
02

Core Features

Dynamic Quiz Engine. Randomized questions with a 20-second countdown timer keep each round fresh and add a bit of pressure to stop people from just sitting on the answer screen.

Serverless Visitor Counter. A live HUD element tracks global visitors in real time using an Azure Functions backend, giving the app a small but satisfying piece of live infrastructure to point to.

Modern UI. Glassmorphism design with a responsive layout built to work cleanly on both mobile and desktop without any UI framework.

Nickname System. Players can enter their own name or generate a random "Cloud-Native" guest name before starting, which adds a small personal touch to the score screen.

03

Tools Blueprint Matrix

Frontend
HTML5, CSS3 (Flexbox/Grid), JavaScript (ES6+) Glassmorphism UI with responsive layout; no frontend framework
Backend
Node.js 22 LTS on Azure Functions Serverless function handling real-time visitor counter logic
API
RESTful API Client-to-function communication for real-time data fetching
Deployment
Azure Sweden Central Managed hosting for the Azure Functions backend