Taebl
A reservation interface for small restaurants with busy staff
Taebl is a table management tool for restaurants that need a clear, real-time view of upcoming bookings. It replaces the paper reservation book with a straightforward digital interface: tables on one axis, time slots on the other, and every booking visible at a glance. Staff can create, edit, and cancel reservations in a few clicks without navigating nested menus or switching between screens.
The surface is deliberately minimal. A restaurant host checking availability during a phone call doesn't have time to parse a complex interface. Taebl gives them one screen with all the information they need: which tables are free, which are booked, for how many guests, and when.
A grid that mirrors how restaurants manage their floor
The schedule grid is the center of the application. Tables are listed as rows, each showing its capacity and location in the restaurant. Half-hour time slots run across the columns, covering the entire evening service schedule. Green cells are available; blue cells are booked. Reservations span multiple columns based on their duration, so a two-hour booking occupies four slots, making overlaps and gaps immediately visible.
Clicking an empty cell opens a booking form pre-filled with that table and time. Clicking an occupied cell opens the existing reservation for editing or cancellation. A segmented control toggles between today and tomorrow. The two-day window in this demo is intentionally constrained, designed for a small restaurant where bookings rarely extend beyond the next evening.
A clean separation between data and presentation
The backend is a REST API built with Express 5 and TypeScript. Prisma provides type-safe database access to a PostgreSQL instance with two models: tables (pre-seeded, read-only) and reservations (full CRUD). The API validates capacity constraints, checks for time-slot conflicts before accepting a booking, and returns detailed error responses when something doesn't fit.
The frontend is a React 19 application using Mantine for UI components and Vite as the build tool. The booking grid, modal, and navigation all coordinate through React's built-in hooks without external state libraries. The component structure is flat: a booking interface that orchestrates the grid and modal, a navbar to toggle between days, and a schedule grid that maps API data to a visual layout.
For the live demo, the frontend limits database interactions to read-only. Seed data loads from the API on first render, then all create, edit, and delete operations happen entirely in local React state with nothing written to the database. Refreshing the page resets everything to the original seed data.
Small scope, deliberate constraints
Taebl was built to a minimal spec sheet with low complexity. No authentication, no user accounts, no multi-restaurant support. These choices keep the scope honest and the result usable. The intended user for this single-restaurant host tool doesn't need role-based access control.
What the project does exercise is the full path from data model to deployed interface: schema design with Prisma, a RESTful API with proper validation and error handling, a component-driven frontend with real-time state updates, and a deployment pipeline running on a VPS with Traefik and automated SSL. Every layer is intentionally thin, but production-grade.
Building focused tools that do one thing well and deploying them end to end is the kind of work I'm best suited for. If you could use Taebl in your arsenal, or have a problem that needs this kind of treatment, I'd like to hear about it.
