← All projectsII.2 · 2026

Kickoff Booking

ضربة البداية

Players find a free field, book it in three steps, and follow the request until it’s confirmed

Open the demo
  • Kickoff Booking: Home
    Home
  • Kickoff Booking: Available today — next free hour per sport
    Available today — next free hour per sport
  • Kickoff Booking: Fields and prices, with today's availability
    Fields and prices, with today's availability
  • Kickoff Booking: This week — hour-by-hour availability
    This week — hour-by-hour availability
  • Kickoff Booking: Booking — slot picked from the week view
    Booking — slot picked from the week view
  • Kickoff Booking: Request details
    Request details
  • Kickoff Booking: Request tracking — confirmed
    Request tracking — confirmed
  • Kickoff Booking: My bookings, with tracking links
    My bookings, with tracking links

The public side of the academy. Players see what’s free today and across the week, compare fields and prices, and send a booking request that lands straight in the staff portal. Every request gets its own page showing where it stands, and a confirmed booking goes into the phone’s calendar in one tap. Shown here under a placeholder brand, Kickoff.

What it does
  1. The home page shows the next free hour for each sport, one tap from booking it
  2. A week view that shows the quietest days and the busiest hours at a glance
  3. Evening peak prices, quoted exactly the way the staff portal charges them
  4. A tracking page for every request, with add-to-calendar once it’s confirmed
  5. Requests go directly into the staff portal's inbox
My part
Designed and built it
Made for
a sports academy in Amman (shown under a placeholder brand)
Built with
Next.js 16React 19TypeScriptTailwind 4Framer Motiondate-fns
Platforms
web, mobile-web
Arabic · right-to-left
Kickoff Booking: Home (desktop)
Home (desktop)
Kickoff Booking: Fields and prices (desktop)
Fields and prices (desktop)
Kickoff Booking: This week (desktop)
This week (desktop)