# Contact Form Implementation Guide

## Directory Structure
/src
  /lib
    - email.ts
    - rate-limit.ts
  /components
    /shared
      - ContactModal.tsx
      - Toast.tsx
    /providers
      - notification-provider.tsx
  /app
    /api
      /contact
        - route.ts

## Step-by-Step Implementation

### 1. Create Directory Structure
    mkdir -p src/lib
    mkdir -p src/components/shared
    mkdir -p src/components/providers
    mkdir -p src/app/api/contact

### 2. Install Dependencies
    npm install nodemailer @upstash/redis framer-motion lucide-react

### 3. Environment Variables
Create .env file with:

    SMTP_HOST=smtp.gmail.com
    SMTP_PORT=465
    SMTP_SECURE=true
    GOOGLE_EMAIL=your-email@gmail.com
    GOOGLE_APP_PASSWORD=your-app-password
    RECIPIENT_EMAIL=recipient@example.com
    UPSTASH_REDIS_REST_URL=your-redis-url
    UPSTASH_REDIS_REST_TOKEN=your-redis-token

### 4. Integration Steps
1. Copy all required files from source project
2. Update layout.tsx to include NotificationProvider
3. Configure email settings
4. Set up Redis connection
5. Test implementation

### 5. Testing Checklist
- Email Sending
  - Test with valid email credentials
  - Verify email receipt
  - Check HTML formatting

- Rate Limiting
  - Test multiple submissions
  - Verify Redis connection
  - Check rate limit messages

- Form Validation
  - Test all form fields
  - Verify error messages
  - Check input sanitization

- Notifications
  - Test success messages
  - Test error messages
  - Verify toast timing

### 6. Debugging Guide
- Check environment variables are properly set
- Verify Redis connection in logs
- Test email credentials separately
- Monitor Network tab in browser dev tools
- Check server logs for errors
- Verify CORS settings if needed

### 7. Security Considerations
- Input sanitization is implemented
- Rate limiting prevents spam
- Email credentials are secured
- Form validation prevents injection