A modern music studio website built with Next.js, Payload CMS, and PostgreSQL. Features a booking system with Google Calendar integration, invoice generation, email notifications, and S3 media storage.
Live: https://orbstudios.ca
Frontend & Framework:
- Next.js 16 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS 4 - Utility-first styling
- shadcn/ui - Accessible UI components (Radix UI)
Backend & CMS:
- Payload CMS 3.79 - Headless CMS with REST/GraphQL
- PostgreSQL - Relational database
- Drizzle ORM - Type-safe database queries
Core Features:
- Google Calendar API - Booking system integration
- Resend + React Email - Email notifications & invoices
- React PDF - Invoice PDF generation
- Railway S3 Storage (Tigris) - Media storage
Utilities:
- date-fns - Date manipulation
- clsx - Conditional class names
- React Hook Form - Form management
- ical-generator - iCal calendar events
Package Manager & Deployment:
- pnpm - Fast, efficient package manager
- Railway - Production hosting
- Cloudflare - DNS management
- Node.js v18.20.2+ (v20+ recommended)
- pnpm v9+ (
npm install -g pnpm) - PostgreSQL (local dev) or cloud provider (Railway, Supabase, Neon)
pnpm dev # Start development server
pnpm build # Build for production
pnpm start # Start production server
pnpm generate:types # Regenerate Payload types
pnpm generate:importmap # Regenerate import map
pnpm payload # Payload CLI
pnpm dev:prod # Test production build locallysrc/
├── app/ # Next.js App Router
│ ├── (frontend)/ # Public frontend routes
│ ├── (payload)/ # Payload admin routes (/admin)
│ └── api/ # API routes (bookings, invoices, etc.)
├── blocks/ # Page builder blocks (CMS content)
├── collections/ # Payload CMS collections & hooks
├── components/ # React components
│ └── ui/ # shadcn/ui components
├── fields/ # Custom Payload field definitions
├── hooks/ # React hooks
├── lib/ # Utilities
│ └── booking/ # Google Calendar, email, invoicing
├── plugins/ # Payload CMS plugins (S3, etc.)
├── utilities/ # Helper functions
└── payload.config.ts # Payload CMS configuration
- Google Calendar Integration - Bookings sync to studio calendar
- Invoice Generation - Automatic PDF invoices attached to emails
- Email Notifications - Resend-powered confirmations to clients & admin
- Live Preview - Real-time content editing
- Media Management - Railway S3 integration
- SEO Optimization - Built-in SEO plugin
- Redirects - URL redirects management
- Form Builder - Dynamic form creation
- Railway S3 (Tigris) - All media uploads stored on Railway's S3-compatible object storage
- PostgreSQL - All data, users, bookings, transactions
This project includes four decorative Google Fonts from the Rubik family available site-wide:
| Alias | Font Family | Use Case |
|---|---|---|
vinyl |
Rubik Vinyl | Bold, eye-catching headlines |
doodle |
Rubik Doodle Shadow | Playful, bubbly text |
glitch |
Rubik Glitch | Edgy, distorted effects |
spraypaint |
Rubik Spray Paint | Artistic, graffiti-style text |