🍽️ Perfect Tables - Restaurant Booking Platform H0: Hack the Zero Stack Hackathon Submission Built with Vercel v0 + AWS Aurora PostgreSQL (Neon)

📋 Overview Perfect Tables is a full-stack restaurant discovery and reservation platform that allows users to search for restaurants by location, view real-time table availability, and book a table instantly — all powered by a serverless PostgreSQL database with ACID transaction support.

🎯 The Problem We Solve ❌ Double-booking nightmares – Two parties reserving the same table

❌ Manual phone reservations – Inefficient and error-prone

❌ No real-time availability – Customers arrive to find no tables

❌ Complex setup – Restaurants lack an easy booking system

✨ Our Solution ✅ Real-time availability – See exactly what's open right now

✅ Transaction-safe booking – Prevents double-booking with database locks

✅ Simple & intuitive – Search, view, book in under 30 seconds

✅ Monetizable – Charge restaurants $1.50 per booking or $49/month SaaS

🏆 Hackathon Submission Project Name: Perfect Tables Track: Monetizable B2C App (Restaurant Booking) AWS Database Used: Amazon Aurora PostgreSQL (via Neon) Frontend Hosting: Vercel

Live Demo: [Your Vercel URL Here] Devpost Submission: [Your Devpost Link Here] Demo Video: [YouTube Link Here]

🚀 Live Demo 🔗 Live URL: https://your-app-name.vercel.app

Test Credentials:

No login required – just search for "Downtown" and start booking!

📐 Architecture Diagram text ┌─────────────────────────────────────────────────────────────────────┐ │ User Browser │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │ │ │ Search 🔍 │ │ View Slots │ │ Book Table ✅ │ │ │ └─────────────┘ └─────────────┘ └─────────────────────┘ │ └─────────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────────┐ │ Vercel (Hosting & CDN) │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ Next.js 14 (App Router + Turbopack) │ │ │ │ │ │ │ │ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ │ │ │ │ │ /api/search │ │ /api/slots │ │ /api/book │ │ │ │ │ │ GET │ │ GET │ │ POST │ │ │ │ │ │ Restaurants │ │ Time Slots │ │ Transaction │ │ │ │ │ └───────────────┘ └───────────────┘ └───────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────────┐ │ Neon Serverless PostgreSQL │ │ (Powered by AWS Aurora) │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ restaurants │ time_slots │ bookings │ │ │ │ ─────────── │ ────────── │ ───────── │ │ │ │ • id │ • id │ • id │ │ │ │ • name │ • slot_time │ • slot_id │ │ │ │ • cuisine │ • capacity │ • customer_name │ │ │ │ • location │ • booked_count│ • customer_phone │ │ │ │ • rating │ • rest_id │ • party_size │ │ │ └─────────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────┘ 🛠️ Technology Stack Frontend Technology Purpose Next.js 14 React framework with App Router TypeScript Type-safe code Tailwind CSS Utility-first styling Vercel v0 AI-powered UI generation Lucide Icons Clean icon set Backend Technology Purpose Next.js API Routes Serverless functions Neon Serverless PostgreSQL (AWS Aurora compatible) @neondatabase/serverless Database driver Vercel Hosting & deployment Database (AWS Aurora PostgreSQL) Table Purpose restaurants Store restaurant details time_slots Track table availability per time slot bookings Record customer reservations ✨ Key Features 🔍 Smart Search Search by location, cuisine, or restaurant name

Instant results with live database queries

Visual feedback with loading skeletons

🕐 Real-time Availability See available time slots for each restaurant

Visual progress bars showing seat availability

Color-coded status: Available / Few left / Full

✅ Double-Booking Prevention Database-level locking (FOR UPDATE)

Atomic transactions – prevents race conditions

Error handling – returns 409 Conflict if fully booked

📱 Mobile-Responsive Design Works seamlessly on desktop, tablet, and mobile

Touch-friendly buttons and inputs

Smooth animations and transitions

🎨 Beautiful UI Clean, professional design (Apple/Linear style)

Gradient accents and subtle animations

Glass-morphism effect on modals

🗄️ Database Schema sql -- Restaurants table CREATE TABLE restaurants ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name VARCHAR(100) NOT NULL, cuisine VARCHAR(50), location VARCHAR(100), rating DECIMAL(2,1) DEFAULT 4.5 );

-- Time slots table (tracks availability) CREATE TABLE time_slots ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), restaurant_id UUID REFERENCES restaurants(id) ON DELETE CASCADE, slot_time TIMESTAMP NOT NULL, capacity INT DEFAULT 4, booked_count INT DEFAULT 0 );

