Kansas City St. Andrew Pipes & Drums Website

A modern, responsive Angular web application for the Kansas City St. Andrew Pipes & Drums, serving as the digital home for one of Kansas City's finest and oldest pipe and drum bands. The site provides resources for fans, prospective students, current members, and event organizers.

🌟 Features

Public Features

🎵 Concert Announcements - Eye-catching dismissible banner for upcoming events with ticket links
📸 Photo Gallery - Responsive image galleries with lazy-loading and thumbnail optimization
🎼 Music Library - Audio samples of performances and competition scores
📅 Performance Schedule - Upcoming events and appearances
💼 Hire Us - Information for booking the band for events
📞 Contact Information - Easy ways to reach band leadership and instructors
ℹ️ About Us - Band history, achievements, and member information

Member Features (Protected)

🔐 Secure Authentication - Bcrypt-based password hashing with rate limiting
🏆 Competition Results - Detailed score sheets and judge recordings
📄 Band Documents - Constitution, policies, and member resources
🎖️ 3D Models - STL files for band cap badge and kilt pin
🚪 Session Management - 24-hour sessions with automatic logout

Technical Features

📱 Responsive Design - Optimized for mobile, tablet, and desktop
⚡ Performance Optimized - Lazy loading, WebP images, code splitting
♿ Accessible - WCAG compliant with semantic HTML and ARIA labels
🔒 Security Enhanced - Client-side rate limiting, bcrypt hashing, session management
🐳 Docker Support - Containerized deployment with Nginx
📊 SEO Optimized - Meta tags, OpenGraph, Twitter Cards, structured data

🚀 Quick Start

# Clone the repository
git clone https://github.com/yourusername/Pipeband.git
cd Pipeband

# Install dependencies
npm install

# Start development server
npm start

# Navigate to http://localhost:4200/

📦 Installation

Prerequisites

Node.js (v16.x or higher recommended)
npm (v8.x or higher)
Angular CLI (v16.x)
```
npm install -g @angular/cli@16
```

Setup Steps

Clone the Repository

git clone https://github.com/yourusername/Pipeband.git
cd Pipeband

Install Dependencies
```
npm install
```
Configure Environment (See Configuration section)
Start Development Server
```
ng serve
# or
npm start
```
Open Browser Navigate to http://localhost:4200/

⚙️ Configuration

Member Authentication Setup

The site includes a protected members-only section. To configure authentication:

Option 1: Use Default Password (For Testing)

Default password: CHANGE_ME

The repository includes pre-configured hash parts for this password. You can start developing immediately.

Option 2: Set Your Production Password

Generate Hash Parts

node scripts/generate-hash-parts.js "YourProductionPassword"

Update src/app/auth.service.ts

Copy the output from the script and replace lines 15-17:

private readonly p1 = atob('YOUR_GENERATED_PART_1');
private readonly p2 = atob('YOUR_GENERATED_PART_2');
private readonly p3 = atob('YOUR_GENERATED_PART_3');

Security Note: Never commit production passwords to version control!

📚 Detailed Guide: See scripts/README-HASH-GENERATOR.md

Environment Files

src/environments/environment.ts - Production configuration
src/environments/environment.development.ts - Development configuration

💻 Development

Development Server

ng serve
# or
npm start

Navigate to http://localhost:4200/. The application will automatically reload when you change source files.

Available npm Scripts

Command	Description
`npm start`	Start development server
`npm run build`	Build for production
`npm run watch`	Build with file watching
`npm test`	Run unit tests
`ng generate component component-name`	Generate new component
`ng generate service service-name`	Generate new service

Code Scaffolding

Generate new components, services, directives, etc.:

ng generate component component-name
ng generate service service-name
ng generate directive directive-name
ng generate pipe pipe-name
ng generate guard guard-name
ng generate module module-name

Development Best Practices

✅ Use TypeScript strict mode (already enabled)
✅ Follow Angular style guide
✅ Write unit tests for new features
✅ Use semantic HTML and ARIA labels
✅ Optimize images (WebP format, responsive sizes)
✅ Test on multiple devices and browsers

🔒 Security Features

This application implements multiple layers of security for the members-only section:

1. Bcrypt Password Hashing ✅

Industry-standard bcrypt algorithm with 10 salt rounds
Hash split into 3 obfuscated parts to make it harder to find in JS bundle
Automatic salt generation and management
~100ms computation time prevents brute-force attacks

2. Rate Limiting ✅

