# 🦉 CCFW Wildlife Livestream Platform

A modern, professional web application dedicated to **Cape Coral Friends of Wildlife (CCFW)** that provides real-time wildlife streaming with a focus on Florida's burrowing owls and conservation efforts. Built with cutting-edge web technologies and designed for maximum accessibility and user experience.

[![Next.js](https://img.shields.io/badge/Next.js-13.0-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.0-38B2AC?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com/)
[![Docker](https://img.shields.io/badge/Docker-Ready-2496ED?style=for-the-badge&logo=docker)](https://www.docker.com/)

## 🌟 Features

### 🎥 **Live Wildlife Streaming**
- **Multiple HD livestream channels** focusing on Florida's native wildlife
- **Real-time status indicators** showing live/offline status
- **Professional streaming interface** with viewer counts and quality badges
- **Burrowing owl focus** - dedicated streams from Cape Coral's protected habitats

### 🦉 **Burrowing Owl Conservation**
- **Educational content** about burrowing owl behavior and habitats
- **Conservation information** highlighting CCFW's 2,500+ burrow maintenance program
- **Interactive maps** showing owl locations and protected areas
- **Volunteer opportunities** and ways to get involved

### 💝 **Support & Donations**
- **Integrated donation system** with multiple payment options
- **Membership management** for annual and multi-year memberships
- **Impact tracking** showing volunteer hours and conservation achievements
- **Tax-deductible donations** supporting Florida wildlife preservation

### 🎨 **Modern Design & UX**
- **Responsive design** that works perfectly on all devices
- **Dark mode optimized** with excellent contrast ratios
- **Smooth animations** and micro-interactions
- **Accessibility compliant** with proper focus states and screen reader support
- **Professional branding** using CCFW's official colors and themes

### 📊 **Interactive Features**
- **Real-time statistics** showing viewer counts and stream activity
- **Interactive wildlife facts** with educational content
- **Social media integration** with direct links to CCFW's platforms
- **Event calendar integration** for upcoming livestreams and events

## 🛠️ Tech Stack

### **Frontend**
- **Next.js 13+** with App Router for optimal performance
- **TypeScript** for type safety and better developer experience
- **Tailwind CSS** for utility-first styling
- **shadcn/ui** component library for consistent, accessible UI components
- **React Hook Form** for form management

### **Development & Deployment**
- **Docker** containerization for consistent development environments
- **ESLint & Prettier** for code quality and formatting
- **Git** for version control with comprehensive commit history

### **Performance & SEO**
- **Server-Side Rendering (SSR)** for fast initial page loads
- **Image optimization** with Next.js Image component
- **Static generation** for improved performance
- **SEO optimized** with proper meta tags and structured data

## 🚀 Quick Start

### **Prerequisites**
- Node.js 18+ or Docker
- Git for version control

### **Installation**

#### **Option 1: Using Docker (Recommended)**
```bash
# Clone the repository
git clone https://github.com/your-username/ccfw-livestream.git
cd ccfw-livestream

# Start with Docker Compose
docker-compose up -d

# The application will be available at http://localhost:3000
```

#### **Option 2: Local Development**
```bash
# Clone the repository
git clone https://github.com/your-username/ccfw-livestream.git
cd ccfw-livestream

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3000 in your browser
```

### **Environment Variables**
Create a `.env.local` file in the root directory:
```env
NEXT_PUBLIC_SITE_URL=http://localhost:3000
# Add other environment variables as needed
```

## 📸 Screenshots

### **Main Landing Page**
![CCFW Wildlife Livestream Main Page](images/CCFW_screenshot1.JPG)
*Professional landing page with featured livestreams and conservation information*

### **Live Streaming Interface**
![Live Stream Interface](images/CCFW_screenshot2.JPG)
*HD streaming interface with real-time viewer counts and professional controls*

### **Burrowing Owl Information**
![Burrowing Owl Details](images/CCFW_screenshot3.JPG)
*Educational content about burrowing owls with conservation facts and habitat information*

## 🏗️ Project Structure

```
ccfw-livestream/
├── app/                          # Next.js app directory
│   ├── components/               # Reusable React components
│   │   ├── ui/                   # shadcn/ui components
│   │   ├── LiveStream.tsx        # Main streaming component
│   │   ├── OwlInfo.tsx           # Wildlife information
│   │   └── DonationPanel.tsx     # Donation interface
│   ├── livestream/               # Dynamic livestream pages
│   │   └── [id]/                 # Individual stream pages
│   ├── globals.css              # Global styles
│   ├── layout.tsx               # Root layout
│   └── page.tsx                 # Main landing page
├── components/                   # Shared UI components
├── public/                       # Static assets
├── images/                       # Screenshots and documentation
├── Dockerfile                    # Container configuration
├── docker-compose.yml           # Docker orchestration
└── README.md                    # This file
```

## 🎯 Key Components

### **LiveStream Component**
- **HD video player** with professional controls
- **Real-time status** indicators (Live/Offline)
- **Viewer statistics** and engagement metrics
- **Accessibility features** for screen readers
- **Responsive design** for all screen sizes

### **OwlInfo Component**
- **Interactive tabs** for different information categories
- **Educational content** about burrowing owls
- **Conservation facts** and habitat information
- **Visual elements** with proper contrast ratios

### **DonationPanel Component**
- **Multiple donation amounts** with quick selection
- **Form validation** and error handling
- **Secure payment processing** integration ready
- **Impact visualization** showing conservation benefits

## 🌱 Conservation Impact

This platform serves as a vital tool for **Cape Coral Friends of Wildlife (CCFW)** to:

- **Educate the public** about burrowing owl conservation
- **Showcase live conservation efforts** in real-time
- **Fundraise for habitat protection** through donations
- **Recruit volunteers** for burrow maintenance programs
- **Track and display conservation impact** metrics

### **CCFW Mission Support**
- **2,500+ burrows** maintained annually
- **500+ active members** and volunteers
- **Educational outreach** to local communities
- **Habitat preservation** in urban environments
- **Research and monitoring** of protected species

## 🤝 Contributing

We welcome contributions to improve the CCFW Wildlife Livestream Platform!

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

### **Code Standards**
- Use **TypeScript** for all new code
- Follow **ESLint** and **Prettier** configurations
- Maintain **accessibility standards** (WCAG 2.1)
- Write **comprehensive tests** for new features
- Document **components and functions** with JSDoc

## 📄 License

This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.

## 🙏 Acknowledgments

- **Cape Coral Friends of Wildlife** for their dedication to wildlife conservation
- **Florida wildlife enthusiasts** and conservation volunteers
- **Open source community** for the amazing tools and libraries
- **Burrowing owl researchers** and habitat experts

## 📞 Contact

**Cape Coral Friends of Wildlife**
- Website: [ccfriendsofwildlife.org](https://ccfriendsofwildlife.org)
- Phone: (239) 980-2593
- Email: info@ccfriendsofwildlife.org

**Project Repository**
- GitHub: [github.com/your-username/ccfw-livestream](https://github.com/your-username/ccfw-livestream)
- Issues: [Report bugs and request features](https://github.com/your-username/ccfw-livestream/issues)

## 🌟 Star this Repository

If you find this project helpful for wildlife conservation and education, please consider giving it a ⭐ on GitHub!

---

*Built with ❤️ for Florida's wildlife and conservation efforts*