Skip to content

BACKEND_IMPLEMENTATION.md

Latest commit

 

History

History
411 lines (328 loc) · 9.6 KB

BACKEND_IMPLEMENTATION.md

File metadata and controls

411 lines (328 loc) · 9.6 KB

Complete Backend Implementation Guide

✅ What's Now Working

1. Contact Form (/api/contact)

  • Frontend: /contact page has a fully functional form
  • Backend: Accepts and stores contact submissions
  • Features:
    • Name, email, subject, message validation
    • Email format validation
    • Stores submissions in data/contacts.json
    • Sends confirmation email to user
    • Sends notification to admin
    • Fallback message display on submit

2. Newsletter Signup (/api/newsletter)

  • Frontend: Newsletter form in Footer component
  • Backend: Accepts email subscriptions
  • Features:
    • Email validation
    • Duplicate prevention
    • Stores subscribers in data/subscribers.json
    • Sends confirmation email
    • Real-time feedback (success/error messages)

3. Booking System (/api/booking)

  • Frontend: Ready for booking form integration
  • Backend: Accepts booking requests
  • Features:
    • Name, email, phone, service, date validation
    • Phone number validation
    • Stores bookings in data/bookings.json with status tracking
    • Generates unique booking IDs
    • Sends confirmation and admin notifications

4. Data Management

  • Admin endpoints (GET) to retrieve all submissions:
    • GET /api/admin/contacts - View all contact messages
    • GET /api/admin/subscribers - View all newsletter subscribers
    • GET /api/admin/bookings - View all booking requests

🚀 How It Works

Development (localhost:5000)

npm run server    # Starts backend on port 5000
npm run dev       # Starts frontend on localhost:5173 (in another terminal)

Forms automatically send to:

  • Form submissions → http://localhost:5000/api/contact
  • Newsletter → http://localhost:5000/api/newsletter
  • Bookings → http://localhost:5000/api/booking

Production (Netlify)

Forms automatically send to:

  • Form submissions → /.netlify/functions/contact
  • Newsletter → /.netlify/functions/newsletter
  • Bookings → /.netlify/functions/booking

📊 Available Endpoints

Contact Form

POST /api/contact
{
  "name": "John Doe",
  "email": "john@example.com",
  "subject": "Question about eviction",
  "message": "I need help with..."
}

Response:
{
  "success": true,
  "message": "Your message has been received. We will respond soon.",
  "id": 1699564800000
}

Newsletter

POST /api/newsletter
{
  "email": "user@example.com"
}

Response:
{
  "success": true,
  "message": "Successfully subscribed to newsletter"
}

Booking

POST /api/booking
{
  "name": "Jane Smith",
  "email": "jane@example.com",
  "phone": "+234 801 234 5678",
  "service": "Legal Consultation",
  "date": "2024-03-15",
  "time": "10:00 AM",
  "notes": "Need advice on contract"
}

Response:
{
  "success": true,
  "message": "Your booking request has been received. We will contact you soon.",
  "bookingId": 1699564800000
}

Admin Endpoints

GET /api/admin/contacts
GET /api/admin/subscribers
GET /api/admin/bookings

Response: Array of all submissions

💾 Data Storage

File-based Storage (Local Development)

All submissions automatically saved to /data/ directory:

  • contacts.json - Contact form submissions
  • subscribers.json - Newsletter subscribers
  • bookings.json - Booking requests
  • email-log.json - Email notification log (if enabled)

Adding a Database (Optional)

Option 1: Supabase (Recommended - Free tier)

// Install
npm install @supabase/supabase-js

// In server.js
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

// Save to database instead of file
const { data, error } = await supabase
  .from('contacts')
  .insert([{ name, email, subject, message }])

Option 2: Firebase Firestore

// Install
npm install firebase-admin

// In server.js
import admin from 'firebase-admin'
admin.initializeApp()
const db = admin.firestore()

// Save to database
await db.collection('contacts').add({ name, email, subject, message })

Option 3: MongoDB

// Install
npm install mongodb

// In server.js
const client = new MongoClient(MONGODB_URI)
const db = client.db('is-this-allowed')

// Save to database
await db.collection('contacts').insertOne({ name, email, subject, message })

📧 Email Notifications

Current Setup

  • Emails are logged (not actually sent in development/demo mode)
  • View logs in data/email-log.json
  • To enable real email sending, set SEND_EMAILS=true in .env

Option 1: SendGrid (Recommended)

npm install @sendgrid/mail

Add to .env:

