Gym — Modern Frontend Build

A clean, fast demo site for a gym: personal trainer matcher via a short quiz, a Stripe-style membership checkout mock, and a free trial day QR pass generator. Built as a prototype to showcase flow and UX.

Live Demo Screens
Role: Frontend Developer
Stack: HTML · CSS · JavaScript
Scope: PT Quiz · Plans & Checkout Mock · Responsive Design
2024—2025

Project Overview

Problem

New members struggle to pick plans/trainers; reception queues for free trials slow sign-ups. Gyms need an instant way to route people and generate visit passes.

Solution

A guided PT matching quiz, simple plan selector with Stripe-style checkout screens, and an instant QR day-pass that can be scanned at the door — all in a lightweight demo.

Key Features

PT Matching Quiz
Goals, schedule, training style → ranked trainer suggestions (client-side scoring).
Plan & Checkout Mock
Monthly/annual options, add-ons, and Stripe-like payment steps (frontend prototype).
Performance
Static, responsive, keyboard-friendly; quick to deploy and extend.
Modular Components
Quiz, cards, and QR module are drop-in and reusable.

Architecture at a Glance

Frontend
HTML · CSS · JS
PT Data
Mock JSON
Quiz
Client-side scoring
Components
Hero · Trainer cards · Plan selector
Responsive
Mobile · Fluid grid
Hosting
Static + CDN

→ Landing page → PT matching quiz → Trainer suggestions → Plan selector

Notables

  • Clear visual hierarchy with modular cards and simple progress cues in the quiz.
  • Deterministic quiz logic so recommendations are explainable and tunable.
  • Mobile layout tuned for small screens with tap friendly targets and readable type.
  • Accessible form labels and keyboard navigation for all quiz steps.

Screens

Outcomes & Learnings

Practical UX
Built an interactive placement quiz that feels intuitive and quick to complete, improving how users find the right trainer match.
Frontend Development
Strengthened understanding of client-side logic and scoring systems while managing data flow and visual states within the quiz.
Interface Design
Refined skills in creating consistent layouts, modular components, and responsive adjustments that scale well across devices.