developer & admin manual

CMS Architecture & Documentation

Complete installation, configuration, administration, analytics, lead management, backup, and deployment guide.

1. System Architecture Overview

The Doodle Portfolio & Business CMS is built using a hybrid **Client-Server & Local Fallback Strategy**. It operates seamlessly with **Supabase (PostgreSQL, Auth, RLS)** while automatically supporting offline local storage (`localStorage`) so admin features run reliably anywhere.

• Frontend: React 18, TanStack Router, Vite, Tailwind CSS, Motion
• Backend & Database: Supabase (PostgreSQL, RLS Policies, Realtime)
• CMS Store: Dual Supabase Client + Local Storage Fallback Engine
• Analytics: GDPR Consent Telemetry Tracker (`analytics_events`)
• Chatbot: AI Agent Assistant + WhatsApp Business Handoff

2. Local Installation & Development

Run the following commands in terminal to start development:

# Install dependencies
npm install

# Run local development server
npm run dev

# Build production bundle
npm run build

3. Admin Login & Authentication

The public portfolio stays accessible to all visitors without login. Admin authentication is restricted to the `/admin` portal.

🔑 Default Admin Passcode: admin123 or admin

4. Lead CRM & Content Management

  • Lead Management: All contact form inquiries, chatbot sessions, and consultation bookings are consolidated in the `/admin` Lead CRM with status toggles (New, Contacted, In Progress, Archived).
  • Project Manager: Add, edit, reorder, feature, or delete showcase projects dynamically.
  • Blog Manager: Draft, publish, schedule, or categorize articles with SEO metadata.

5. Backup, Restore & Deployment

To back up full site content, navigate to /admin and select **Backup & Restore**. Clicking "Download Backup JSON" generates a complete snapshot file. To deploy to Vercel, Netlify, or Cloudflare, connect your GitHub repository and run npm run build.