Back to work

Full-stack developer · Fitness platform

Power Sport

A women-only gym chain's marketing site and member portal, in one app.

Full-stack developer · Fitness platform · 2026

Web appFitnessFull-stack
See it in action
Power Sport

Overview

Power Sport is a women-only gym chain with five branches across Saudi Arabia (Riyadh, Jeddah, Dammam, Khobar, Mecca), and this is its public website and member self-service portal — built as a Next.js 16 App Router app with two distinct route groups: a server-rendered, SEO-indexed "public" marketing side, and a JWT-gated, non-indexed "portal" side for logged-in members.

The public side covers everything a prospective member needs — branch listings with live occupancy, pricing packages, class schedules, trainer profiles, blog, transformation success stories, day-pass booking, and careers — all built to a strict brand system (cream background, cyan/coral accents, feminine-only Arabic phrasing) with search-engine metadata treated as a hard requirement on every page. Once logged in, members manage their subscription, enrolled classes, wallet, entry QR code, reviews, and referrals from the same app.

Signup and booking are deliberately guided, multi-step flows: phone+OTP or password login, registration with OTP verification and referral-code handling, a 5-step subscription signup ending in payment confirmation, and a 6-step class enrollment flow — all talking to the same branch-scoped Django API that powers the staff CRM and mobile app, sharing its design tokens to keep the brand consistent across every surface.

Tech stack

Next.js 16React 19TypeScriptTailwind CSS v4Framer MotionTanStack QueryZustandReact Hook Form + Zod

Key features

  • Branch listings with live occupancy

    Five branches across Saudi Arabia, each with live occupancy, facilities, and package pricing.

  • Member QR entry & wallet

    Logged-in members get an entry QR code, wallet balance, and subscription management from the same portal.

  • Guided 5-step subscription signup

    Auth → details → package → review → payment → confirmation, built as one deliberate conversion flow.

  • OTP-first login & registration

    Phone + OTP or password login, with referral-code handling built into registration.

  • Strict brand-consistent design system

    Cream background, cyan/coral accents, and feminine-only Arabic phrasing enforced across every page.

  • SEO-first public pages

    Search-engine metadata and structured data are a hard requirement on every marketing page, not an afterthought.

What they said

Clear communication, on time, and the animations are chef's kiss.

Power Sport

Ahmed R.

PM · Power Sport

Organizations

Power Sport