Library Seat Reservation Web App with Live Occupancy Display

During exam weeks, college library reading halls fill up before 9 am, and the only system most libraries have is a paper register at the entrance or a first-come first-served scramble for chairs. Students walk across campus with no idea whether any seat is free, arguments break out over saved seats, and librarians have no record of who is sitting where. A library seat reservation web app answers this with a live, bookable map of every seat in the reading hall. Students check real-time availability from their phones, reserve a specific seat for a two-hour slot, and receive a booking token they show at the issue desk for check-in. Seats show three honest states — free, held, or occupied — and unconfirmed holds auto-release after fifteen minutes so no seat sits blocked by a no-show. Librarians see per-zone occupancy counters, active bookings, and one-click check-in, release and extend controls on a single dashboard.

The build is deliberately scoped as a pure web application: a responsive seat-map front end, a transactional booking API, and a real-time occupancy feed, with role-based access separating students from librarians. The demo configuration models 120 seats across 3 reading zones, which is representative of a mid-size college central library. Builder note from the working demo: double-booking is prevented with a single atomic check-and-set around the seat-state update — the confirm step re-reads the seat's live state and writes the hold only if it is still free, so two simultaneous taps cannot claim one seat.

A student opens the floor map and sees every seat colour-coded by state: green for free, amber for held, red for occupied, with per-zone counters updating live. Tapping a free seat opens the booking form — name, roll number, date and a two-hour slot — and confirming issues a booking token such as LIB-8X4K2 with a scannable code. That confirm step runs the atomic check-and-set: the seat's current state is re-read inside one transaction and the hold is written only if it is still free, which is what makes double-booking impossible. At the desk, the librarian scans or types the token to check the student in, flipping the seat to occupied. Holds that are never checked in auto-release after fifteen minutes, freeing the seat for someone else, and every state change is pushed to all open screens within about two seconds so the map, the counters and the dashboard never disagree.

1. The library's floor plan is seeded as zones and seats (demo configuration: 120 seats across 3 zones), each seat starting in the free state.
2. The front end opens a server-pushed occupancy feed, so every connected screen renders the same live seat states without polling.
3. A student taps a free seat and submits name, roll number, date and a 2-hour slot.
4. The API re-reads the seat's state inside a single transaction and writes the hold only if it is still free — otherwise the booking is rejected with a pick-another-seat message.
5. A booking token with a scannable code is issued and listed under the student's bookings as awaiting check-in.
6. At the issue desk, the librarian checks the token in, moving the seat from held to occupied; walk-ins can also be seated directly.
7. A scheduler releases any hold unconfirmed after 15 minutes, and librarians can release or extend bookings manually; every change is pushed live to all screens.

Tech stack:

• HTML5 · CSS3 · JavaScript (ES6) — responsive front end
• Node.js · Express — REST booking API
• SQLite · better-sqlite3 (prototype) · PostgreSQL option
• Server-Sent Events — live occupancy push
• JWT — role-based auth (student · librarian)
• QR booking tokens (qrcode library)
• node-cron — hold-expiry scheduler
• Git · npm

The three capabilities that carry this project are the live seat map, the atomic booking transaction, and the librarian dashboard. The seat map renders every seat in three reading zones with honest free, held and occupied states that update in real time as bookings, check-ins and expiries happen. The booking transaction is the engineering heart: the seat state is re-read at confirm time and the hold is written only inside a single atomic check-and-set, so two students tapping the same seat at the same instant cannot both claim it — this exact guard is implemented and exercised in the working demo, including its prefilled reservation flow. The librarian dashboard turns the same live feed into per-zone counters, an active-bookings table with check-in, release and extend actions, and a one-click CSV export for daily records.

• [Live seat map] Floor-plan view of all 3 zones with colour-coded seats (free / held / occupied), per-zone free-seat counters, and a live clock with occupancy percentage in the header.
• [Atomic seat booking] Name, roll number, date and 2-hour slot form; confirming runs an atomic check-and-set so a seat taken a second earlier is rejected with a clear message instead of double-booked.
• [Booking token + QR check-in] Every confirmed reservation issues an 8-character token (e.g. LIB-8X4K2) with a scannable code the student shows at the issue desk.
• [Librarian dashboard] Per-zone occupancy counters, overall occupancy KPI, active-holds count, and a bookings table with one-click check-in, +30-minute extend and release actions.
• [15-minute hold auto-release] Unconfirmed holds expire automatically, freeing the seat and updating every open screen — no seat stays blocked by a no-show.
• [Live activity feed] Timestamped stream of reservations, check-ins, expiries and releases so the desk always knows what just changed.
• [CSV export] One-click download of active bookings for daily desk records and reconciliation.

• Complete seat-map front end + REST booking API source code
• Seeded demo dataset (120 seats, 3 reading zones)
• Librarian dashboard with live occupancy counters and activity feed
• Booking-token and QR check-in flow
• Hold-expiry scheduler and CSV export
• Project report PDF, PPT presentation and viva Q&A document