Digital Allies

Connected CMS — Implementation Plan

Step-by-step guide to building and deploying the Barcelona CMS platform

Quick Overview

The Connected CMS (Barcelona) is a content management system that powers Digital Allies' three core platforms:

Services Index: Hero + featured tools grid + "View all tools" link
Tool Detail Pages: Individual product pages (problem/solution/features/pricing/FAQ)
Content Calendar: 30-day social media + email marketing schedule

All content is managed through a single dashboard, with live updates to the design system templates.

Technology Stack

Backend Node.js + Express / Firebase / Supabase

Database PostgreSQL / MongoDB / Firebase

Frontend (Dashboard) React + Tailwind CSS

API REST / GraphQL

Authentication JWT / OAuth 2.0

Hosting Vercel / Netlify / AWS / Heroku

Implementation Phases

Phase 1: Database Setup (Week 1)

Collections to Create

Collection	Purpose	Key Fields
Tools	Individual service offerings	name, slug, description, icon, features, pricing, problemStatement, solutionStatement, faqs, cta
Services	Department/service categories	name, slug, description, icon, featuredTools[], order
ContentCalendar	30-day social + email schedule	day, week, category, topic, hook, caption, cta, promptRef, status, scheduledDate
Users	CMS editors & admins	email, password (hashed), role, permissions, createdAt
Settings	Global configuration	siteName, tagline, contactEmail, socialLinks, brandColors

Setup Instructions

Choose your database provider (PostgreSQL recommended for relational data)
Create the 5 collections above with the specified fields
Add indexes on: Tools.slug, Services.slug, ContentCalendar.day, Users.email
Set up automated backups (daily)
Create seed data: import the 30-day content calendar CSV

Phase 2: Backend API (Week 2)

Core Endpoints to Build

Tools

GET    /api/tools                    # List all tools
GET    /api/tools/:slug              # Get single tool
POST   /api/tools                    # Create (admin)
PUT    /api/tools/:slug              # Update (admin)
DELETE /api/tools/:slug              # Delete (admin)
      

Services

GET    /api/services                 # List all services
GET    /api/services/:slug           # Get single service + tools
POST   /api/services                 # Create (admin)
PUT    /api/services/:slug           # Update (admin)
DELETE /api/services/:slug           # Delete (admin)
      

Content Calendar

GET    /api/calendar                 # List all entries (30 days)
GET    /api/calendar?status=scheduled # Filter by status
GET    /api/calendar?category=...    # Filter by category
POST   /api/calendar                 # Create entry (editor)
PUT    /api/calendar/:day            # Update entry (editor)
DELETE /api/calendar/:day            # Delete entry (admin)
      

Authentication

POST   /api/auth/login               # Login (returns JWT)
POST   /api/auth/logout              # Logout (invalidate token)
POST   /api/auth/refresh             # Refresh token
GET    /api/auth/me                  # Get current user
      

Response Format Example

{
  "success": true,
  "data": {
    "id": "tool-001",
    "name": "Brand Discovery",
    "slug": "brand-discovery",
    "description": "From brief to brand board in one session",
    "icon": "🎨",
    "features": ["Logo variations", "Color palette", ...],
    "pricing": "From $475",
    "status": "published",
    "createdAt": "2026-06-18T14:30:00Z",
    "updatedAt": "2026-06-18T14:30:00Z"
  },
  "timestamp": "2026-06-18T14:35:00Z"
}
      

Setup Instructions

Create Express.js (or equivalent) server
Set up database connections
Implement all 15 endpoints above
Add authentication middleware (JWT validation)
Add error handling & validation
Test all endpoints with Postman or Insomnia
Add CORS headers for front-end access

Phase 3: Dashboard Frontend (Week 3)

Main Dashboard Views

Overview: Recent edits, publishing status, quick links
Tools Manager: Create/edit/delete service tools
Services Manager: Manage service categories
Content Calendar: 30-day schedule with edit inline
Users: Manage editor permissions (admin only)
Settings: Global configuration (admin only)

Key Features

Login/logout (JWT auth)
Role-based access control (Admin / Editor / Viewer)
Live preview of changes (connected to design system templates)
Bulk import (CSV for content calendar)
Publish/unpublish content
Version history (track changes)
Search across all content
Mobile-responsive dashboard

