DeafGain LLC Website 🌐

Overview

A dynamic web platform dedicated to empowering the Deaf community through innovative communication solutions, training, and accessibility services. This website serves as the digital presence for DeafGain LLC, showcasing our comprehensive services including ADA-compliant transcripts, universal website design, board communication protocols, and leadership training.

🚀 Quick Start

pnpm install
pnpm dev    # Runs both frontend and backend concurrently

Frontend runs on localhost:3000, API on port 4000.

🛠 Technical Stack

Frontend

Technology	Version	Purpose
React	19.0.0	Core Framework
TypeScript	5.7.2	Type Safety
React Router	7.0.2	Routing
Tailwind CSS	3.4.16	Styling
Framer Motion	11.13.5	Animations
React Simple Maps	4.0.0-beta.6	Geographic Visualization
Next.js	14.1.0	Framework Features
Vite	6.0.3	Build System

Backend

Technology	Version	Purpose
Express	4.21.2	API Server
Nodemailer	6.9.9	Email Handling
Upstash Redis	1.28.4	Caching/Rate Limiting
TypeScript	5.7.2	Type Safety

📁 Project Structure

src/
├── api/            # Backend API routes and handlers
├── components/     # Reusable UI components
│   ├── Layout/     # Layout components (Navbar, Footer)
│   └── shared/     # Shared UI components
├── context/        # React Context providers
├── lib/            # Utility libraries
├── pages/          # Main application pages
│   ├── About
│   ├── Contact
│   ├── Home
│   ├── Resources
│   └── Services
├── styles/         # Global styles
└── assets/         # Static assets

public/
├── images/         # Image assets
├── subtitles/      # WebVTT subtitle files
├── transcriptions/ # Text transcriptions
└── videos/         # Video content

🎯 Core Features

• ⚡️ Modern React with TypeScript for type safety
• 🗺️ Interactive USA region map using React Simple Maps
• 🎥 Custom video player with WebVTT subtitles and transcriptions
• 📱 Responsive design with Tailwind CSS
• 🔒 Rate-limited contact form with email notifications
• 🌊 Snow peaks animation effect
• 🎭 Smooth animations with Framer Motion
• 🔍 Intersection Observer for scroll animations
• 🔔 Toast notification system
• 📊 Timeline visualization
• 👥 Service showcase
• 📝 Biography section
• ⭐ Testimonials section

🔧 Development

Environment Setup

# Install dependencies
pnpm install

# Start development servers
pnpm dev          # Runs frontend and backend concurrently

# Other available scripts
pnpm build        # Build for production
pnpm preview      # Preview production build
pnpm lint         # Run ESLint

Development Environment

• Hot module replacement enabled
• Concurrent frontend and backend development
• TypeScript configuration for both client and server
• Environment variable management for sensitive data
• ESLint configuration for code quality

🚢 Production Deployment

The application uses Docker for containerized deployment:

docker-compose up --build

Production Setup

• Nginx serving frontend on port 804
• Node.js backend API with Express
• Redis-backed caching layer
• Gmail SMTP integration for emails
• Multi-stage Docker builds for optimization
• Automatic container restart policy
• Bridge network configuration
• Volume mounting for video content
• Environment variable management for sensitive data

🔐 Security Features

• Rate limiting on API endpoints
• Secure email handling with Google App credentials
• CORS configuration
• Environment variable protection
• Redis-backed session management

📄 License

Proprietary - DeafGain LLC

📞 Contact

For questions or support, reach out through our contact form.

---

This website represents DeafGain LLC's commitment to creating accessible, user-friendly digital experiences while maintaining high technical standards and professional quality.