# 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
```bash
npm run dev
```

Or start them individually:

**Backend (PocketBase):**
```bash
# 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):**
```bash
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)
```bash
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
```bash
# 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. |