Setup Instructions

Create React app (Vite or Create React App)
Set up routing (React Router)
Create login page with JWT handling
Build 6 main dashboard views (above)
Wire up API calls to backend endpoints
Add form validation & error handling
Test authentication flow

Phase 4: Design System Integration (Week 4)

How Templates Connect

The design system's CMS-ready templates (ServicesIndex.dc.html, ToolDetail.dc.html) consume data from Barcelona via API:

// In your Design Component (DC):
<sc-for list="{{ tools }}" as="tool">
  <!-- renders each tool from /api/tools -->
</sc-for>

// Props passed from API:
{{ toolName }}        # from /api/tools/:slug
{{ features }}        # from /api/tools/:slug
{{ pricingDisplay }}  # from /api/tools/:slug
{{ faqs }}            # from /api/tools/:slug
      

Integration Checklist

Create an environment variable file (.env) with API base URL
In design system templates, fetch from /api/tools and /api/services
Set up auto-refresh (poll API every 30 seconds for live updates)
Add error handling for missing/invalid data
Test end-to-end: edit in CMS → see change in design system

Example Integration Code

// In ToolDetail.dc.html logic class:
async componentDidMount() {
  const slug = window.location.pathname.split('/').pop();
  const res = await fetch(`/api/tools/${slug}`);
  const { data } = await res.json();
  this.setState({ tool: data });
}

renderVals() {
  const { tool } = this.state;
  return {
    toolName: tool?.name || '',
    features: tool?.features || [],
    pricingDisplay: tool?.pricing || '',
    faqs: tool?.faqs || []
  };
}
      

Phase 5: Deployment & Launch (Week 5)

Deployment Checklist

Set up environment variables (API keys, database URLs, JWT secret)
Configure CORS to allow design system origin
Set up HTTPS (required for JWT auth)
Deploy backend (Vercel, Heroku, AWS)
Deploy frontend dashboard (Vercel, Netlify)
Deploy design system with API URL pointing to live backend
Test end-to-end in production
Set up monitoring & error tracking
Create admin account for yourself
Invite editors and set permissions

Post-Launch

Monitor API performance (response times)
Set up automated daily backups
Create user documentation (how to use dashboard)
Establish content review workflow
Plan content calendar (weekly meetings)

User Roles & Permissions

Role	Permissions
Admin	Create/edit/delete tools, services, users. View all. Change settings.
Editor	Create/edit content (tools, calendar). Can't delete. Can't manage users.
Viewer	Read-only access. See all content but can't make changes.

Data Flow Diagram

┌─────────────────┐
│  CMS Dashboard  │  (React frontend)
│   (Barcelona)   │
└────────┬────────┘
         │ POST/PUT/GET
         │
┌────────▼────────┐
│   Backend API   │  (Express.js)
│  /api/tools     │
│  /api/services  │
│  /api/calendar  │
└────────┬────────┘
         │ Read/Write
         │
┌────────▼────────┐
│    Database     │  (PostgreSQL)
│  - Tools        │
│  - Services     │
│  - Calendar     │
│  - Users        │
└────────────────┘
         ▲
         │ GET /api/tools/:slug
         │
┌────────┴────────┐
│  Design System  │
│  Templates      │  (Shows live data)
│  (Services,     │
│   Tools, etc)   │
└─────────────────┘
    

Timeline Summary

Week	Phase	Deliverables
1	Database Setup	5 collections, indexes, seed data
2	Backend API	15 endpoints, authentication, testing
3	Dashboard Frontend	6 main views, forms, validation
4	Design System Integration	Live API connections, end-to-end testing
5	Deployment & Launch	Live platform, user accounts, monitoring

Next Steps

Decide on tech stack (database, backend framework, hosting)
Start Phase 1: Database Setup (this week)
Once API is ready, I can build the dashboard UI mockup (jump to Phase 3)
Wire up design system templates to API (Phase 4)
Deploy to production (Phase 5)

Questions?

Ready to proceed? Next, I can create:

Complete CMS Dashboard UI mockup (interactive HTML/React)
Database schema (SQL file for your database setup)
API starter code (Node.js/Express boilerplate)
Integration code for design system templates