create-group-cms

v1.1.3

Published

a day ago

Scaffold a full-stack multi-site CMS — Next.js 15, Express, PostgreSQL or MySQL, Prisma, Tailwind CSS

0High
0Medium
0Low

cms create scaffold boilerplate nextjs next express postgresql mysql prisma tailwind multi-site page-builder full-stack typescript

create-group-cms

Scaffold a production-ready multi-tenant CMS in under 60 seconds

Next.js 15 · Express · PostgreSQL / MySQL · Prisma ORM · Tailwind CSS · TipTap · JWT

What You Get

A full-stack monorepo with two apps wired together out of the box:

my-project/
├── apps/
│   ├── web/          → Next.js 15 frontend (dashboard + public site renderer)
│   └── api/          → Express + TypeScript REST API
├── packages/
│   └── shared/       → Shared TypeScript types
└── .env              → Auto-generated by the CLI

| | | | ---------------- | ------------------------------------------------------------------------------- | | Dashboard | /dashboard — manage groups, companies, sites, pages, media, navigation, users | | Page Builder | Drag-and-drop visual editor with 23+ content blocks | | Public Sites | Each site renders at its own domain or under /preview/[siteId]/ | | API | REST API at localhost:4000 — handles auth, uploads, all CRUD |

Quick Start

Requirements: Node.js 20+, Git, a running PostgreSQL (v14+) or MySQL (v8+) database.

npm i create-group-cms
npx create-group-cms my-project
cd my-project
npm run dev

That's it. Open http://localhost:3000/dashboard.

The default super-admin credentials are printed in your terminal after the seed step.

Installation — Step by Step

1 · Run the scaffold

npx create-group-cms my-project

The CLI will walk you through:

● Pick your database   PostgreSQL  or  MySQL
● Enter DB host        e.g. localhost
● Enter DB port        5432 / 3306
● Enter DB name        e.g. group_cms
● Enter DB user        e.g. postgres
● Enter DB password    ••••••••

2 · What the CLI does automatically

| Step | What happens | | ------------------- | -------------------------------------------------------------- | | Connection test | Verifies your DB credentials before writing anything | | .env file | Written to apps/api/.env with all variables filled in | | npm install | Installs all workspace dependencies | | Prisma migrate | Runs prisma migrate deploy to create all tables | | Seed | Creates default languages, a super-admin user, and sample data |

3 · Start developing

npm run dev

| Service | URL | | ------------ | -------------------------------------- | | Dashboard | http://localhost:3000/dashboard | | API | http://localhost:4000/api | | Site preview | http://localhost:3000/preview/[siteId] |

CLI Commands

# Create a brand-new project
npx create-group-cms [project-name]

# Reconfigure .env in an existing install (change DB, reset secrets)
npx create-group-cms setup

# Run Prisma migrations only (e.g. after pulling new schema changes)
npx create-group-cms migrate

# Show all available commands
npx create-group-cms --help

# Show version
npx create-group-cms --version

Features

🏢 Multi-Tenant Architecture

Groups → top-level organisations
Companies → belong to a group, each with their own sites
Sites → independent websites with custom domains

🎨 Visual Page Builder

23+ drag-and-drop content blocks
Per-block Style, Layout, and Advanced tabs
Live preview as you edit
Rich text editing powered by TipTap (bold, italic, headings, lists, links, colour)
Section backgrounds: solid colour, gradient, image
Entrance animations (fade, slide, zoom)
Custom CSS per block

🧱 Available Blocks

| Block | -------------- | hero | heading | text | image | gallery | slider | video | cta | features | testimonials | team | pricing | faq | tabs | stats | logo-bar | columns | contact | map | countdown | divider | spacer | html | Description | | ------------------------------------------------------------ | | Full-width banner with background image, overlay, CTA | | H1–H4 with alignment and style controls | | Rich text paragraph | | Single image with caption | | Responsive image grid | | Auto-play image carousel | | Embeds YouTube, Vimeo, Dailymotion, Wistia, or direct .mp4 | | Call-to-action card with button | | Icon + title + description grid (32 icons built-in) | | Quote cards with avatar upload | | Team member cards with photo upload | | Pricing plan cards with feature lists | | Accordion FAQ with rich text answers | | Tabbed content panels with rich text | | Animated counter statistics | | Partner / client logo strip | | 1–4 column layout with rich text per column | | Contact form | | Google Maps embed | | Live countdown timer | | Horizontal rule | | Vertical whitespace | | Raw HTML / embed codes |

👥 Role-Based Access Control

| Role | What they can do | | ----------------- | --------------------------------------------------------------- | | Super Admin | Full access to everything — all groups, companies, sites, users | | Group Admin | Manage their group's companies and all sites within | | Company Admin | Manage their company's sites, pages, media, and navigation | | Editor | Edit pages and media within assigned companies |

User Management

User management is available to Super Admins only under Dashboard → Users.

Default Credentials

After running the seed, one super-admin account is created automatically:

| Field | Value | | -------- | -------------------- | | Email | [email protected] | | Password | admin123 | | Role | SUPER_ADMIN |

Change the password immediately after your first login.

Managing Users from the Dashboard

Navigate to Dashboard → Users (visible only to Super Admins).

| Action | How | | ------------------- | -------------------------------------------------------------------- | | Add user | Click Add User, fill in name, email, password, and role | | Edit user | Click the pencil icon on any row to update name, email, or role | | Change password | Click the key icon to set a new password for any user | | Delete user | Click the trash icon — you cannot delete your own account |

Roles

| Role | What they can do | | ----------------- | ------------------------------------------------------------------- | | Super Admin | Full access — manage all groups, companies, sites, users, and roles | | Group Admin | Manage all companies and sites within their assigned group(s) | | Company Admin | Manage sites, pages, media, and navigation within their company | | Editor | Edit pages and upload media within their assigned company |

