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:
josefor 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
-
Clone the repository
gh repo clone nico-bachner/suwo cd suwo -
Install dependencies
pnpm install
-
Set up environment variables
vercel env pull
-
Start development server
pnpm dev
dev- Start development serverbuild- Build for productionstart- Start production serverlint- Run ESLintformat- Format code with Prisma and Prettiersb:dev- Start Storybook for component developmentsb: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
- Create Prisma migration:
pnpm prisma migrate dev --name [MIGRATION_NAME](use snake case for migration names) - Fix potentially broken TypeScript types
- Create a feature branch from
main - Make your changes with descriptive commit messages
- Ensure all tests pass and code is properly formatted
- Create a pull request with a clear description
- API Routes: Add to
/src/app/api/following the existing patterns - Pages: Use the appropriate route group (
(marketing)for public,(app)for authenticated) - Components: Place in the relevant feature folder or design system
- 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.