Initial Commit
This commit is contained in:
@@ -0,0 +1,117 @@
|
||||
# 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. |
|
||||
Reference in New Issue
Block a user