Skip to content

API_INTEGRATION_GUIDE.md

Latest commit

 

History

History
282 lines (206 loc) · 5.48 KB

API_INTEGRATION_GUIDE.md

File metadata and controls

282 lines (206 loc) · 5.48 KB

🔗 Integration Guide: Admin Panel + Backend API

This guide shows how to connect your Admin Panel to your Cloudflare Worker backend.

📝 Step 1: Update Admin Panel with API URL

Update src/components/AdminPanel.tsx to use environment variables and your API URL:

Before (hardcoded):

const response = await fetch('/api/upload', {

After (dynamic):

const API_URL = import.meta.env.VITE_API_URL || '/api';

// Then use:
const response = await fetch(`${API_URL}/upload`, {

🔐 Step 2: Secure Admin Password

Create .env.local in project root:

VITE_ADMIN_PASSWORD=your-secure-password-here
VITE_API_URL=https://your-worker.workers.dev

Update AdminPanel.tsx:

const ADMIN_PASSWORD = import.meta.env.VITE_ADMIN_PASSWORD || 'wedding2026';
const API_URL = import.meta.env.VITE_API_URL || '/api';

⚠️ Important: Add .env.local to .gitignore:

.env.local
.env.*.local

🚀 Step 3: Update API Calls in AdminPanel

Replace all hardcoded /api paths with API_URL:

Photo Upload (line ~118):

// BEFORE:
const response = await fetch('/api/upload', {

// AFTER:
const response = await fetch(`${API_URL}/upload`, {

Delete Photo (line ~154):

// BEFORE:
await fetch(`/api/photos/${id}`, {

// AFTER:
await fetch(`${API_URL}/photos/${id}`, {

Delete Video (line ~237):

// BEFORE:
await fetch(`/api/videos/${id}`, {

// AFTER:
await fetch(`${API_URL}/videos/${id}`, {

Get Wedding Details (line ~257):

// BEFORE:
const response = await fetch('/api/wedding-details', {

// AFTER:
const response = await fetch(`${API_URL}/wedding-details`, {

✅ Complete Updated AdminPanel.tsx Section

Here's the corrected hooks section to add at the top of AdminPanel component:

const AdminPanel = () => {
  // Environment configuration
  const API_URL = import.meta.env.VITE_API_URL || '/api';
  const ADMIN_PASSWORD = import.meta.env.VITE_ADMIN_PASSWORD || 'wedding2026';

  // ... rest of component code

🧪 Test Integration

1. Local Testing (with Worker Proxy)

# Terminal 1: Your Vite app
npm run dev

# Terminal 2: Your Cloudflare Worker
cd wedding-api
wrangler dev

Access: http://localhost:5173/admin

The app will connect to http://localhost:8787 (Wrangler dev server).

2. Production Testing

Once deployed:

  • Admin panel at: https://your-site.com/admin
  • API calls go to: https://your-worker.workers.dev

🛠️ API Response Handling

Your admin panel expects these response formats:

Upload Success:

{
  "url": "https://your-bucket.r2.dev/photo-123.jpg",
  "id": "photo-123",
  "title": "My Photo"
}

Upload Error:

{
  "error": "File too large"
}

Delete Success:

{
  "success": true
}

📊 CORS Configuration

Your Cloudflare Worker must handle CORS. See CLOUDFLARE_WORKER_SETUP.md for headers.

Key headers needed:

Access-Control-Allow-Origin: https://your-site.com
Access-Control-Allow-Methods: GET, POST, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type

🐛 Debugging Tips

Check API Calls

  1. Open DevTools (F12)
  2. Go to "Network" tab
  3. Try uploading a photo
  4. Look for the fetch request
  5. Check Response tab for errors

Enable Verbose Logging

Add to AdminPanel.tsx:

const handleUploadPhoto = async () => {
  console.log('Starting upload...');
  
  try {
    console.log('Uploading to:', `${API_URL}/upload`);
    
    const response = await fetch(`${API_URL}/upload`, {
      method: 'POST',
      body: formData,
    });

    console.log('Response status:', response.status);
    
    const data = await response.json();
    console.log('Response data:', data);
    
    // ... rest of code
  } catch (error) {
    console.error('Upload error:', error);
  }
};

🚀 Deployment Checklist

Pre-Deploy

  • Changed admin password
  • Updated API_URL for production
  • Tested locally
  • Added .env.local to .gitignore

Deploy Worker

cd wedding-api
wrangler deploy

Deploy Frontend

cd ..
npm run build
# Deploy dist/ folder to Vercel/Netlify

Verify

  • Admin panel accessible at /admin
  • Photo upload works
  • Videos upload works
  • Can delete items
  • Wedding details save

🔍 Common Issues & Solutions

Issue: "Failed to fetch"

Cause: CORS error or API endpoint wrong Solution: Check Network tab, verify API_URL, check CORS headers in Worker

Issue: "Unexpected token < in JSON"

Cause: Getting HTML error page instead of JSON Solution: Worker is returning error page, check Worker logs

Issue: Files upload but don't appear

Cause: Database not connected or wrong table Solution: Add logging to Worker, check Neon connection

Issue: CORS errors

Cause: API_URL domain not allowed Solution: Update CORS headers in Worker to include your domain

📋 Environment Variables Checklist

✅ VITE_ADMIN_PASSWORD=secure-password
✅ VITE_API_URL=https://worker.workers.dev
✅ DATABASE_URL=postgresql://...
✅ AWS_BUCKET_NAME=your-bucket
✅ R2_BUCKET_NAME=your-bucket (if using R2)

🎯 Next: Database Integration

Once this works, you can:

  1. Connect to Neon PostgreSQL
  2. Store photos/videos metadata
  3. Persist wedding details
  4. Add more features

See CLOUDFLARE_WORKER_SETUP.md for database examples.

Good luck! Let me know if you hit any issues. 🚀