Role Permissions

| Permission | Super Admin | Group Admin | Company Admin | Editor | | ------------------------------ | :---------: | :---------: | :-----------: | :----: | | Manage users & roles | ✓ | | | | | Manage all groups | ✓ | | | | | Manage all companies | ✓ | | | | | Manage group's companies | ✓ | ✓ | | | | Manage group's sites & pages | ✓ | ✓ | | | | Manage company's sites | ✓ | ✓ | ✓ | | | Manage pages, media, nav | ✓ | ✓ | ✓ | | | Edit pages & upload media | ✓ | ✓ | ✓ | ✓ | | View dashboard | ✓ | ✓ | ✓ | ✓ |

User API Endpoints

All endpoints require a valid SUPER_ADMIN JWT.

# List all users
GET /api/users

# Create a user
POST /api/users
{ "name": "Jane Smith", "email": "[email protected]", "password": "secret123", "role": "EDITOR" }

# Update name / email / role
PUT /api/users/:id
{ "name": "Jane Doe", "role": "COMPANY_ADMIN" }

# Change a user's password
PUT /api/users/:id/password
{ "password": "new-secure-password" }

# Delete a user
DELETE /api/users/:id

🌍 Multi-Language Support

Create any number of languages from the dashboard
Set a default language
Per-block translatable fields (title, subtitle, content, description, etc.)

🖼️ Media Manager

Upload images from the dashboard or directly inside the page builder
Scoped per company — companies cannot see each other's media
Inline media picker in block editors (testimonials, team, gallery, slider, logo-bar, hero)

🔐 Authentication

JWT access tokens with configurable expiry
Secure password hashing (bcrypt)
Role-checked middleware on all API routes

Tech Stack

| Layer | Technology | | ---------------- | ---------------------------------------------------- | | Frontend | Next.js 15 (App Router, 'use client' where needed) | | Backend | Express 4 + TypeScript | | Database | PostgreSQL 14+ or MySQL 8+ | | ORM | Prisma 6 | | Auth | JSON Web Tokens (JWT) | | UI | Tailwind CSS 4 | | Rich Text | TipTap 3 | | Monorepo | npm workspaces | | File uploads | Multer |

Environment Variables

The CLI writes these for you. Reference for manual setup:

# Database
DATABASE_URL="postgresql://user:pass@localhost:5432/group_cms"
DB_TYPE=postgresql        # or mysql
DB_HOST=localhost
DB_PORT=5432
DB_NAME=group_cms
DB_USER=postgres
DB_PASSWORD=your_password

# Auth
JWT_SECRET=<auto-generated 64-char hex>
JWT_EXPIRES_IN=7d

# API server
API_PORT=4000
CORS_ORIGIN=http://localhost:3000

# Frontend
NEXT_PUBLIC_API_URL=http://localhost:4000/api
NEXT_PUBLIC_APP_DOMAIN=localhost

# Uploads
UPLOAD_DIR=./uploads
MAX_FILE_SIZE=10485760    # 10 MB in bytes

Project Structure (Detail)

apps/
├── api/
│   ├── src/
│   │   ├── middleware/     auth.ts, upload.ts
│   │   ├── routes/         auth, users, groups, companies, sites,
│   │   │                   pages, media, navigation, languages,
│   │   │                   activity, public
│   │   ├── lib/            prisma.ts, helpers.ts
│   │   └── index.ts        Express app entry
│   └── prisma/
│       ├── schema.prisma
│       ├── migrations/
│       └── seed.ts
│
└── web/
    ├── src/
    │   ├── app/
    │   │   ├── (dashboard)/dashboard/   CMS dashboard pages
    │   │   └── preview/[siteId]/        Public site renderer
    │   └── components/
    │       └── builder/
    │           ├── page-builder.tsx     Full drag-and-drop editor
    │           ├── block-renderer.tsx   Renders blocks for preview/public
    │           ├── block-properties.tsx Per-block property panels
    │           ├── media-picker.tsx     In-editor image picker
    │           └── footer-text-editor.tsx  TipTap rich text component
    └── public/
        └── uploads/                    Served static uploads

Development Workflow

# Start everything (web + api in parallel)
npm run dev

# Build for production
npm run build

# Run only the API
npm run dev --workspace=apps/api

# Run only the web app
npm run dev --workspace=apps/web

# Add a new Prisma migration after schema changes
cd apps/api && npx prisma migrate dev --name describe_change

# Open Prisma Studio (database GUI)
cd apps/api && npx prisma studio

Troubleshooting

Database connection refused

Make sure your database server is running and the host/port/credentials in .env are correct. Re-run npx create-group-cms setup to reconfigure.

Port already in use

Change API_PORT in .env (default 4000) or NEXT_PUBLIC_API_URL to match.

Prisma migration errors

Run npx create-group-cms migrate from the project root to re-apply migrations.

Seed not running

cd apps/api && npx ts-node prisma/seed.ts

Author

Isahaq · [email protected] · github.com/isahaq1

License

MIT — free to use, modify, and distribute.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

create-group-cms

What You Get

Quick Start

Installation — Step by Step

1 · Run the scaffold

2 · What the CLI does automatically

3 · Start developing

CLI Commands

Features

🏢 Multi-Tenant Architecture

🎨 Visual Page Builder

🧱 Available Blocks

👥 Role-Based Access Control

User Management

Default Credentials

Managing Users from the Dashboard

Roles

Role Permissions

User API Endpoints

🌍 Multi-Language Support

🖼️ Media Manager

🔐 Authentication

Tech Stack

Environment Variables

Project Structure (Detail)

Development Workflow

Troubleshooting

Author

License