Rest App

Rest App is a premium-style restaurant reservation app inspired by products like Resy and OpenTable, with a more editorial and discovery-focused UI. The project uses a Next.js frontend, a FastAPI backend, PostgreSQL, SQLAlchemy, and Alembic.

The current app supports:

• homepage discovery and hero search
• restaurant search by location, restaurant name, or cuisine
• restaurant browsing with a split-view results page
• restaurant location detail pages with location-specific availability
• reservation creation and cancellation
• JWT signup and login
• an authenticated "My Reservations" page
• an admin page for creating availability and reviewing bookings by location

Tech Stack

• Frontend: Next.js 15 + React 19 + TypeScript
• Styling: Tailwind CSS
• Backend: FastAPI
• Database: PostgreSQL
• ORM: SQLAlchemy
• Migrations: Alembic
• Auth: JWT + Argon2 password hashing

Current Product Flow

Discovery and Search

• The homepage includes a large hero search form
• Users can search using:
  • loc / city
  • restaurant name
  • cuisine
• Optional search inputs:
  • date
  • time
  • party size
• The /restaurants page shows:
  • a searchable restaurant location list
  • a selected restaurant preview panel
  • links into the full restaurant detail page

Brand and Location Structure

• Restaurant stores shared brand data
• RestaurantLocation stores the physical bookable listing
• search returns one result per location, not one result per brand
• example:
  • Negroni — Brickell
  • Negroni — Doral
  • Negroni — Wynwood

Reservation Flow

• Open a restaurant location detail page
• Select a date
• View available slots
• Log in if needed
• Book a reservation
• View upcoming reservations on /reservations
• Cancel a reservation

Admin Flow

• Sign in as the configured admin email
• Open /admin
• Create availability slots for a location table
• Review bookings for a location on a selected date
• See booking user name and email

Main Features

• JWT-based signup and login
• Protected reservation creation
• Protected "My Reservations" page
• Admin-only availability tools
• Search endpoint compatible with the current frontend
• Real restaurant priceRange and rating values stored in the database
• Real location address, website, and phone
• Seed data with multiple restaurants, two locations per restaurant, location-specific tables, and location-specific availability slots
• Shared app shell with reusable logo and footer

Project Structure

Rest-app/
├── backend/
│   ├── alembic.ini
│   ├── app/
│   │   ├── api/
│   │   │   ├── admin.py
│   │   │   ├── auth.py
│   │   │   ├── health.py
│   │   │   ├── me.py
│   │   │   └── restaurants.py
│   │   ├── core/
│   │   │   ├── auth.py
│   │   │   ├── config.py
│   │   │   └── security.py
│   │   ├── db/
│   │   │   ├── base.py
│   │   │   ├── seed.py
│   │   │   └── session.py
│   │   ├── models/
│   │   │   ├── availability_slot.py
│   │   │   ├── reservation.py
│   │   │   ├── restaurant.py
│   │   │   ├── restaurant_location.py
│   │   │   ├── restaurant_table.py
│   │   │   └── user.py
│   │   ├── schemas/
│   │   │   ├── auth.py
│   │   │   └── restaurant.py
│   │   └── main.py
│   ├── migrations/
│   │   └── versions/
│   └── requirements.txt
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── app/
│   │   │   ├── admin/
│   │   │   ├── login/
│   │   │   ├── reservations/
│   │   │   ├── restaurants/
│   │   │   ├── signup/
│   │   │   ├── globals.css
│   │   │   ├── icon.tsx
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   ├── components/
│   │   └── lib/
│   ├── package.json
│   └── tsconfig.json
├── .env.example
├── docker-compose.yml
└── README.md

Data Model

The app currently uses six main models:

• User
  • account email
  • password hash
  • admin flag
• Restaurant
  • shared brand-level data
  • name
  • cuisine
  • description
  • price range
  • rating
  • hero image
• RestaurantLocation
  • one physical customer-facing listing
  • belongs to one Restaurant
  • location name
  • city
  • neighborhood
  • address
  • website
  • phone
  • image
• Table
  • physical table inside one restaurant location
  • seat count
• AvailabilitySlot
  • one bookable time for one table
  • belongs to one restaurant location
  • party size
  • booked flag
• Reservation
  • ties together:
    • one user
    • one restaurant brand
    • one restaurant location
    • one table
    • one availability slot

Architecture

Frontend

• Next.js App Router pages render the product UI
• Server components fetch data for:
  • homepage
  • restaurants page
  • restaurant detail page
• Client components handle:
  • login/signup
  • booking
  • reservation cancellation
  • admin tools
  • nav auth state
• JWT auth state is stored in localStorage for now

Backend

• FastAPI exposes:
  • public routes
  • authenticated routes
  • admin-only routes
• SQLAlchemy models map to PostgreSQL tables
• Alembic manages schema changes
• shared auth dependencies resolve the current user from the JWT on protected requests

Search Architecture