5 failed login attempts trigger 15-minute lockout
Lockout persists across page refreshes
Live countdown timer shows remaining lockout time
Visual feedback on remaining attempts

3. Session Management ✅

24-hour automatic session expiration
Secure token generation with timestamps
Session validation on every protected route access
Manual logout functionality

4. Security Considerations

⚠️ Important: This is client-side authentication suitable for:

✅ Non-sensitive member content
✅ Competition scores and band documents
✅ Keeping casual visitors out

❌ Not suitable for:

Personal information
Financial data
HIPAA/GDPR protected content

For true security, consider:

AWS Lambda@Edge for edge authentication
AWS Cognito for managed auth
API Gateway + Lambda for server-side validation

📚 Detailed Security Guide: See SECURITY-IMPLEMENTATION.md

🏗️ Building & Deployment

Build for Production

ng build --configuration production
# or
npm run build

Build artifacts will be in the dist/pipeband directory.

Docker Deployment

Build Docker Image

docker build -t pipeband-image .

Run Container

docker run --name pipeband-container -d -p 8080:80 pipeband-image

Navigate to http://localhost:8080/

AWS S3 + CloudFront Deployment

This site is designed to run as a static website on AWS:

Build the application
```
npm run build
```

Upload to S3

aws s3 sync dist/pipeband s3://your-bucket-name --delete

Invalidate CloudFront cache

aws cloudfront create-invalidation --distribution-id YOUR_DIST_ID --paths "/*"

Nginx Configuration

The included nginx.conf provides:

Gzip compression
Browser caching headers
SPA routing support
Security headers

📁 Project Structure

Pipeband/
├── src/
│   ├── app/
│   │   ├── about/              # About Us page
│   │   ├── contact/            # Contact page
│   │   ├── hire/               # Hire Us page
│   │   ├── home/               # Home page (with concert banner)
│   │   ├── login/              # Login page (enhanced security)
│   │   ├── members/            # Members-only section (protected)
│   │   ├── music/              # Music library
│   │   ├── photos/             # Photo galleries
│   │   ├── schedule/           # Performance schedule
│   │   ├── auth.service.ts     # Authentication service (bcrypt)
│   │   ├── auth.guard.ts       # Route guard
│   │   └── meta.service.ts     # SEO meta tags service
│   ├── assets/
│   │   ├── optimized/          # Optimized WebP images
│   │   ├── photos/             # Photo gallery images
│   │   ├── score-sheets/       # Competition recordings & PDFs
│   │   └── band_logo.webp      # Band logo
│   ├── environments/           # Environment configurations
│   └── styles.css              # Global styles
├── scripts/
│   ├── generate-hash-parts.js  # Bcrypt hash generator
│   ├── generate_thumbnails.py  # Photo thumbnail generator
│   └── README-HASH-GENERATOR.md
├── Dockerfile                  # Docker configuration
├── nginx.conf                  # Nginx server config
├── package.json                # npm dependencies
├── angular.json                # Angular CLI configuration
├── SECURITY-IMPLEMENTATION.md  # Security documentation
├── BCRYPT-UPGRADE-GUIDE.md     # Bcrypt migration guide
└── README.md                   # This file

🛠️ Scripts & Utilities

Generate Password Hash Parts

Generate secure bcrypt hash for member authentication:

# Interactive mode (password hidden)
node scripts/generate-hash-parts.js

# Command-line mode
node scripts/generate-hash-parts.js "YourPassword"

📚 Full Documentation: scripts/README-HASH-GENERATOR.md

Generate Photo Thumbnails

Generate optimized thumbnails for photo galleries:

Prerequisites:

pip install Pillow

Usage:

python scripts/generate_thumbnails.py GALLERY_ID

Example:

python scripts/generate_thumbnails.py 2024_Highland_Games

This creates 400x400 WebP thumbnails in src/assets/photos/GALLERY_ID/thumbs/

Generate Photo Manifest

Generate manifest JSON files for photo galleries:

# PowerShell
.\scripts\Generate-Manifest.ps1 -GalleryId "2024_Highland_Games"

# Bash
bash scripts/generate_manifest.sh "2024_Highland_Games"

🧪 Testing

Unit Tests

ng test

Executes unit tests via Karma

Code Coverage

ng test --code-coverage

Coverage report will be in coverage/ directory.

End-to-End Tests

ng e2e

Note: You need to add an e2e testing package first (e.g., Cypress, Playwright)

Recommended Setup:

ng add @cypress/schematic

🤝 Contributing

We welcome contributions! Please follow these guidelines:

Development Workflow

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Make your changes
- Follow Angular style guide
- Write/update tests
- Update documentation
Test your changes
```
npm test
npm run build
```
Commit your changes
```
git commit -m "Add amazing feature"
```
Push to your fork
```
git push origin feature/amazing-feature
```
Open a Pull Request

Code Style

Follow Angular Style Guide
Use TypeScript strict mode
Write meaningful commit messages
Document public APIs with JSDoc
Add unit tests for new features

Before Committing

✅ Run tests: npm test
✅ Check linting: ng lint
✅ Build successfully: npm run build
✅ Update documentation if needed

📚 Documentation

Main Documentation

README.md (this file) - Project overview and setup
SECURITY-IMPLEMENTATION.md - Security architecture and implementation
BCRYPT-UPGRADE-GUIDE.md - Bcrypt migration and technical details
scripts/README-HASH-GENERATOR.md - Hash generator utility guide
CODE_OF_CONDUCT.md - Community guidelines
CONTRIBUTING.md - Contribution guidelines
LICENSE - Project license

Additional Resources

🎯 Roadmap

Planned Features

Future Enhancements

Server-side authentication (Lambda@Edge)
Progressive Web App (PWA) features
Advanced analytics dashboard
Multi-language support
Accessibility improvements (WCAG 2.1 AA)
Performance monitoring

🐛 Troubleshooting

Common Issues

Login Always Fails

Solution: Verify the hash parts in auth.service.ts match your password. Regenerate with:

node scripts/generate-hash-parts.js "YourPassword"

Build Errors with bcrypt

Solution: Ensure you have both bcrypt and bcryptjs installed:

npm install bcrypt bcryptjs @types/bcryptjs

Docker Image Too Large

Solution: Add .dockerignore with:

node_modules
dist
.git
*.md

Photos Not Loading

Solution:

Check if thumbnails exist: src/assets/photos/GALLERY_ID/thumbs/
Regenerate thumbnails: python scripts/generate_thumbnails.py GALLERY_ID
Verify manifest.json exists in gallery folder

Getting Help

📧 Contact: BusinessManager@kcpipeband.org
🐛 Report bugs: Open a GitHub issue
💬 Discussions: GitHub Discussions tab

👥 Team

Kansas City St. Andrew Pipes & Drums

Website: kcpipeband.org
Facebook: @Kansas-City-St-Andrew-Pipes-and-Drums
Email: BusinessManager@kcpipeband.org

📄 License

This project is licensed under the terms specified in the LICENSE file.

🙏 Acknowledgments

Angular Team - For the excellent framework
Angular Material - For beautiful UI components
Band Members - For content and feedback
Contributors - For improvements and bug fixes

📞 Contact & Support

Band Contact

Business Manager: Rory McKee - BusinessManager@kcpipeband.org
Bagpipe Lessons: Dorothy May - BagpipeLessons@kcpipeband.org
Drum Lessons: Kyle Womelduff - DrumLessons@kcpipeband.org
Quartermaster: Rydel Van Dyke - vandyke6059@twc.com

Practice Location

St. Andrew's Episcopal Church
6401 Wornall Terrace
Kansas City, MO 64113
Tuesday nights, 7:00 PM - 9:00 PM

Mailing Address

PO Box 648
Shawnee Mission, KS 66201-0648

⭐ Star This Repository

If you find this project useful, please consider giving it a star on GitHub!

Made with ❤️ by the Kansas City St. Andrew Pipes & Drums community

🎵 Ceòl is Càirdeas (Music and Friendship) 🎵

Name		Name	Last commit message	Last commit date
Latest commit History 211 Commits
.github		.github
.vscode		.vscode
scripts		scripts
src		src
target		target
.editorconfig		.editorconfig
.gitignore		.gitignore
BCRYPT-UPGRADE-GUIDE.md		BCRYPT-UPGRADE-GUIDE.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
SECURITY-IMPLEMENTATION.md		SECURITY-IMPLEMENTATION.md
angular.json		angular.json
nginx.conf		nginx.conf
package-lock.json		package-lock.json
package.json		package.json
robots.txt		robots.txt
sitemap.xml		sitemap.xml
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.spec.json		tsconfig.spec.json

License

ZGrauer/Pipeband

Folders and files

Latest commit

History

Repository files navigation