diff --git a/Dockerfile.dev.api b/Dockerfile.dev.api new file mode 100644 index 0000000..75a8a6d --- /dev/null +++ b/Dockerfile.dev.api @@ -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"] diff --git a/README.md b/README.md index b701d61..57f8d53 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # DeafGain LLC Website 🌐 -[![PNPM](https://img.shields.io/badge/package%20manager-pnpm-f69220.svg)](https://pnpm.io/) -[![TypeScript](https://img.shields.io/badge/TypeScript-4.9.5-blue.svg)](https://www.typescriptlang.org/) -[![React](https://img.shields.io/badge/React-18.2.0-61dafb.svg)](https://reactjs.org/) +[![PNPM](https://img.shields.io/badge/package%20manager-pnpm-9.14.2-f69220.svg)](https://pnpm.io/) +[![TypeScript](https://img.shields.io/badge/TypeScript-5.7.2-blue.svg)](https://www.typescriptlang.org/) +[![React](https://img.shields.io/badge/React-19.0.0-61dafb.svg)](https://reactjs.org/) ## Overview @@ -10,84 +10,126 @@ A dynamic web platform dedicated to empowering the Deaf community through innova ## πŸš€ Quick Start -\`\`\`bash +```bash 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 +### Frontend | Technology | Version | Purpose | |------------|---------|---------| -| React | 18.2.0 | Core Framework | -| TypeScript | 4.9.5 | Type Safety | -| Tailwind CSS | 3.x | Styling | -| Framer Motion | 10.x | Animations | -| React Simple Maps | 3.0.0 | Geographic Visualization | -| Vite | 4.x | Build System | -| Docker | - | Containerization | -| Nginx | - | Web Server | +| 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 -β”‚ β”œβ”€β”€ ui/ # UI elements -β”‚ └── maps/ # Map visualization components -β”œβ”€β”€ pages/ # Main application pages -β”œβ”€β”€ hooks/ # Custom React hooks -β”œβ”€β”€ utils/ # Utility functions -β”œβ”€β”€ types/ # TypeScript definitions -β”œβ”€β”€ assets/ # Static assets -└── styles/ # Global styles -\`\`\` +β”‚ β”œβ”€β”€ 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 -- ⚑️ Intuitive user interface with responsive design -- πŸ—ΊοΈ Interactive USA region map displaying network and relationships -- πŸŽ₯ Video resources with accessible playback controls and captions -- πŸ“± Mobile-first responsive design -- πŸ”’ Secure contact system -- 🌐 Key sections: Home, Services, About, Resources, and Contact +- ⚑️ 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 -- Development: Vite dev server with hot reload -- Production: Nginx configuration with optimized cache settings -- Docker containers for consistent deployment +```bash +# Install dependencies +pnpm install -### Scripts -\`\`\`bash -pnpm dev # Start development server +# 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 -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 -\`\`\`bash +The application uses Docker for containerized deployment: + +```bash 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 -## οΏ½οΏ½ 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: - -- Component architecture -- Styling conventions (Tailwind CSS) -- Accessibility standards (WCAG 2.1) -- TypeScript typing -- Git commit messages +- Rate limiting on API endpoints +- Secure email handling with Google App credentials +- CORS configuration +- Environment variable protection +- Redis-backed session management ## πŸ“„ License diff --git a/Tech_Stack b/Tech_Stack index ae295e0..c2bd06d 100644 --- a/Tech_Stack +++ b/Tech_Stack @@ -1,27 +1,34 @@ ## Tech Stack ### Frontend -- React 18 -- TypeScript 4.9 -- React Router DOM 6 -- Tailwind CSS 3.3 -- Framer Motion 10 -- React Icons 4.11 -- React Simple Maps 3.0 -- React Intersection Observer 9.5 +- React 19 +- TypeScript 5.7 +- React Router DOM 7 +- Tailwind CSS 3.4 +- Framer Motion 11 +- React Icons 5.4 +- React Simple Maps 4.0 (beta) +- React Intersection Observer 9.13 +- Next.js 14.1 ### Backend -- Node.js with Express +- Node.js with Express 4.21 - TypeScript -- Nodemailer for email handling +- Nodemailer 6.9 for email handling - 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 - Docker & Docker Compose -- PostCSS -- Autoprefixer -- npm +- PostCSS 8.4 +- Autoprefixer 10.4 +- 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 - Nginx (Production server for frontend) @@ -33,25 +40,37 @@ - Containerized development and production environments - REST API for contact form handling - Gmail SMTP for email delivery +- Rate limiting implementation +- Context-based state management +- Redis-backed caching layer ### Key Features - Responsive design -- Animated UI components +- Animated UI components with Framer Motion - Interactive USA region map - Contact form with email notifications - Timeline visualization - Service showcase - Biography section - Testimonials section +- Video playback with WebVTT subtitles +- Transcription support +- Toast notification system +- Snow peaks animation effect +- Custom video player component ### Development Environment - Multi-container setup with Docker Compose - Hot-reloading enabled - Separate development and production builds - Environment variable management for sensitive data +- TypeScript configuration for both client and server +- Concurrent development server (frontend + backend) ### Production Environment - Nginx serving static frontend files - Node.js backend API - Containerized deployment - Secure email handling with Google App credentials +- Multi-stage Docker builds +- Production-optimized builds with tree-shaking diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index 705fd44..51ffc59 100644 --- a/docker-compose.dev.yml +++ b/docker-compose.dev.yml @@ -2,6 +2,7 @@ version: '3.8' services: web-dev: + platform: linux/arm64 build: context: . dockerfile: Dockerfile.dev @@ -10,8 +11,33 @@ services: volumes: - .:/app - /app/node_modules - - ./public:/app/public:ro # Mount public directory as read-only + - ./public:/app/public environment: - NODE_ENV=development - - VITE_HOST=0.0.0.0 - command: pnpm dev --host 0.0.0.0 + - VITE_API_URL=http://localhost:3000 + 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 diff --git a/vite.config.ts b/vite.config.ts index 8cc3b53..a7230a0 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -14,6 +14,9 @@ export default defineConfig({ strictPort: true }, server: { + host: true, // Allow external access + port: 5173, + strictPort: true, proxy: { '/api': { target: 'http://localhost:804',