• Homepage hero submits search params to /restaurants
• /restaurants calls the backend search endpoint when filters are present
• Search is currently compatible with:
  • location / city
  • restaurant name
  • cuisine
  • date
  • time
  • party size
• Search results are built from RestaurantLocation joined with Restaurant
• If a date is supplied, the backend can also return preview availableTimes per location

API Overview

Public Routes

• GET /health
• GET /restaurants
• GET /restaurants/search?city=&date=&time=&party_size=
• GET /restaurants/{location_slug}
• GET /restaurants/locations/{location_id}/availability?date=YYYY-MM-DD
• POST /auth/signup
• POST /auth/login

Authenticated Routes

• POST /restaurants/locations/{location_id}/reservations
• GET /me/reservations
• DELETE /me/reservations/{reservation_id}

Admin Routes

• GET /admin/me
• GET /admin/locations/{location_id}/tables
• POST /admin/locations/{location_id}/availability
• GET /admin/locations/{location_id}/reservations?date=YYYY-MM-DD

Local Setup

Prerequisites

• Node.js 20+
• npm 10+
• Python 3.11+
• PostgreSQL locally or Docker Desktop

1. Copy the environment file

cp .env.example .env

Important:

• ADMIN_EMAIL should be a valid email address
• if you change .env, restart the backend
• after schema updates, rerun migrations and the seed command

2. Start PostgreSQL

If you use Docker:

docker compose up -d

If you use a local PostgreSQL install instead:

• make sure PostgreSQL is running
• update DATABASE_URL in .env

3. Install backend dependencies

python3 -m venv .venv
.venv/bin/pip install -r backend/requirements.txt

4. Run database migrations

.venv/bin/alembic -c backend/alembic.ini upgrade head

5. Seed sample data

cd backend
../.venv/bin/python -m app.db.seed
cd ..

The seed currently creates:

• restaurants
• two locations per restaurant
• location-specific tables
• location-specific availability slots
• real price_range values
• real rating values
• real location address, website, and phone values

6. Install frontend dependencies

cd frontend
npm install
cd ..

Run the App

Backend

From the project root:

.venv/bin/uvicorn backend.app.main:app --reload

Frontend

In a second terminal:

cd frontend
npm run dev

URLs

• Frontend: http://127.0.0.1:3000
• Backend: http://127.0.0.1:8000
• Health check: http://127.0.0.1:8000/health

Demo Accounts

Regular User

• Sign up with any valid email + password

Admin User

Set the same email in .env:

ADMIN_EMAIL=owner@example.com

Then:

• restart the backend
• sign up or log in with that exact same email

The backend marks a user as admin when the login/signup email matches ADMIN_EMAIL.

Booking Rules

The app currently enforces:

• passwords are hashed with Argon2
• protected routes require a valid JWT
• users can only access their own reservations
• one user can only book one reservation per restaurant location per day
• one availability slot can only be booked once
• admin routes require is_admin = true

UI Notes

The current frontend includes:

• a reusable Logo component
• a shared top nav
• a shared footer
• a homepage hero search
• an editorial featured section
• a split-view restaurant browsing page
• a premium-style restaurant detail page

Troubleshooting

Backend port already in use

lsof -i :8000
kill -9 REAL_PID
.venv/bin/uvicorn backend.app.main:app --reload

Next.js build cache issues

cd frontend
rm -rf .next
npm run dev

column users.is_admin does not exist

You need the latest migration:

.venv/bin/alembic -c backend/alembic.ini upgrade head

column restaurants.price_range does not exist

You added the newest restaurant fields but haven’t migrated yet:

.venv/bin/alembic -c backend/alembic.ini upgrade head

Then reseed:

cd backend
../.venv/bin/python -m app.db.seed
cd ..

Migration errors around restaurant_locations or restaurant_location_id

Run the latest migrations first, then reseed:

.venv/bin/alembic -c backend/alembic.ini upgrade head
cd backend
../.venv/bin/python -m app.db.seed
cd ..

Signup validation errors

• use a real email format such as owner@example.com
• password must be at least 8 characters

Admin link does not appear

Check:

• .env contains the correct ADMIN_EMAIL
• backend was restarted after changing .env
• you logged in again with that same email

Future Improvements

• replace localStorage auth with HTTP-only cookies
• add real search ranking and richer filtering
• store real popularity / editorial ranking instead of random homepage picks
• add true restaurant collections
• finish removing legacy brand-level inventory columns once location migration is complete
• add owner-managed restaurant and location records
• add profile management
• add password reset and email verification
• add testing coverage for search and booking flows
• move footer placeholder links to real pages

Portfolio Summary

This project demonstrates:

• full-stack TypeScript/Python product work
• FastAPI + SQLAlchemy + PostgreSQL architecture
• JWT auth and protected route design
• reservation flow design and booking validation
• admin tooling
• iterative UI refinement in Next.js
• practical product thinking across frontend and backend