chaulmark/deafgain-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add development enviornment and update documents

Browse source
This commit is contained in:
TheMaddax 2024-12-10 23:43:33 -06:00
parent d13838758e
commit 3f23aa5e93
5 changed files with 172 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
Dockerfile.dev.api Normal file
View file

@ -0,0 +1,13 @@
FROM node:20-alpine
RUN corepack enable && corepack prepare pnpm@latest --activate
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install
# We'll mount the source code as a volume, so we don't need to copy it here
EXPOSE 3000
CMD ["pnpm", "dev:server"]

144
README.md
View file

@ -1,8 +1,8 @@
# DeafGain LLC Website 🌐 # DeafGain LLC Website 🌐
[![PNPM](https://img.shields.io/badge/package%20manager-pnpm-f69220.svg)](https://pnpm.io/) [![PNPM](https://img.shields.io/badge/package%20manager-pnpm-9.14.2-f69220.svg)](https://pnpm.io/)
[![TypeScript](https://img.shields.io/badge/TypeScript-4.9.5-blue.svg)](https://www.typescriptlang.org/) [![TypeScript](https://img.shields.io/badge/TypeScript-5.7.2-blue.svg)](https://www.typescriptlang.org/)
[![React](https://img.shields.io/badge/React-18.2.0-61dafb.svg)](https://reactjs.org/) [![React](https://img.shields.io/badge/React-19.0.0-61dafb.svg)](https://reactjs.org/)
## Overview ## Overview
@ -10,84 +10,126 @@ A dynamic web platform dedicated to empowering the Deaf community through innova
## 🚀 Quick Start ## 🚀 Quick Start
\`\`\`bash ```bash
pnpm install pnpm install
pnpm dev pnpm dev # Runs both frontend and backend concurrently
\`\`\` ```
Visit \`localhost:3000\` in your browser. Frontend runs on `localhost:3000`, API on port `4000`.
## 🛠 Technical Stack ## 🛠 Technical Stack
### Frontend
| Technology | Version | Purpose | | Technology | Version | Purpose |
|------------|---------|---------| |------------|---------|---------|
| React | 18.2.0 | Core Framework | | React | 19.0.0 | Core Framework |
| TypeScript | 4.9.5 | Type Safety | | TypeScript | 5.7.2 | Type Safety |
| Tailwind CSS | 3.x | Styling | | React Router | 7.0.2 | Routing |
| Framer Motion | 10.x | Animations | | Tailwind CSS | 3.4.16 | Styling |
| React Simple Maps | 3.0.0 | Geographic Visualization | | Framer Motion | 11.13.5 | Animations |
| Vite | 4.x | Build System | | React Simple Maps | 4.0.0-beta.6 | Geographic Visualization |
| Docker | - | Containerization | | Next.js | 14.1.0 | Framework Features |
| Nginx | - | Web Server | | 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 ## 📁 Project Structure
\`\`\` ```
src/ src/
├── api/ # Backend API routes and handlers
├── components/ # Reusable UI components ├── components/ # Reusable UI components
│ ├── layout/ # Layout components │ ├── Layout/ # Layout components (Navbar, Footer)
│ ├── ui/ # UI elements │ └── shared/ # Shared UI components
│ └── maps/ # Map visualization components ├── context/ # React Context providers
├── pages/ # Main application pages ├── lib/ # Utility libraries
├── hooks/ # Custom React hooks ├── pages/ # Main application pages
├── utils/ # Utility functions │ ├── About
├── types/ # TypeScript definitions │ ├── Contact
├── assets/ # Static assets │ ├── Home
└── styles/ # Global styles │ ├── Resources
\`\`\` │ └── Services
├── styles/ # Global styles
└── assets/ # Static assets
public/
├── images/ # Image assets
├── subtitles/ # WebVTT subtitle files
├── transcriptions/ # Text transcriptions
└── videos/ # Video content
```
## 🎯 Core Features ## 🎯 Core Features
- ⚡️ Intuitive user interface with responsive design - ⚡️ Modern React with TypeScript for type safety
- 🗺️ Interactive USA region map displaying network and relationships - 🗺️ Interactive USA region map using React Simple Maps
- 🎥 Video resources with accessible playback controls and captions - 🎥 Custom video player with WebVTT subtitles and transcriptions
- 📱 Mobile-first responsive design - 📱 Responsive design with Tailwind CSS
- 🔒 Secure contact system - 🔒 Rate-limited contact form with email notifications
- 🌐 Key sections: Home, Services, About, Resources, and Contact - 🌊 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 ## 🔧 Development
### Environment Setup ### Environment Setup
- Development: Vite dev server with hot reload ```bash
- Production: Nginx configuration with optimized cache settings # Install dependencies
- Docker containers for consistent deployment pnpm install
### Scripts # Start development servers
\`\`\`bash pnpm dev # Runs frontend and backend concurrently
pnpm dev # Start development server
# Other available scripts
pnpm build # Build for production pnpm build # Build for production
pnpm preview # Preview production build pnpm preview # Preview production build
pnpm lint # Run ESLint pnpm lint # Run ESLint
pnpm test # Run tests ```
\`\`\`
### 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 ## 🚢 Production Deployment
\`\`\`bash The application uses Docker for containerized deployment:
```bash
docker-compose up --build docker-compose up --build
\`\`\` ```
Application will be served on port 80. ### 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
## <20><> Contributing ## 🔐 Security Features
We welcome contributions that align with our mission of improving accessibility and empowerment for the Deaf community. Follow our established patterns for: - Rate limiting on API endpoints
- Secure email handling with Google App credentials
- Component architecture - CORS configuration
- Styling conventions (Tailwind CSS) - Environment variable protection
- Accessibility standards (WCAG 2.1) - Redis-backed session management
- TypeScript typing
- Git commit messages
## 📄 License ## 📄 License

49
Tech_Stack
View file

@ -1,27 +1,34 @@
## Tech Stack ## Tech Stack
### Frontend ### Frontend
- React 18 - React 19
- TypeScript 4.9 - TypeScript 5.7
- React Router DOM 6 - React Router DOM 7
- Tailwind CSS 3.3 - Tailwind CSS 3.4
- Framer Motion 10 - Framer Motion 11
- React Icons 4.11 - React Icons 5.4
- React Simple Maps 3.0 - React Simple Maps 4.0 (beta)
- React Intersection Observer 9.5 - React Intersection Observer 9.13
- Next.js 14.1
### Backend ### Backend
- Node.js with Express - Node.js with Express 4.21
- TypeScript - TypeScript
- Nodemailer for email handling - Nodemailer 6.9 for email handling
- CORS for cross-origin resource sharing - CORS for cross-origin resource sharing
- dotenv for environment variable management - dotenv 16.4 for environment variable management
- Upstash Redis 1.28 for caching/rate limiting
### Development & Build Tools ### Development & Build Tools
- Docker & Docker Compose - Docker & Docker Compose
- PostCSS - PostCSS 8.4
- Autoprefixer - Autoprefixer 10.4
- npm - pnpm 9.14 (package manager)
- Vite 6.0
- ESLint 9
- Concurrently for running multiple processes
- tsx/ts-node for TypeScript execution
- Hot module replacement (HMR)
### Production ### Production
- Nginx (Production server for frontend) - Nginx (Production server for frontend)
@ -33,25 +40,37 @@
- Containerized development and production environments - Containerized development and production environments
- REST API for contact form handling - REST API for contact form handling
- Gmail SMTP for email delivery - Gmail SMTP for email delivery
- Rate limiting implementation
- Context-based state management
- Redis-backed caching layer
### Key Features ### Key Features
- Responsive design - Responsive design
- Animated UI components - Animated UI components with Framer Motion
- Interactive USA region map - Interactive USA region map
- Contact form with email notifications - Contact form with email notifications
- Timeline visualization - Timeline visualization
- Service showcase - Service showcase
- Biography section - Biography section
- Testimonials section - Testimonials section
- Video playback with WebVTT subtitles
- Transcription support
- Toast notification system
- Snow peaks animation effect
- Custom video player component
### Development Environment ### Development Environment
- Multi-container setup with Docker Compose - Multi-container setup with Docker Compose
- Hot-reloading enabled - Hot-reloading enabled
- Separate development and production builds - Separate development and production builds
- Environment variable management for sensitive data - Environment variable management for sensitive data
- TypeScript configuration for both client and server
- Concurrent development server (frontend + backend)
### Production Environment ### Production Environment
- Nginx serving static frontend files - Nginx serving static frontend files
- Node.js backend API - Node.js backend API
- Containerized deployment - Containerized deployment
- Secure email handling with Google App credentials - Secure email handling with Google App credentials
- Multi-stage Docker builds
- Production-optimized builds with tree-shaking

32
docker-compose.dev.yml
View file

@ -2,6 +2,7 @@ version: '3.8'
services: services:
web-dev: web-dev:
platform: linux/arm64
build: build:
context: . context: .
dockerfile: Dockerfile.dev dockerfile: Dockerfile.dev
@ -10,8 +11,33 @@ services:
volumes: volumes:
- .:/app - .:/app
- /app/node_modules - /app/node_modules
- ./public:/app/public:ro # Mount public directory as read-only - ./public:/app/public
environment: environment:
- NODE_ENV=development - NODE_ENV=development
- VITE_HOST=0.0.0.0 - VITE_API_URL=http://localhost:3000
command: pnpm dev --host 0.0.0.0 command: pnpm dev
depends_on:
- api-dev
api-dev:
platform: linux/arm64
build:
context: .
dockerfile: Dockerfile.dev.api
ports:
- "804:804"
volumes:
- .:/app
- /app/node_modules
environment:
- NODE_ENV=development
- PORT=804
- SMTP_HOST=${SMTP_HOST}
- SMTP_PORT=${SMTP_PORT}
- SMTP_SECURE=${SMTP_SECURE}
- RECIPIENT_EMAIL=${RECIPIENT_EMAIL}
- GOOGLE_EMAIL=${GOOGLE_EMAIL}
- GOOGLE_APP_PASSWORD=${GOOGLE_APP_PASSWORD}
- UPSTASH_REDIS_REST_URL=${UPSTASH_REDIS_REST_URL}
- UPSTASH_REDIS_REST_TOKEN=${UPSTASH_REDIS_REST_TOKEN}
command: pnpm dev

3
vite.config.ts
View file

@ -14,6 +14,9 @@ export default defineConfig({
strictPort: true strictPort: true
}, },
server: { server: {
host: true, // Allow external access
port: 5173,
strictPort: true,
proxy: { proxy: {
'/api': { '/api': {
target: 'http://localhost:804', target: 'http://localhost:804',