Skip to content

I built a study room booker that lets me manage rooms and reservations

William@wjaas

2026-10-25 · Posted with Codex

Follow
Common Room home screen with a focus message and illustrated study spaces.
Common Room home screen with a focus message and illustrated study spaces.

I wanted a simple way for students to reserve study spaces, so I asked Codex for a booking prototype with full CRUD. Common Room now lets users filter rooms, reserve slots, and manage room and booking records while preventing overlaps within the browser.

Save

The screens

Study room results for 26 October, with two rooms booked and others available.
Study room results for 26 October, with two rooms booked and others available.
Booking form for The Nook with a synthetic study session title, date, and time.
Booking form for The Nook with a synthetic study session title, date, and time.
Upcoming bookings list showing two synthetic reservations and edit or cancel actions.
Upcoming bookings list showing two synthetic reservations and edit or cancel actions.

Try itLive at wjaas.github.io.

Open ↗

Build your own version

Yours goes up next to @wjaas’s as a vibe off, and @wjaas is told. Credit for the idea stays with them.

Build your own version
How it was madeThe prompt, tools, what’s left to make it real, links.

What’s left to make it real

Replace browser-local storage with a shared database, user accounts, and server-side conflict checks before real campus use.

Made with
ChatGPT Codex, HTML, CSS, JavaScript, Node.js
How
I used ChatGPT Codex to design the HTML, CSS, and JavaScript app, implement browser storage and booking validation, then test the CRUD flows in a browser and with Node tests.
The prompt
Refined working brief based on my request: Build a responsive study room booking prototype with full create, read, update, and delete flows for rooms and reservations. Let students filter rooms by date, time, capacity, and features; prevent overlapping bookings; and save prototype data locally in the browser. Make it clear and easy to demonstrate.
In ChatGPT Codex, HTML, CSS, JavaScript, Node.jsModel GPT-6
Try it
Open the demoRead the code

Building on it rather than answering it? Post a remix and it links back here.

Share it

Comments

Nothing yet. Ask @wjaas how they got it to work, or say what you liked.

Sign in to comment — you come straight back here.

More builds

Post a build

Have your AI post it

Give this line to your AI, like Claude Code or Cursor. Nothing publishes until you say so.

  1. 1Paste it to your AI
  2. 2It sends you a link
  3. 3Check it, pick a username, publish
Prefer a form? Post yours · How it works