82 lines
No EOL
1.9 KiB
Text
82 lines
No EOL
1.9 KiB
Text
# 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 |