# DeafGain Website

Professional website for DeafGain LLC featuring accessibility-focused design, video resources, and communication tools for the Deaf community.

## 🚀 Production Deployment via Portainer

### Prerequisites
- Docker and Docker Compose installed on target server
- Portainer deployed and accessible
- Git repository access
- Environment variables configured

### Quick Deploy with Portainer

1. **Create Stack in Portainer:**
   - Go to Stacks → Add Stack
   - Choose "Repository" as build method
   - Repository URL: `[YOUR_GIT_REPO_URL]`
   - Compose path: `docker-compose.yml`

2. **Configure Environment Variables:**
   ```env
   NODE_ENV=production
   GMAIL_USER=your-gmail-username@gmail.com
   GMAIL_PASS=your-app-specific-password
   REDIS_URL=redis://your-redis-url
   REDIS_TOKEN=your-redis-token
   API_URL=http://localhost:804
   ```

3. **Deploy Stack:**
   - Click "Deploy the stack"
   - Wait for containers to build and start

### Manual Docker Deployment

```bash
# Clone repository
git clone [YOUR_GIT_REPO_URL]
cd deafgain-website

# Configure environment
cp .env.example .env
# Edit .env with your production values

# Build and deploy
docker-compose up --build -d
```

## 🏗️ Architecture

### Services
- **Frontend:** React 19 + TypeScript + Vite (Nginx served)
- **Backend:** Node.js + Express API server
- **Cache:** Redis for rate limiting and sessions
- **Proxy:** Nginx reverse proxy

### Ports
- **80:** Main website (Nginx)
- **804:** API server (internal)
- **6379:** Redis (internal)

## 📁 Project Structure

```
├── src/                    # Frontend React application
│   ├── components/         # UI components
│   ├── pages/             # Route pages
│   ├── api/               # API endpoints
│   └── lib/               # Utilities
├── public/                # Static assets
│   ├── images/            # Images and thumbnails
│   ├── subtitles/         # WebVTT subtitle files
│   ├── transcriptions/    # Text transcripts
│   └── videos/            # Video files (add manually)
├── docker-compose.yml     # Production orchestration
├── Dockerfile             # Frontend container
├── Dockerfile.api         # Backend container
├── default.conf           # Nginx configuration
└── server.ts              # API server
```

## 🔧 Features

### Core Functionality
- ✅ Responsive design (mobile/tablet/desktop)
- ✅ Accessibility compliance (WCAG 2.1 AA)
- ✅ Video player with WebVTT subtitles
- ✅ Email subscription system
- ✅ Contact form with notifications
- ✅ Rate limiting and security

### Video Library
- 6 professional development videos
- Full transcriptions available
- Copy/share functionality
- Modal video player
- Thumbnail previews

### Technical Features
- Docker containerization
- Redis caching
- Email notifications (Gmail SMTP)
- TypeScript throughout
- Security audited (0 vulnerabilities)

## 🛠️ Development

### Local Development
```bash
# Install dependencies
pnpm install

# Start development servers
pnpm dev

# Frontend: http://localhost:5173
# Backend: http://localhost:804
```

### Available Scripts
- `pnpm dev` - Start development servers
- `pnpm build` - Build for production
- `pnpm preview` - Preview production build
- `pnpm lint` - Run ESLint

## 🔒 Security

- All dependencies updated to latest secure versions
- Environment variables properly excluded from git
- Rate limiting on API endpoints
- Input validation and sanitization
- CORS configuration

## 📝 Environment Variables

Required for production deployment:

| Variable | Description | Example |
|----------|-------------|---------|
| `NODE_ENV` | Environment mode | `production` |
| `GMAIL_USER` | Gmail SMTP username | `user@gmail.com` |
| `GMAIL_PASS` | Gmail app password | `your-app-password` |
| `REDIS_URL` | Redis connection URL | `redis://localhost:6379` |
| `REDIS_TOKEN` | Redis auth token | `your-redis-token` |
| `API_URL` | Backend API URL | `http://localhost:804` |

## 🎯 Post-Deployment

1. **Add Video Files:** Upload `.mp4` files to `public/videos/` directory
2. **Test Functionality:** Verify all features work correctly
3. **Monitor Logs:** Check container logs for any issues
4. **SSL Certificate:** Configure HTTPS if needed

## 📞 Support

For technical support or questions about deployment, refer to the project documentation or contact the development team.

---

**Version:** Production Ready  
**Last Updated:** January 2025  
**Security Status:** ✅ All vulnerabilities resolved