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.

• 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

• 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

• 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

• 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

• 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

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

1. Clone the repository

   git clone <repository-url>
   cd datacops-cms

2. Install dependencies

   pnpm install

3. Start the development server

   pnpm dev

4. Open your browser Navigate to http://localhost:3000

5. Complete the installation

   • Follow the installation wizard
   • Configure your database connection
   • Create your admin account
   • Start building!

• 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

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

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

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

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

SQLite is configured by default and requires no additional setup.

# Install PostgreSQL client
npm install pg @types/pg
# Update DATABASE_URL in .env.local
DATABASE_URL="postgresql://username:password@localhost:5432/datacops_cms"

# Install MySQL client
npm install mysql2
# Update DATABASE_URL in .env.local
DATABASE_URL="mysql://username:password@localhost:3306/datacops_cms"

1. 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

2. 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

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

Configure API access permissions:

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

1. 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

2. Database Migration

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

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

1. Build the application

   pnpm build

2. Start the production server

   pnpm start

# 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

1. Start development server

   pnpm dev

2. The development supervisor will:

   • Watch for file changes
   • Automatically restart the server
   • Regenerate Prisma schema when needed
   • Handle port conflicts

3. Code with hot reload - Changes are reflected immediately

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"
		}
	]
}

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

We welcome contributions! Please follow these steps:

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

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

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

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

• 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.