227 lines
8.7 KiB
Markdown
227 lines
8.7 KiB
Markdown
# 🦉 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.
|
|
|
|
[](https://nextjs.org/)
|
|
[](https://www.typescriptlang.org/)
|
|
[](https://tailwindcss.com/)
|
|
[](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**
|
|
|
|
*Professional landing page with featured livestreams and conservation information*
|
|
|
|
### **Live Streaming Interface**
|
|
|
|
*HD streaming interface with real-time viewer counts and professional controls*
|
|
|
|
### **Burrowing Owl Information**
|
|
|
|
*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*
|