DataCops CMS

A powerful, flexible headless Content Management System built with Next.js 15, TypeScript, and Prisma. DataCops CMS provides a modern, user-friendly interface for content management with dynamic content type creation, API management, and role-based access control.

✨ Features

🏗️ Content Management

Dynamic Content Types: Create and manage custom content types with a visual builder
Rich Content Editor: Built-in TinyMCE editor for rich text content
Media Management: File upload and management system
Content Versioning: Draft, Published, and Scheduled status support
Bulk Operations: Manage multiple content items efficiently

🔐 Authentication & Security

NextAuth.js Integration: Secure authentication system
Role-Based Access Control: SUPERADMIN, ADMIN, and USER roles
API Permissions: Granular control over API endpoint access
Middleware Protection: Route-level security with automatic redirects

🛠️ API Management

RESTful APIs: Auto-generated APIs for all content types
Endpoint Monitoring: View and manage all available API endpoints
Permission Control: Configure HTTP method permissions per content type
API Documentation: Built-in endpoint documentation

🎨 Modern UI/UX

Responsive Design: Mobile-first design with Tailwind CSS
Dark/Light Mode: Built-in theme switching
Component Library: Radix UI components with custom styling
Interactive Dashboard: Real-time data visualization
Sidebar Navigation: Collapsible navigation with search

⚙️ Developer Experience

TypeScript: Full type safety throughout the application
Hot Reload: Development supervisor with automatic restarts
Database Agnostic: Support for SQLite, PostgreSQL, and MySQL
Schema Generation: Automatic Prisma schema updates
ESLint & Prettier: Code quality and formatting tools

🚀 Quick Start

Prerequisites

Node.js 18+
pnpm (recommended) or npm
Database (SQLite for development, PostgreSQL/MySQL for production)

Installation

Clone the repository

git clone <repository-url>
cd datacops-cms

Install dependencies
```
pnpm install
```
Start the development server
```
pnpm dev
```
Open your browser Navigate to http://localhost:3000
Complete the installation
- Follow the installation wizard
- Configure your database connection
- Create your admin account
- Start building!

📦 Technology Stack

Core Technologies

Next.js 15 - React framework with App Router
TypeScript - Type-safe JavaScript
Prisma - Database ORM with type safety
NextAuth.js - Authentication library
TanStack Query - Server state management

UI & Styling

Tailwind CSS - Utility-first CSS framework
Radix UI - Accessible component primitives
Lucide React - Beautiful icon library
Vaul - Drawer component

Development Tools

ESLint - Code linting
Chokidar - File watching
Axios - HTTP client

🏗️ Project Structure

datacops-cms/
├── app/                          # Next.js App Router
│   ├── (dashboard)/             # Dashboard layout group
│   │   ├── admin/               # Admin panel pages
│   │   │   ├── content/         # Content management
│   │   │   ├── content-types/   # Content type builder
│   │   │   ├── endpoints/       # API endpoint management
│   │   │   └── permissions/     # Permission management
│   │   └── page.tsx            # Dashboard home
│   ├── api/                     # API routes
│   │   ├── auth/               # Authentication endpoints
│   │   ├── content/            # Content CRUD operations
│   │   ├── content-types/      # Content type management
│   │   ├── endpoints/          # Endpoint listing
│   │   ├── permissions/        # Permission management
│   │   └── install/            # Installation endpoint
│   ├── install/                # Installation wizard
│   ├── login/                  # Authentication pages
│   ├── layout.tsx              # Root layout
│   └── globals.css             # Global styles
├── components/                  # Reusable components
│   ├── ui/                     # UI component library
│   ├── app-sidebar.tsx         # Main sidebar navigation
│   └── login-form.tsx          # Authentication forms
├── lib/                        # Utility libraries
│   ├── prisma.ts              # Prisma client
│   ├── utils.ts               # General utilities
│   └── axios.ts               # HTTP client setup
├── prisma/                     # Database schema
│   └── schema.prisma          # Prisma schema definition
├── content/                    # Content storage
├── content-types/              # Content type definitions
├── scripts/                    # Build and development scripts
│   ├── dev-supervisor.js      # Development file watcher
│   └── generate-prisma-schema.ts # Schema generation
├── types/                      # TypeScript type definitions
└── hooks/                      # Custom React hooks

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

