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:

   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

# 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

# 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