Hops n Grains Microbrewery

A modern, full-stack craft microbrewery web application built with TanStack Start for the frontend and PocketBase for the backend, faithfully implementing the Google Stitch Heritage & Harvest tactile industrial design system.

---

Architecture Overview

hops/
├── backend/
│   ├── pocketbase               # Linux AMD64 executable (WSL)
│   ├── pocketbase.exe           # Windows AMD64 executable (PowerShell)
│   ├── pb_migrations/           # Database schema migrations & initial seeds
│   │   └── 1788363300_initial_schema_and_seed.js
│   └── pb_data/                 # SQLite database & data storage
├── frontend/                    # TanStack Start application
│   ├── src/
│   │   ├── routes/
│   │   │   ├── __root.tsx       # Root layout, fonts, nav, footer, reservation context
│   │   │   ├── index.tsx        # Home page (Google Stitch cinematic hero & craft overview)
│   │   │   ├── brews.tsx        # Craft Brews page (Google Stitch menu with IBU/ABV filters)
│   │   │   ├── food.tsx         # Global Comfort Food menu with beer pairing chips
│   │   │   ├── brewery.tsx      # The Brewery & Heritage story and locations
│   │   │   └── live.tsx         # Live On Tap draft board with keg telemetry
│   │   ├── components/
│   │   │   ├── Navbar.tsx       # Frosted glass top bar with mobile menu drawer
│   │   │   ├── Footer.tsx       # Dark industrial footer with newsletter signup
│   │   │   ├── BeerCard.tsx     # Tactile craft beer card with IBU/ABV meters & pairings
│   │   │   ├── FoodCard.tsx     # Food card with veg/non-veg tags & beer pairing
│   │   │   ├── ReservationModal.tsx # Interactive table reservation modal connected to PocketBase
│   │   │   └── TapHandle.tsx    # Custom copper brewing handle slider from DESIGN.md
│   │   ├── lib/
│   │   │   └── pocketbase.ts    # PocketBase SDK client with fallback data resilience
│   │   └── styles.css           # Tailwind theme tokens, Playfair Display, Montserrat, textures
│   └── package.json
├── Dockerfile                   # Multi-stage production container build
├── .dockerignore                # Container build ignore rules
├── .gitignore                   # Git repository ignore rules
├── docker-compose.yml           # Local & server orchestration with persistent storage
├── docker-entrypoint.sh         # Process supervisor running PB & Nitro
├── package.json                 # Monorepo management scripts
└── README.md

---

Running Locally

1. Start Both Frontend & Backend Concurrently

npm run dev

Or start them individually:

Backend (PocketBase):

# In WSL / Linux:
cd backend && ./pocketbase serve --http 127.0.0.1:8090

# In Windows PowerShell:
cd backend ; .\pocketbase.exe serve --http 127.0.0.1:8090

• API Endpoint: http://127.0.0.1:8090
• PocketBase Admin UI: http://127.0.0.1:8090/_/
  • Email: admin@hopsngrains.com
  • Password: HopsPassword1234!

Frontend (TanStack Start):

npm run dev:frontend

• Web Application: http://localhost:3000

---

Docker Deployment

The application is containerized using a multi-stage Docker build that bundles both the TanStack Start Nitro SSR server and PocketBase into a single, self-contained container.

Option A: Using Docker Compose (Recommended)

docker compose up --build -d

• Web Application: http://localhost:3000
• PocketBase Admin: http://localhost:8090/_/
• Data Persistence: Automatically stored in the pb_data named Docker volume.

Option B: Building & Running Directly with Docker

# Build the Docker image
docker build -t hops-n-grains:latest .

# Run container with persistent volume
docker run -d \
  --name hops-app \
  -p 3000:3000 \
  -p 8090:8090 \
  -v hops_pb_data:/app/pb_data \
  -e PB_ADMIN_EMAIL=admin@hopsngrains.com \
  -e PB_ADMIN_PASSWORD=HopsPassword1234! \
  hops-n-grains:latest

---

Features & Pages

Route	Name	Highlights
/	Home	Cinematic hero matching Google Stitch mockup, brewery pillars, signature craft beer preview, call-to-action buttons.
/brews	Our Brews	Interactive craft beer catalog matching Stitch design, style filters (Hefeweizen, Lager, IPA, Dark Ale, Cider), and custom copper Tap Handle IBU slider.
/food	Global Comfort Food	Handcrafted dining menu (Wood-fired pizzas, smash burgers, truffle fries) categorized with recommended craft beer pairings and veg toggles.
/brewery	The Brewery	4-step industrial brewing science walkthrough (Mashing, Boiling, Fermentation, Cellar Pouring), and taproom details for Chandigarh & Panchkula.
/live	Live On Tap	Real-time draft board tracking active tap numbers, ABV, IBU, and live remaining keg volume percentages.
Modal	Table Reservation	Interactive booking form for Sector 9 Chandigarh or Sector 5 Panchkula, submitting live to PocketBase.