SENDGRID_API_KEY=your-sendgrid-api-key

Update server.js:

const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY);

async function sendEmailNotification(to, subject, htmlContent) {
  const msg = {
    to,
    from: 'noreply@thisallowed.com',
    subject,
    html: htmlContent,
  };
  await sgMail.send(msg);
}

Option 2: Mailgun

npm install mailgun.js

Option 3: Nodemailer (for Gmail/SMTP)

npm install nodemailer

Option 4: Netlify Email Integration

For Netlify Functions, use their native email integration or connect to services like:

  • ConvertKit (for newsletters)
  • Mailchimp (for email marketing)
  • Zapier (to connect forms to email services)

🎯 Integration Checklist

  • Contact form fully functional
  • Newsletter signup working
  • Booking system ready
  • Data storage implemented (file-based)
  • Admin endpoints to view submissions
  • CORS enabled for all endpoints
  • Form validation on frontend and backend
  • Error handling and user feedback
  • Email notifications (optional - requires service setup)
  • Database integration (optional - currently using files)
  • Admin dashboard (future feature)

🧪 Testing the Backend

Using curl

# Test contact form
curl -X POST http://localhost:5000/api/contact \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Test User",
    "email": "test@example.com",
    "subject": "Test",
    "message": "Testing"
  }'

# Test newsletter
curl -X POST http://localhost:5000/api/newsletter \
  -H "Content-Type: application/json" \
  -d '{"email": "subscriber@example.com"}'

# Test booking
curl -X POST http://localhost:5000/api/booking \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Test",
    "email": "test@example.com",
    "phone": "+234 801 234 5678",
    "service": "Consultation",
    "date": "2024-03-15"
  }'

# View contacts
curl http://localhost:5000/api/admin/contacts

# View subscribers
curl http://localhost:5000/api/admin/subscribers

# View bookings
curl http://localhost:5000/api/admin/bookings

Using Postman

  1. Create new requests for each endpoint
  2. Set method to POST
  3. Add headers: Content-Type: application/json
  4. Add request body and send
  5. View responses

🔐 Security Considerations

Currently Implemented

  • Input validation (email, phone, text fields)
  • CORS enabled (all origins - can be restricted)
  • Error handling (no sensitive data exposed)
  • Basic email validation

Recommended Additions

  • Rate limiting (prevent spam)
  • CAPTCHA (reCAPTCHA v3)
  • Authentication for admin endpoints
  • HTTPS enforced (auto on Netlify)
  • Content sanitization (prevent XSS)
  • API key authentication

Example rate limiting:

npm install express-rate-limit

import rateLimit from 'express-rate-limit';

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5 // limit each IP to 5 requests per windowMs
});

app.post('/api/contact', limiter, async (req, res) => {
  // ... handler
});

📱 Frontend Integration

Contact Form

Already integrated in /src/pages/Contact.jsx

  • Sends to backend on submit
  • Shows success/error messages
  • Clears form on success

Newsletter Form

Already integrated in /src/components/Footer.jsx

  • Email input with validation
  • Subscribe button
  • Real-time feedback

Booking Form

Ready to integrate - create form at /src/pages/Booking.jsx or add to existing page

Example:

const [booking, setBooking] = useState({
  name: '', email: '', phone: '', 
  service: '', date: '', time: '', notes: ''
});

const handleBookingSubmit = async (e) => {
  e.preventDefault();
  const response = await fetch('/api/booking', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(booking)
  });
  // ... handle response
};

🚀 Next Steps

  1. Test locally: npm run dev:all and try submitting forms
  2. Check data: View submissions in data/ folder
  3. Add email: Connect SendGrid or your preferred email service
  4. Add database: Link to Supabase or MongoDB
  5. Enhance UI: Add booking form to your site
  6. Deploy: Already deployed on Netlify!

📞 Support

For issues or questions about the backend:

  1. Check browser console (F12) for errors
  2. Check terminal for server logs
  3. View stored data in data/ folder
  4. Check Chrome DevTools Network tab for API responses

📝 Files Added/Modified

Backend

  • server.js - Extended with contact, newsletter, booking endpoints
  • netlify/functions/contact.js - Netlify serverless contact handler
  • netlify/functions/newsletter.js - Netlify serverless newsletter handler
  • netlify/functions/booking.js - Netlify serverless booking handler

Frontend

  • src/pages/Contact.jsx - Updated to send data to backend
  • src/components/Footer.jsx - Added newsletter signup form

Data

  • data/ folder - Created automatically on first submission

Everything is now live and ready to use! ✨