# Database
DATABASE_URL="file:./dev.db"  # SQLite for development
# DATABASE_URL="postgresql://user:password@localhost:5432/datacops" # PostgreSQL
# DATABASE_URL="mysql://user:password@localhost:3306/datacops" # MySQL

# NextAuth
NEXTAUTH_SECRET="your-secret-key-here"
NEXTAUTH_URL="http://localhost:3000"

# Installation Status
IS_INSTALLED="false"  # Set to "true" after installation

Database Setup

SQLite (Development)

SQLite is configured by default and requires no additional setup.

PostgreSQL (Production)

# Install PostgreSQL client
npm install pg @types/pg

# Update DATABASE_URL in .env.local
DATABASE_URL="postgresql://username:password@localhost:5432/datacops_cms"

MySQL (Production)

# Install MySQL client
npm install mysql2

# Update DATABASE_URL in .env.local
DATABASE_URL="mysql://username:password@localhost:3306/datacops_cms"

🎯 Usage Guide

Content Type Management

Creating Content Types
- Navigate to Admin → Content Type Builder
- Click "Create new type"
- Define fields with various types (text, number, date, relation, etc.)
- Configure field validation and requirements
Managing Content
- Access content through the sidebar navigation
- Create, edit, and delete content items
- Set content status (Draft, Published, Scheduled)
- Use the rich text editor for formatted content

API Usage

All content types automatically generate RESTful APIs:

GET    /api/content/[type]      # List all items
POST   /api/content/[type]      # Create new item
GET    /api/content/[type]/[id] # Get specific item
PUT    /api/content/[type]/[id] # Update item
DELETE /api/content/[type]/[id] # Delete item

Permission Management

Configure API access permissions:

Navigate to Admin → API Permissions
Toggle HTTP methods for each content type
Control which endpoints are publicly accessible

🚀 Deployment

Prerequisites for Production

Environment Setup

# Set production environment variables
NODE_ENV=production
IS_INSTALLED=true
DATABASE_URL=your-production-database-url
NEXTAUTH_SECRET=your-secure-secret
NEXTAUTH_URL=your-production-domain

Database Migration

# Generate and apply migrations
npx prisma migrate deploy
npx prisma generate

Vercel Deployment

Connect your repository to Vercel
Configure environment variables in Vercel dashboard
Deploy - Vercel will automatically build and deploy your application

Self-Hosted Deployment

Build the application
```
pnpm build
```
Start the production server
```
pnpm start
```

🛠️ Development

Available Scripts

# Development with file watching
pnpm dev

# Development with Turbopack
pnpm dev-turbo

# Production build
pnpm build

# Start production server
pnpm start

# Code linting
pnpm lint

Development Workflow

Start development server
```
pnpm dev
```
The development supervisor will:
- Watch for file changes
- Automatically restart the server
- Regenerate Prisma schema when needed
- Handle port conflicts
Code with hot reload - Changes are reflected immediately

Custom Development

Adding New Content Types Programmatically

Content types are stored as JSON files in the content-types/ directory:

{
	"value": "blog-post",
	"label": "Blog Post",
	"fields": [
		{
			"name": "title",
			"label": "Title",
			"type": "text",
			"required": true
		},
		{
			"name": "content",
			"label": "Content",
			"type": "richtext"
		}
	]
}

Extending the API

Add custom API routes in the app/api/ directory following Next.js conventions.

🤝 Contributing

We welcome contributions! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Follow TypeScript best practices
Add tests for new features
Update documentation as needed
Follow the existing code style
Ensure all tests pass before submitting

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

Documentation: Check this README and inline code comments
Issues: Report bugs and request features via GitHub Issues
Discussions: Join community discussions in GitHub Discussions

🙏 Acknowledgments

Next.js Team for the amazing React framework
Prisma Team for the excellent database toolkit
Radix UI Team for accessible component primitives
Vercel for hosting and deployment platform
Open Source Community for the incredible ecosystem

Built with ❤️ for the DataCops project.

datacops-cms