Playchoo Manager - Venue Administration Portal

Domain: https://manager.playchoo.com Project Owner: Frontend Faye (Uma Canvas) Status: Phase 0 - Initial scaffolding complete

Overview

This is the venue administration frontend for Playchoo, enabling venue administrators to manage clubs, courts, schedules, and bookings. It is a separate Next.js application from the consumer-facing app.

Architecture

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• State Management: React Context API
• Auth: SwissOID (via playchoo-auth backend)
• API: Python Flask API (py-playchoo-api)
• CI/CD: Drone CI
• Container: Docker

Project Structure

playchoo-manager-nextjs/
├── src/
│   ├── app/[locale]/          # Next.js app router pages
│   │   ├── admin/             # Admin routes
│   │   │   └── clubs/         # Club management
│   │   ├── layout.tsx         # Root layout
│   │   └── page.tsx           # Admin home
│   ├── components/            # React components
│   ├── hooks/                 # Custom React hooks
│   ├── lib/                   # Utilities
│   └── types/                 # TypeScript types
├── docker/                    # Docker configuration
├── .drone.yml                 # CI/CD pipeline
└── docker-compose.yml         # Production deployment

Development

Prerequisites

• Node.js 22+
• Docker & Docker Compose
• Access to py-playchoo-api backend

Environment Setup

Copy .env.local.example to .env and configure:

# Application
APPLICATION_DOMAIN_NAME=manager.playchoo.com
REVERSE_DOMAIN=playchoo-manager-nextjs
APP_PORT=8200

# Development APIs
NEXT_PUBLIC_PYTHON_API_URL=http://localhost:5000
NEXT_PUBLIC_AUTH_BACKEND_URL=http://localhost:3700
NEXT_PUBLIC_WEBSOCKET_URL=ws://localhost:5000
NEXT_PUBLIC_SWISSOID_TARGET_SERVICE_HANDLE=playchoo
NEXT_PUBLIC_APP_VERSION=0.1.0-dev

Run Locally

# Install dependencies and start dev server (port 8100)
npm run dev

# Or manually
npm install
npm run dev

Build

npm run build
npm start  # Runs on port 8200

Docker

# Build
docker build -f docker/Dockerfile -t playchoo-manager .

# Run with docker-compose
docker-compose up -d

Phase 0 Implementation Status

Completed

• ✅ Project scaffolded from playchoo-nextjs template
• ✅ Configuration updated for manager.playchoo.com
• ✅ Ports changed: dev (8100), prod (8200)
• ✅ Customer-facing pages removed
• ✅ Admin landing page created
• ✅ /admin/clubs route with access-aware messaging
• ✅ Docker and CI/CD configs updated

Pending (Blocked by Backend)

• ⏳ Auth integration - Blocked by Access Avery
  • Needs: Auth middleware exposing admin context
  • Needs: club_admin association checks
• ⏳ Club listing - Blocked by Data Dana
  • Needs: GET /admin/clubs endpoint
  • Needs: GET /admin/clubs/{club_id} endpoint

Phase 1 Roadmap

• Slot definition management UI
• Create/edit forms for slot templates
• Materialisation status feedback
• Integration with Job Jonah's materialisation job

Dependencies & Blocking

See docs/owners/ in py-playchoo-api for coordination:

• Frontend_Faye.md - My status updates
• Data_Dana-blocking-Frontend_Faye.md - API contracts I need
• Frontend_Faye-blocking-*.md - Items blocking others

Deployment

Deployed via Drone CI on push to master:

1. Build Docker image with BuildKit caching
2. Push to registry.sn48.zivili.ch/meow/playchoo-manager-nextjs
3. Deploy to production server via drone-deploy

URLs

• Dev: http://localhost:8100
• Staging: TBD
• Production: https://manager.playchoo.com

Notes

• This project shares the same backend APIs as the consumer app
• Auth is handled via SwissOID sessions (same as consumer app)
• Admin permissions are checked at the API level
• UI gracefully handles missing permissions with access-aware messaging