# Backend Integration Contracts - Vireun Website

## Mock Data Currently Used
All data is currently served from `/app/frontend/src/mock.js` and rendered client-side.

## Backend Endpoints to Implement

### 1. Contact Form Submission
**Endpoint:** `POST /api/contact`

**Request Body:**
```json
{
  "fullName": "string (required)",
  "email": "string (required, valid email)",
  "phone": "string (optional)",
  "service": "string (required, one of: custom-website, ui-ux-design, web-app, other)",
  "message": "string (required)",
  "website": "string (honeypot field for spam protection, should be empty)"
}
```

**Response:**
```json
{
  "success": true,
  "message": "Thank you! We'll get back to you soon."
}
```

**Error Response:**
```json
{
  "success": false,
  "message": "Error message here"
}
```

**Email Requirements:**
- Send formatted email to: `support@vireun.com`
- Email should include all form fields in a readable format
- Subject line: "New Contact Form Submission from [fullName]"
- Implement spam protection by checking honeypot field

**Frontend Integration:**
- Update `/app/frontend/src/pages/Contact.jsx`
- Replace mock setTimeout with actual API call using axios
- API endpoint: `${BACKEND_URL}/api/contact`

### 2. Future Enhancements (Optional)

**Portfolio API (if dynamic content needed later):**
```
GET /api/portfolio
GET /api/portfolio/:id
POST /api/portfolio (admin only)
PUT /api/portfolio/:id (admin only)
DELETE /api/portfolio/:id (admin only)
```

**Blog/News (if needed):**
```
GET /api/blog
GET /api/blog/:slug
```

## Email Service Integration Options

### Option 1: SendGrid (Recommended)
- Modern, reliable
- Easy integration
- Good free tier
- Need: SENDGRID_API_KEY

### Option 2: Resend
- Developer-friendly
- Modern API
- Need: RESEND_API_KEY

### Option 3: Nodemailer + SMTP
- No third-party dependency
- Need: SMTP credentials (host, port, user, password)

## Backend Files to Create/Modify

1. `/app/backend/server.py` - Add contact endpoint
2. `/app/backend/services/email_service.py` - Email sending logic
3. `/app/backend/.env` - Add email service API key
4. `/app/backend/requirements.txt` - Add email package if needed

## Testing Checklist

After backend implementation:
- [ ] Contact form submits successfully
- [ ] Email arrives at support@vireun.com
- [ ] Email contains all form fields
- [ ] Error handling works (invalid email, missing fields)
- [ ] Success message displays correctly
- [ ] Loading state shows during submission
- [ ] Honeypot spam protection works
- [ ] Phone field (optional) works correctly

## Database Schema (if storing submissions)

```python
class ContactSubmission:
    id: str
    full_name: str
    email: str
    phone: str (optional)
    service: str
    message: str
    created_at: datetime
    status: str (new, contacted, resolved)
```

## Frontend Changes Required After Backend Implementation

1. Update Contact.jsx handleSubmit function:
```javascript
const API = `${process.env.REACT_APP_BACKEND_URL}/api`;

const handleSubmit = async (e) => {
  e.preventDefault();
  setIsSubmitting(true);
  setSubmitStatus(null);

  // Spam protection check
  if (formData.website) {
    return;
  }

  try {
    const response = await axios.post(`${API}/contact`, formData);
    if (response.data.success) {
      setSubmitStatus('success');
      setFormData({ fullName: '', email: '', phone: '', service: '', message: '' });
    }
  } catch (error) {
    console.error('Error submitting form:', error);
    setSubmitStatus('error');
  } finally {
    setIsSubmitting(false);
  }
};
```

2. No other frontend changes needed - all components are ready for backend integration.

## Environment Variables

### Frontend (.env)
```
REACT_APP_BACKEND_URL=<already configured>
```

### Backend (.env)
```
MONGO_URL=<already configured>
DB_NAME=<already configured>

# Email Service (choose one)
SENDGRID_API_KEY=<to be provided>
# OR
RESEND_API_KEY=<to be provided>
# OR
SMTP_HOST=<to be provided>
SMTP_PORT=<to be provided>
SMTP_USER=<to be provided>
SMTP_PASSWORD=<to be provided>

# Email Configuration
CONTACT_EMAIL=support@vireun.com
```

## Notes
- All frontend components are production-ready
- Mock data can remain for portfolio/services until dynamic CMS is needed
- Contact form is the only feature requiring immediate backend integration
- All other pages function perfectly with static/mock data