Add development enviornment and update documents
This commit is contained in:
parent
d13838758e
commit
3f23aa5e93
5 changed files with 172 additions and 69 deletions
13
Dockerfile.dev.api
Normal file
13
Dockerfile.dev.api
Normal 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
144
README.md
|
|
@ -1,8 +1,8 @@
|
|||
# DeafGain LLC Website 🌐
|
||||
|
||||
[](https://pnpm.io/)
|
||||
[](https://www.typescriptlang.org/)
|
||||
[](https://reactjs.org/)
|
||||
[](https://pnpm.io/)
|
||||
[](https://www.typescriptlang.org/)
|
||||
[](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
|
||||
|
||||
## <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:
|
||||
|
||||
- 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
|
||||
|
||||
|
|
|
|||
49
Tech_Stack
49
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue