PLAYGROUND

the template for web apps

theunpartybq

UNPARTY Ecosystem Repository

Repository Information

Location: https://github.com/unparty-app/theunpartybq
Status: Active Development
Primary Purpose: BESSIE Q - Band website platform for fan engagement and content management

Tech Stack

Framework: Next.js 15.3.2 (App Router)
Language: TypeScript 5.x
UI Libraries: React 19, Lucide React (icons)
Authentication: Clerk (@clerk/nextjs)
Styling: Tailwind CSS 4.x
Platform: Web (Vercel deployment ready)
Build Tool: Next.js CLI

Key Features

User-Facing Features

Interactive Brand Showcase: Large, customizable "BESSIE Q" display with font and color selection
- Three custom fonts: Aladin, Funnel Display, Limelight
- Five color themes: Primary Blue, Dark Green, Cream, Black, White
ABOUT Page: Band information and goal management with inline editing
BUILD Page: Task creation and management interface (in development)
CONNECT Page: Fan engagement and communication tools (in development)
Responsive Design: Mobile-first approach with adaptive layouts
Modern UI: Backdrop blur effects, smooth transitions, accessible components

Developer Features

Client-side State Management: React hooks for interactive UI
Type Safety: Full TypeScript support
CSS Custom Properties: Theme system using CSS variables
ESLint Configuration: Next.js recommended linting rules
Hot Module Replacement: Fast development iteration

Architecture

Code

Web Platform (Next.js App Router)
├── src/
│   ├── app/
│   │   ├── page.tsx (Home - Brand showcase)
│   │   ├── about/page.tsx (Band info & goals)
│   │   ├── build/page.tsx (Task management)
│   │   ├── connect/page.tsx (Fan engagement)
│   │   ├── layout.tsx (Root layout with fonts)
│   │   └── globals.css (Theme variables)
│   └── middleware.ts (Clerk authentication)
├── public/ (Static assets)
└── Configuration files

Theme System

The application uses CSS custom properties for theming:

css

--font-aladin: Custom display font
--font-funnel-sans: Modern sans-serif
--font-limelight: Accent font
--foreground: Text color
--background: Background color
--primary: Primary brand color (#235789)
--secondary: Secondary color (#123524)
--accent: Accent color (#FAE598)

Integration Points

Clerk: User authentication and session management
Vercel: Deployment platform with automatic CI/CD
Lucide React: Icon library for UI components
Next.js Font Optimization: Automatic font loading and optimization

Business Value

ABOUT → BUILD → CONNECT Alignment

ABOUT

Helps bands understand their online presence needs
Provides clear goal-setting interface for band identity
Showcases band brand with customizable visual identity
Educates users on the band's mission and objectives

BUILD

Enables bands to create and manage tasks for fan engagement
Provides tools for building fan base through structured content
Supports iterative development of band website features
Platform for creating show schedules, release schedules, and merch info

CONNECT

Facilitates fan communication through dedicated interface
Enables mailing list sign-ups and fan engagement
Creates a central hub for all band-related information
Supports community building around the band's music

Getting Started

Prerequisites

Node.js 20.x or later
npm, yarn, pnpm, or bun

Installation

bash

# Clone the repository
git clone https://github.com/unparty-app/theunpartybq.git

# Navigate to project directory
cd theunpartybq

# Install dependencies
npm install

Development

bash

# Start development server
npm run dev

# Open browser to http://localhost:3000

Build

bash

# Create production build
npm run build

# Start production server
npm start

Linting

bash

# Run ESLint
npm run lint

Project Structure

Code

theunpartybq/
├── src/
│   ├── app/              # Next.js App Router pages
│   │   ├── page.tsx      # Home page (brand showcase)
│   │   ├── about/        # About page (band info)
│   │   ├── build/        # Build page (tasks)
│   │   ├── connect/      # Connect page (engagement)
│   │   ├── layout.tsx    # Root layout
│   │   └── globals.css   # Global styles
│   └── middleware.ts     # Authentication middleware
├── public/               # Static assets
│   ├── file.svg
│   ├── globe.svg
│   └── window.svg
├── package.json          # Dependencies
├── tsconfig.json         # TypeScript config
├── next.config.ts        # Next.js config
├── tailwind.config.js    # Tailwind config
├── eslint.config.mjs     # ESLint config
└── README.md            # This file

Relationship to UNPARTY Ecosystem

Purpose in Ecosystem

theunpartybq serves as a specific implementation of the UNPARTY platform principles for band/artist websites. It demonstrates:

Creator-First Design: Bands control their brand identity and goals
Privacy-Conscious: Authentication-ready for protected content
Cost-Sensitive: Lightweight Next.js application with minimal dependencies
Measurable Progress: Clear ABOUT → BUILD → CONNECT journey

Integration with Other UNPARTY Repos

Potential Integrations:

theunpartyrunway: Development workflow automation and cost tracking
theunpartycrawler: Analytics on user engagement and content performance
theunpartyapp: Shared component library and design patterns
theunpartyunppp: Cross-platform user identity and journaling integration

Data Flow

Development Principles

Code Quality

Type Safety: Strict TypeScript configuration
Linting: ESLint with Next.js recommended rules
Component Architecture: Modular, reusable components
Client-Side Rendering: Interactive UI with React hooks

Design Principles

Mobile-First: Responsive design from smallest to largest screens
Accessibility: Semantic HTML and ARIA labels
Performance: Optimized fonts, images, and bundle size
User Experience: Smooth transitions and intuitive navigation

Security & Privacy

Authentication-Ready: Clerk integration for user management
Environment Variables: Secure configuration management
Protected Routes: Middleware for authenticated content
Data Privacy: No unnecessary data collection

Screenshots

The repository includes screenshots demonstrating the application:

S238-unparty-app-bessie-q-home-screenshot.png - Home page with brand showcase
S238-unparty-app-bessie-q-about-screenshot.png - About page with goal editor
S238-unparty-app-bessie-q-build-screenshot.png - Build page interface
S238-unparty-app-bessie-q-connect-screenshot.png - Connect page interface

Future Development

Planned Features

Build Page: Full task management system for band activities
Connect Page: Fan engagement tools (mailing list, social links)
Content Management: Show schedule and release calendar
Merch Store: Product catalog and e-commerce integration
Media Gallery: Photos, videos, and press materials
Analytics Dashboard: Track fan engagement and growth

Technical Improvements

Database Integration: PostgreSQL via Prisma for persistent data
API Routes: RESTful endpoints for data management
File Upload: Vercel Blob for media storage
Payment Integration: Stripe for merch and ticket sales
Email Service: Transactional emails and newsletters
SEO Optimization: Meta tags and structured data

Contributing

This repository follows UNPARTY ecosystem standards:

Investigation Workflow: Use System Investigation Templates (SIT)
Documentation: Update CLAUDE.md for AI assistance guidance
Code Quality: Run linting and type checking before commits
Minimal Changes: Make surgical, focused modifications
Testing: Validate changes in development environment

Support & Documentation

Next.js Documentation: https://nextjs.org/docs
Clerk Documentation: https://clerk.com/docs
Tailwind CSS: https://tailwindcss.com/docs
TypeScript: https://www.typescriptlang.org/docs

License

Private repository for UNPARTY LLC.

Maintenance

Last Updated: 2025-10-29
Maintained By: GitHub Copilot CLI
Review Frequency: Updated with each major feature release

Status: 🚀 Active Development
Focus: Empowering bands to build their online presence through ABOUT → BUILD → CONNECT while protecting creator ownership, privacy, and cost-sensitivity.