Co-Working Space Booking Web App with Desk Selection and Membership Plans

Co-working spaces sell desks by the day or the month, yet most small spaces still take bookings by phone and paper registers. A member asks if a window desk is free tomorrow; by the time the operator replies, it is gone or double-booked. The Co-Working Space Booking Web App with Desk Selection and Membership Plans replaces that back-and-forth with a live floor map: members see which desks and meeting rooms are free for a chosen date and slot, pick a seat, choose a plan, and confirm in four steps. The operator sees the same picture from the other side — an admin dashboard with occupancy by zone, today's bookings and renewals due — so the space stops losing revenue to double bookings. The demo build behind this listing renders 25 bookable units with 17 pre-booked in the seed data, so its dashboard opens at 68% occupancy — a figure from the demo's own data, not a claimed deployment.

A member opens the app, sees the floor map for the chosen date, and the booking is complete four steps later. First, the frontend requests availability for the selected date, and the backend returns the status of every bookable unit from the bookings table, so booked seats render grey and free seats render green. Clicking a free seat opens the booking panel with that seat's price and amenities; the member picks one of three time slots or a full day, then a plan — a day pass for one visit or a monthly plan covering future visits. Confirming the booking runs a conflict check inside a database transaction, writes the booking and its payment record, and returns a reference such as WN-2026-1147, which lands in the member's booking list and marks the seat booked. The admin sees it instantly on the occupancy dashboard, where it lifts the zone's occupancy bar and joins the day's reservation table.

1. The member signs in and picks a date; the frontend requests availability for that date from the REST API.
2. The backend queries the bookings table and returns the status of all 25 bookable units, which the floor map renders green for free and grey for booked.
3. The member clicks a free seat or room, and the booking panel fills in its price, amenities and free-cancellation terms.
4. The member chooses a time slot (09:00–13:00, 13:00–17:00, 17:00–21:00 or full day) and a membership plan.
5. Confirming the booking runs a conflict check inside a database transaction, writes the booking and payment record, and returns a booking reference.
6. The seat shows as booked on the map, the booking joins the member's list, and the admin dashboard updates its occupancy bars and today's reservation table.

Tech stack:

• React · Vite
• Node.js · Express
• MySQL
• JWT authentication · bcrypt
• SVG floor-map booking interface
• Chart.js occupancy dashboard
• Razorpay test-mode payments
• Git · GitHub

The app is built around four capabilities that a real co-working operator needs every day. First, the interactive floor map turns seat selection into a visual act: 12 hot desks, 8 dedicated desks, 3 meeting rooms and 2 phone booths are drawn as clickable units, each showing its price and live status, so a member chooses a real seat rather than a generic desk. Second, the booking flow covers the three ways a space actually sells — hot-desk day passes, dedicated monthly desks and hourly meeting rooms — with date and time-slot picking and a conflict check that refuses a seat already booked for that slot. Third, membership plans handle the money side: day pass, hot-desk monthly, dedicated monthly and a four-seat team plan, each with its own price and included meeting-room hours, billed with a GST invoice. Fourth, the admin dashboard converts bookings into decisions, showing occupancy by zone and the day's reservation list with check-in status.

• [Interactive floor-map desk selection] The floor map draws 25 bookable units — 12 hot desks, 8 dedicated desks, 3 meeting rooms and 2 phone booths — as clickable seats and rooms, each showing its price and live availability for the chosen date.
• [Hot-desk, dedicated-desk and meeting-room booking] Members book a hot desk for a day, reserve a dedicated desk for a month, or hire a meeting room by the hour, with date and time-slot picking on every booking.
• [Membership plans with billing] Four plans ship ready: Day Pass, Hot Desk Monthly, Dedicated Desk and Team Plan, each with its own price and meeting-room hour allowance, and every payment issues a GST invoice.
• [Live availability and double-booking prevention] Availability is read from the bookings table for the selected date, and confirming a booking runs a conflict check inside a database transaction, so two members cannot take the same seat for the same slot.
• [Admin occupancy dashboard] The operator sees occupancy by zone as live bars, today's bookings with check-in status, active members, renewals due this week and monthly revenue.
• [Member bookings and check-in status] Every confirmed booking appears in the member's own list with its reference number, date and slot, and the admin marks check-ins as members arrive.
• [Date and time-slot picker] Bookings use three daytime slots (09:00–13:00, 13:00–17:00, 17:00–21:00) plus a full-day option, so a space sells mornings, afternoons and full days separately.

• Complete source code (React frontend + Node.js/Express API)
• MySQL schema with seed data (25 bookable units, 4 plans, sample members and bookings)
• Working floor-map demo with selectable desks and a four-step booking flow
• Admin occupancy dashboard with zone-wise occupancy and a bookings table
• Project report PDF (background, methodology, architecture, outcomes)
• PPT presentation for final review
• Viva Q&A preparation document (REST APIs, JWT authentication, transactions, database design)