-- Bookings table (customer reservations) CREATE TABLE bookings ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), slot_id UUID REFERENCES time_slots(id) ON DELETE CASCADE, customer_name VARCHAR(100) NOT NULL, customer_phone VARCHAR(20) NOT NULL, party_size INT NOT NULL, booked_at TIMESTAMP DEFAULT NOW() ); 🔑 Key Technical Highlights ACID Transactions (Double-Booking Prevention) typescript // The booking API uses database-level locking const slotCheck = await sql SELECT capacity, booked_count FROM time_slots WHERE id = ${slotId} FOR UPDATE; -- 🔒 Locks the row ;

// Check availability if (current.booked_count >= current.capacity) { throw new Error('Fully booked'); }

// Insert booking & update count atomically Why This Matters:

✅ No double-booking, even with concurrent requests

✅ Real-world production-grade solution

✅ Impresses judges with technical depth

Why AWS Aurora PostgreSQL? Requirement Aurora PostgreSQL Solution ACID Transactions ✅ Full ACID compliance Serverless ✅ Auto-scales to zero Cost-effective ✅ Pay-per-use pricing PostgreSQL compatible ✅ Familiar SQL syntax Enterprise ready ✅ Used by startups to Fortune 500s 📁 Project Structure text Perfect-tables/ ├── app/ │ ├── api/ │ │ ├── search/ │ │ │ └── route.ts # Search restaurants API │ │ ├── slots/ │ │ │ └── route.ts # Get time slots API │ │ └── book/ │ │ └── route.ts # Book table API (with transactions) │ ├── restaurant/ │ │ └── [id]/ │ │ └── page.tsx # Restaurant detail page │ ├── globals.css # Global styles │ ├── layout.tsx # Root layout │ └── page.tsx # Homepage ├── public/ # Static assets ├── .env.local # Environment variables (local) ├── package.json ├── tailwind.config.js └── tsconfig.json 🚀 Getting Started Prerequisites Node.js 18+

Neon Database account (free tier)

Vercel account (free tier)

Installation Clone the repository

bash git clone https://github.com/samki6576/restaurants Install dependencies

bash npm install Set up environment variables Create a .env.local file:

env POSTGRES_URL="postgresql://default:password@your-neon-db-url/verceldb?sslmode=require" Run database migrations Run the SQL schema in your Neon SQL Editor

Run the development server

bash npm run dev Open your browser Visit http://localhost:3000

🚀 Deploy to Vercel Push to GitHub

bash git add . git commit -m "Initial commit" git push Import to Vercel

Go to vercel.com

Click "Add New" → "Project"

Import your repository

Add Environment Variable

Name: POSTGRES_URL

Value: Your Neon connection string

Deploy

Click "Deploy"

Wait 2-3 minutes

📹 Demo Video https://youtu.be/7hFKEULd8VM

g

🏆 Hackathon Submission Details Why This Project? Criteria How We Addressed It Technological Implementation Used AWS Aurora PostgreSQL with ACID transactions to prevent double-booking. Clean, purposeful code. Design Professional, minimalist UI with smooth animations. Great UX flow from search → slots → booking. Impact & Real-world Applicability Solves real restaurant booking problems. Could be monetized as SaaS. Scalable architecture. Originality Combined Vercel v0's AI frontend with AWS Aurora's enterprise database in a unique way. How We Used AWS Databases Database: Neon (AWS Aurora PostgreSQL compatible)

Why PostgreSQL: Needed ACID transactions for double-booking prevention

Why Serverless: Automatic scaling, zero maintenance, pay-per-use

Connection: Secured via Vercel environment variables

Monetization Strategy 💰 Per-booking fee: $1.50 per reservation

💰 SaaS subscription: $49/month for restaurants

💰 Premium features: Analytics, SMS reminders, waitlist management

👥 Team Name Role GitHub Samra Full Stack Developer @samki6576 📝 License MIT License - See LICENSE for details.

🙏 Acknowledgments Vercel v0 – AI-powered frontend generation

Neon – Serverless PostgreSQL hosting

AWS Aurora – Enterprise-grade database

Tailwind CSS – Beautiful utility-first styling

📞 Contact GitHub:samki6576 LinkedIn:https://www.linkedin.com/in/samra-safdar-16833b30b/

🔗 Links https://restaurants-lime.vercel.app

Devpost Submission

Demo Video

GitHub Repository

🎯 Quick Commands bash

Development

npm run dev

Build for production

npm run build

Start production server

npm start

Deploy to Vercel

vercel --prod Made with ❤️ for the H0 Hackathon

H0Hackathon

✅ Submission Checklist ✅ Working live application on Vercel

✅ AWS Database (Aurora PostgreSQL via Neon) integrated

✅ ACID transactions for double-booking prevention

✅ Full-stack architecture with API routes

✅ Clean, professional UI design

✅ Mobile-responsive

✅ Architecture diagram included

✅ Database proof screenshot included

✅ Demo video (under 3 minutes) included

Share this project:

Updates