Coworking Space Booking Platform Work Hall
A Next.js website that turns browsing a workspace into a paid booking, with availability checked before the visitor commits
Published
Client
Work Hall
Headquarters
Karachi, Pakistan
Timeline
13 months
Technology
WEB PLATFORM
10 weeks
from first commit to a complete booking flow
4
workspace types booked online by the hour, day or month
37
articles published before the blog moved to WordPress
336
commits on the main branch over 13 months of build and content work
The challenge
Desks, meeting rooms and private offices sold by the hour, day or month across more than one Karachi location, where a visitor who wants to book needs a price, a free slot and a way to pay without calling anyone
The solution
A five-step booking flow on Next.js and the Work Hall API: choose a workspace, location and space, pick dates or hours, check availability, apply a promo code, then pay by card through Bank Alfalah or at the property
The results
- 10 weeks from first commit to a complete booking flow
- 4 workspace types booked online by the hour, day or month
- 37 articles published before the blog moved to WordPress
- 336 commits on the main branch over 13 months of build and content work
A Workspace Is Only Sold When the Slot Is Free and the Payment Clears
Work Hall runs coworking spaces in Karachi, including sites at the Old Palace Cinema Building near the Metropole Hotel and in PECHS Block 6. It sells four kinds of space: Air, an open seat in the shared hall; X, a permanent desk; meeting rooms; and private office suites for whole teams.
Each of those is priced differently. Meeting rooms start by the hour, Air and X by the day, private offices by the month, and any of them can be booked over a range of hours, days or months. A visitor who wants a room for tomorrow afternoon needs to see the price for exactly that slot, know the room is actually free and pay for it, all in one sitting.
The website had to do that work itself. A booking that is taken for a slot already sold, or a payment that is collected with no booking behind it, becomes a refund and a phone call for the front desk. Promotions add more rules: some codes take a percentage off, some set a fixed hourly price, and some apply only to one workspace type.
The site also carries Work Hall's marketing. Blog articles about coworking in Karachi bring in search traffic, but in the first version each article lived in the code, so publishing one meant a commit and a deploy.
Work Hall asked EdgeFirm to build a website that sells space directly: browse, check, book and pay, with a content setup the marketing team could run on its own.
5 capabilities carried the build
We built the site in Next.js on top of the Work Hall REST API, which provides authentication, locations, inventory, bookings and site visits. Five workstreams carried the project.
01
Marketing site and SEO
The home, story, plans, community, workspace and terms pages, with per-page titles, descriptions, canonical links and social share tags, an XML sitemap and Google Analytics. Workspace and location photos were converted to WebP and given loading placeholders.
02
Five-step booking flow
The visitor picks a workspace type, then a location loaded from the API, then a specific meeting room or office where the type has more than one, then dates or hours. The price is calculated from the inventory's hourly, daily or monthly rate as the selection changes, and the visitor can register as a guest with their name, email, phone and company without creating a full account first.
03
Availability before payment
Every change to the dates or hours is sent to the bookings API, and the visitor cannot continue until the space is confirmed free for that slot. Field validation runs on the client, and errors returned by the API are shown against the right form field.
04
Payments and promo codes
The booking is created first, then the visitor is passed to the Bank Alfalah hosted payment page through a signed handshake that carries the booking reference, and returns to a confirmation page. Visitors can also choose to pay at the property. Promo codes support a percentage discount, a fixed price per hour and limits to one workspace type. A kiosk mode, switched on by a URL parameter, adds an on-screen keyboard to the booking forms.
05
Tours and content
A book-a-tour form sends a visitor's name, contact details, preferred location, date and time to the visits API. The blog started as articles stored in code, gained pagination, and was then moved to WordPress, read through its REST API with six posts per page and each article rendered on the server by its slug.
The stack behind it
Next.js, React, Axios, Moment.js, React Rainbow Components, Bootstrap, Bank Alfalah payment gateway, WordPress REST API, Google Analytics, sharp
Front end
Next.js 13 and React 18 with Bootstrap and MDB styling, React Slick carousels and flip cards across the marketing pages
Forms and scheduling
React Rainbow Components date and time pickers, Moment.js for date arithmetic, input masking for phone numbers and React Simple Keyboard for kiosk mode
Integrations
The Work Hall REST API for auth, locations, inventory, bookings and visits, the Bank Alfalah payment gateway, and WordPress as a headless blog
Content and analytics
Per-page SEO tags, an XML sitemap, Google Analytics, images served from Cloudinary and the WordPress media library, and sharp for image optimisation
Our development process
Month 1
Site foundations
We set up the Next.js project and moved the first four pages across, then completed the remaining static pages with per-page SEO tags.
Months 2 to 3
Booking and payments
The workspace page, the booking form and its state, guest registration and the availability check, with the full flow complete in May 2023. Bank Alfalah payments were integrated and tested, the kiosk mode added and terms and conditions published.
Months 4 to 6
Design fixes and conversion
Screen-by-screen fixes against the Figma designs, new date and time pickers, the book-a-tour modal, form validation, a payment confirmation page, promo codes, image optimisation to WebP and a fix to the availability check before payment.
Months 7 to 13
Content and blog
A steady run of new articles with sitemap updates, blog pagination in January 2024, and in March 2024 the move of the blog to WordPress with a paginated listing and server-rendered article pages.
Transparency
Work was split into feature and fix branches and merged through pull requests, so each change to booking, payments or content arrived as a reviewable unit.
After launch
After the booking flow was complete, work continued on the things that bring visitors to it: new articles, sitemap updates, a guest promo code and the blog's move to WordPress.
What changed after launch
Booking Without a Phone Call
A visitor can go from the home page to a paid booking for any of the four workspace types without speaking to anyone. The full booking flow was in place 10 weeks after the first commit, measured from the repository history.
No Payment for a Slot That Is Taken
Availability is checked against the bookings API on every change to the dates or hours, and the continue button stays disabled until the slot is free, so card payments only start for space that can be delivered.
Promotions Without a Developer
Percentage discounts, fixed hourly prices and category-limited codes run through the same pricing logic as the standard rates, so a new campaign is a new code rather than new checkout code.
Publishing Without a Deploy
37 articles were published as code before the blog moved to WordPress. Since the move, the marketing team writes and publishes in WordPress and the site picks posts up straight from its API.
Work Hall's website now sells its space directly: every workspace type, priced by the hour, day or month, checked for availability before payment and paid by card or at the property. Tour requests go straight to the team, and the blog that drives search traffic is run from WordPress instead of the codebase.
More case studies
Get AI live in months, not years.
Book a 30-minute strategy call with the founders who will write your code.
