# Tech Context - Technologies & Setup

## Core Technologies

### Frontend Stack
- **Next.js**: 16.0.10 (React framework with App Router)
- **React**: 19.2.3 (UI library)
- **TypeScript**: 5.9.3 (Type-safe JavaScript)
- **Tailwind CSS**: 4.1.18 (Utility-first CSS framework)
- **@tailwindcss/postcss**: 4.1.18 (PostCSS plugin for Tailwind v4)
- **Framer Motion**: 12.23.26 (Animation library)
- **HeadlessUI**: 2.2.9 (Unstyled UI components)
- **Lucide React**: 0.561.0 (Icon library)
- **React Icons**: 5.5.0 (Additional icon library)

### Backend Stack
- **Next.js API Routes**: Server-side API endpoints
- **Nodemailer**: Email sending library
- **Upstash Redis**: Cloud Redis for rate limiting
- **Node.js**: Runtime environment

### Development Tools
- **PNPM**: 9.14.2 (Package manager)
- **ESLint**: Code linting
- **PostCSS**: CSS processing
- **Autoprefixer**: CSS vendor prefixing
- **Docker**: Containerization
- **Docker Compose**: Multi-container orchestration

## Environment Configuration

### Required Environment Variables
```env
# Email Configuration
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
GOOGLE_EMAIL=system@deafgain.org
GOOGLE_APP_PASSWORD=ojvlysraxwjriwzy
RECIPIENT_EMAIL=mark@finlion.com

# Redis Configuration
UPSTASH_REDIS_REST_URL=https://gusc1-resolved-jaybird-30779.upstash.io
UPSTASH_REDIS_REST_TOKEN=AXg7ASQgNDMzMDE0MTYtNWE0Ni00OTc3LThhYjktM2IxMzMxNGMyMzMxNWRiNGMyOGU2MjE0NGUyNTkwMTQyNmUxZTU2NzE4NDI=
```

### Email Service Setup
- **Provider**: Gmail SMTP
- **Authentication**: Google App Password (not regular password)
- **Security**: TLS encryption (port 587)
- **From Address**: system@deafgain.org
- **Recipient**: mark@finlion.com

### Redis Setup
- **Provider**: Upstash (cloud Redis service)
- **Purpose**: Rate limiting for API endpoints
- **Configuration**: REST API access via URL and token

## Development Setup

### Prerequisites
- Node.js 18+
- PNPM package manager
- Docker and Docker Compose
- Git

### Local Development
```bash
# Install dependencies
pnpm install

# Development server (Docker)
docker compose -f docker-compose.dev.yml up

# Development server (local)
pnpm dev
```

### Production Deployment
```bash
# Production build and run
docker compose up -d
```

## Technical Constraints

### Performance
- Server-side rendering for SEO
- Optimized images and assets
- Efficient CSS with Tailwind

### Security
- Input validation and sanitization
- Rate limiting on API endpoints
- Environment variable protection
- XSS prevention

### Scalability
- Containerized deployment
- Redis for distributed rate limiting
- Stateless API design

## File Structure
- **Configuration Files**: Root level (package.json, tsconfig.json, etc.)
- **Source Code**: `/src` directory
- **Static Assets**: `/public` directory
- **Docker**: Multiple compose files for different environments
- **Documentation**: `/cline_docs` directory

## Build Process
- **TypeScript Compilation**: Automatic via Next.js
- **CSS Processing**: Tailwind CSS compilation
- **Asset Optimization**: Next.js built-in optimization
- **Docker Build**: Multi-stage builds for production