YYC Events This Weekend 🎉

A vibrant, modern event discovery app for finding the best weekend events in Calgary, Alberta. Built with Next.js 14+, TypeScript, and Tailwind CSS.

📸 Screenshot

✨ Features

Event Discovery

• Weekend-focused: Events filtered for Friday, Saturday, and Sunday
• Category filtering: Music, Sports, Arts, Family, Free, Comedy, Festival, Markets
• Smart filters: Free events, Kids welcome toggles
• Real-time countdown: See how much time until each event starts

User Experience

• "Plan My Weekend": Save multiple events to a personal itinerary
• Trending section: See what's hot this week
• Add to Calendar: One-click Google Calendar integration
• Social sharing: Share events on Twitter, Facebook, or copy link
• Mobile-responsive: Works beautifully on all devices

Calgary-Specific

• Local venues: Real Calgary venues with Google Maps links
• MTD timezone aware: Events displayed in Calgary's local time
• Newsletter signup: Get weekly event picks delivered to your inbox

🏟️ Calgary Event Scene

Calgary is a vibrant city with a diverse event scene ranging from professional sports to intimate theater productions. Here's what makes YYC special:

Major Venues

Venue	Type	Notable For
Scotiabank Saddledome	Sports/Concerts	Flames (NHL), Hitmen (WHL), major concerts
Jack Singer Concert Hall	Classical	Calgary Philharmonic Orchestra
Alberta Theatre Projects	Theater	Contemporary Canadian theater
Lunchbox Theatre	Theater	Intimate lunch-hour performances
Yuk Yuk's Calgary	Comedy	Stand-up comedy shows
Stampede Park	Festival	Calgary Stampede, year-round events
McMahon Stadium	Sports	Calgary Stampeders (CFL)
Calgary Farmers Market	Market	Local produce, artisan goods
Crossroads Market	Market	Vintage, art, international food
Commonwealth Bar & Stage	Music	Indie bands, nightlife
The Palace Theatre	Events	Special events, brunch
Simmons Building	Food/Market	East Village culinary destination

Annual Events Calendar

• July: Calgary Stampede - "The Greatest Outdoor Show on Earth"
• August: Calgary Folk Music Festival
• September: Calgary International Film Festival
• October: YYC Pizza Week
• November: Calgary International Beerfest
• December: Zoolights at Calgary Zoo
• January: High Performance Rodeo (theater festival)
• February: YYC Hot Chocolate Fest
• March: Alberta Ballet season
• April: Calgary Comic & Entertainment Expo
• May: Servus Calgary Marathon
• June: Sled Island Music & Arts Festival

Sports Teams

• 🏒 Calgary Flames (NHL) - Scotiabank Saddledome
• 🏒 Calgary Hitmen (WHL) - Scotiabank Saddledome
• 🏈 Calgary Stampeders (CFL) - McMahon Stadium
• ⚽ Calgary Foothills FC (USL2) - Foothills Field

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/mizoz/yyc-events-this-weekend.git

# Navigate to the project
cd yyc-events-this-weekend

# Install dependencies
npm install

# Run the development server
npm run dev

Open http://localhost:3000 in your browser.

Build for Production

npm run build
npm start

🛠️ Tech Stack

• Framework: Next.js 14+ (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4.0
• Icons: SVG (inline)
• State: React hooks with localStorage persistence

📁 Project Structure

yyc-events-this-weekend/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Root layout with metadata
│   │   ├── page.tsx        # Main page with all features
│   │   └── globals.css     # Global styles
│   ├── components/
│   │   ├── Header.tsx      # Navigation header
│   │   ├── EventCard.tsx   # Event display card
│   │   ├── EventFilters.tsx # Filter controls
│   │   ├── TrendingEvents.tsx # Trending carousel
│   │   ├── WeekendPlanner.tsx # Saved events panel
│   │   └── Newsletter.tsx  # Email signup form
│   ├── data/
│   │   └── events.ts       # Sample event data
│   ├── lib/
│   │   ├── utils.ts        # Helper functions
│   │   └── hooks.ts        # Custom React hooks
│   └── types/
│       └── event.ts        # TypeScript types
├── public/
│   └── events/             # Event images (placeholder)
├── README.md
├── LICENSE
└── package.json

🎨 Customization

Adding Events

Edit src/data/events.ts to add or modify events. Each event has:

interface Event {
  id: string;
  title: string;
  description: string;
  venue: string;
  venueAddress: string;
  venueMapUrl: string;
  date: string;          // ISO format: YYYY-MM-DD
  startTime: string;     // HH:MM format
  endTime: string;
  category: EventCategory;
  price: number;         // 0 for free
  priceRange: string;    // Display text
  imageUrl: string;
  tags: string[];
  isFree: boolean;
  kidsWelcome: boolean;
  trending: boolean;
  ticketsUrl?: string;
}

Styling

The app uses Tailwind CSS with a custom color palette:

• Primary: Indigo/Purple gradient
• Categories: Each has unique colors in getCategoryColor()
• Responsive breakpoints follow Tailwind defaults

🌐 Deployment

Vercel (Recommended)

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📧 Contact

For questions or suggestions about Calgary events, feel free to open an issue!

---

Made with ❤️ in Calgary, Alberta | GitHub