The University of Sydney Wind Orchestra's Website - A modern web application for managing orchestra members, attendance, and public information.

      __________  ____  ____  ___  __  ___  __________
     /         / /    /    / /   /   /   / /         /
    /    _____/ /    /    / /   /   /   / /         /
   /         / /    /    / /           / /    /    /
  /_____    / /    /    / /           / /    /    /
 /         / /         / /     /     / /         /
/_________/ /_________/ /_____/_____/ /_________/

SUWO (Sydney University Wind Orchestra) is a multi-award-winning concert band based at the University of Sydney. Founded in 2003, SUWO brings together students and alumni to perform a diverse repertoire of wind band music, ranging from classical works to contemporary pieces. The orchestra is known for its vibrant community, occasional performances throughout the year, and a welcoming atmosphere for new members—no auditions required. SUWO has received numerous accolades, including "BEST SMALL CLUB" at Sydney University (2006–2010) and "Champion Open B Grade Concert Band" in NSW (2011). Members enjoy opportunities for musical growth, social events, and contributing to the university's cultural life.

• Framework: Next.js
• Styling: Tailwind CSS with custom design system
• UI Components: Custom design system built on Radix UI and Heroicons
• State Management: TanStack Query (React Query)
• Forms: TanStack Form with Zod validation

• Database: Neon PostgreSQL with Prisma ORM
• Authentication: jose for JWT session management with Argon2 password hashing
• Email: Resend for transactional emails
• CMS: Notion for content management

• Package Manager: pnpm
• Type Safety: TypeScript with strict configuration
• Code Quality: ESLint, Prettier
• Documentation: Storybook for component documentation
• Deployment: Vercel
• Monitoring: Vercel Analytics

• 🏠 Marketing Pages: Orchestra information, calendar, history, and joining details
• 📚 Dynamic History: Content managed through Notion CMS
• 🔐 Authentication: Secure login/logout with session management
• 👤 Profile Management: Update personal information and instrument
• 📧 Mailing List: Opt-in/out of weekly communications
• 🔒 Password Management: Secure password updates
• 📋 Roll Call: Digital attendance tracking with QR codes
• 📊 Attendance Management: View and manage weekly attendance
• 👥 Member Directory: Access to all orchestra member profiles
• 🎺 Equipment Inventory: Track and view available equipment

suwo/
├── prisma/
│   ├── migrations/               # Database migration files
│   ├── models/                   # Prisma schema files
│   └── schema.prisma             # Prisma config schema
├── src/
│   ├── app/                      # Next.js App Router pages
│   │   ├── (app)/                # Authenticated app pages
│   │   │   ├── attendance/       # Roll call and attendance management
│   │   │   ├── equipment/        # Equipment inventory
│   │   │   ├── mailing-list/     # Mailing list admin
│   │   │   ├── members/          # Member directory
│   │   │   └── settings/         # Account settings
│   │   ├── (auth)/               # Authentication (login, register, etc.)
│   │   ├── (marketing)/          # Public marketing pages
│   │   └── api/                  # API routes
│   ├── design_system/            # Reusable UI components
│   ├── features/                 # Feature-specific modules
│   │   ├── attendance/
│   │   ├── auth/
│   │   ├── marketing/
│   │   ├── navigation/
│   │   ├── profile/
│   │   └── usyd_api_wrapper/     # USYD calendar helpers
│   ├── icons/                    # SUWO-specific SVG icons
│   ├── generated/                # Prisma output – ignore this
│   ├── lib/
│   │   ├── forms/                # Tanstack Form forms
│   │   ├── mutations/            # Tanstack Query mutations
│   │   ├── queries/              # Tanstack Query queries
│   │   └── validators/           # Zod schema validators
│   ├── styles/                   # Global styles and design tokens
│   ├── utils/                    # Utility functions and helpers
│   ├── config.ts                 # Application configuration
│   └── routes.ts                 # Application route definitions
├── .env.local                    # Environment variables (local)
├── .gitignore                    # Git ignore rules
├── eslint.config.mjs             # ESLint configuration
├── next.config.ts                # Next.js configuration
├── package.json                  # Project dependencies and scripts
├── prettier.config.mjs           # Prettier configuration
└── tsconfig.json                 # TypeScript configuration

• Node.js 22+
• pnpm

1. Clone the repository

   gh repo clone nico-bachner/suwo
   cd suwo

2. Install dependencies

   pnpm install

3. Set up environment variables

   vercel env pull

4. Start development server

   pnpm dev

• dev - Start development server
• build - Build for production
• start - Start production server
• lint - Run ESLint
• format - Format code with Prisma and Prettier
• sb:dev - Start Storybook for component development
• sb:build - Build Storybook for production

• Use TypeScript for all new code
• Follow the existing file naming conventions (snake_case for files, PascalCase for components)
• Add JSDoc comments for complex functions
• Ensure all components are properly typed
• Prefer absolute imports (@/ prefix)

• Create components in the appropriate feature folder or design system
• Include Storybook stories for reusable components
• Follow the established design patterns and color system
• Ensure components are accessible and responsive

1. Create Prisma migration: pnpm prisma migrate dev --name [MIGRATION_NAME] (use snake case for migration names)
2. Fix potentially broken TypeScript types

1. Create a feature branch from main
2. Make your changes with descriptive commit messages
3. Ensure all tests pass and code is properly formatted
4. Create a pull request with a clear description

1. API Routes: Add to /src/app/api/ following the existing patterns
2. Pages: Use the appropriate route group ((marketing) for public, (app) for authenticated)
3. Components: Place in the relevant feature folder or design system
4. Utilities: Add to /src/utils/ if framework-independent

• Our dev database is a replica of the production database. Use that to your advantage to test against real data.
• Verify responsive design on multiple screen sizes
• Check accessibility with screen readers

This project is private and proprietary to the University of Sydney Wind Orchestra.