Setwork — Next.js Booking Website for a Training Studio
Akram Adjab
Concept project. Setwork is a fictional training studio in Chicago's West Loop: coached strength, engine and speed in six-week cycles, ten to a group. I designed the brand and every page in Figma, then built it with the Next.js App Router, server actions and Motion.
The brief was a site that books, not a brochure. People should find a session, pick their spot on the floor, and log it in under a minute, while the site still feels as bold as the training: big type, fast motion, a strict grid.
The idea: a training log
Everything on the site is something a coach would write down.
Session numbers: every class is a numbered page in the log, Session 4182
Programme codes: ST, EN, SP, HY, MB, in competition plate colours
Cycles: the site knows it is week 3 of 6, and every programme page changes on Monday
The tally: the logo is four bars and a fifth, the way reps are counted
Built for booking
No CMS and no database: typed TypeScript data, read on the server.
Schedule: session numbers and spots left are worked out from a weekly template, the same for every visitor
Booking: four steps on server actions with one zod schema, validated again on confirm
Stations: the floor plan is data, so the picker, Contact and the share images all draw from it
Bookings live in an httpOnly cookie, with an .ics route for calendars
Features at a glance
Schedule: day, programme, coach and time filters kept in the URL, server-rendered first
Booking flow: session, station, details, confirm, with real states for taken, full and invalid
Memberships: a 1–6 sessions-a-week control that costs every plan per session
Programmes and coaches: pages generated from typed data, with this week's session as log blocks
Journal: MDX posts by the coaches, with a session-card component
Deliverables and stack
Brand: guidelines in 10 frames (logo, colour, type, spacing, components, imagery, motion, voice)
Design system: 121 Figma variables with desktop, tablet and mobile modes, 26 components and 16 icons
Pages: 11 templates, a five-screen booking flow and 11 states, at 1440, 834 and 390 px
Build: Next.js App Router, server actions, zod, MDX, Motion, Lenis
Measured: mobile Lighthouse 92–100, accessibility 100
Tools: Figma · Next.js · React · TypeScript · CSS
Live site: setwork-studio.vercel.app
Like this project
Posted Oct 31, 2026
Concept project: a booking-first Next.js site for a training studio. Brand, UX/UI and a build with a live schedule, a 4-step booking flow and bold motion.
Likes
0
Views
1
