Getting Started

⚠️ WORK IN PROGRESS - DOCUMENTATION ONLY

This documentation represents the vision and design for DeesseJS. Nothing is implemented yet - no code is functional, APIs are subject to change, and features may be modified during development.

We're iterating on the documentation first to define the Developer Experience (DX) before building the implementation. This allows us to validate the API design and user flows before writing any production code.

Consider this as a design specification rather than functional documentation. Everything is subject to change as we refine the framework.

Welcome to DeesseJS! This guide will help you get started with building modern CMS applications using DeesseJS and Next.js.

What's Included

When you create a new DeesseJS application, everything is set up and ready to use:

• ✅ shadcn/ui Components - Beautiful UI components pre-installed
• ✅ Authentication System - Login/signup pages working out of the box
• ✅ Admin Dashboard - Fully functional admin interface
• ✅ Protected Routes - Auth-protected pages configured
• ✅ State Management - TanStack Query, Zustand, and nuqs included
• ✅ Styling - Tailwind CSS with custom theme
• ✅ TypeScript - Full type safety

No manual configuration needed - everything just works!

Quick Start

Create a New Project

npx create-deessejs-app my-app
cd my-app

During setup, you'll be prompted to:

1. Enter your database connection string
2. Create your first admin user (email and password)

That's it! Your application is ready.

Start Development

npm run dev

Access Your Application

• Home Page: http://localhost:3000 (protected by auth)
• Login: http://localhost:3000/login
• Sign Up: http://localhost:3000/signup
• Admin Dashboard: http://localhost:3000/admin

What You Get Out of the Box

Pre-Built Pages

Your new application includes these pages:

Authentication Pages:

• /login - Login form with email/password
• /signup - Registration form
• /forgot-password - Password reset

Protected Pages:

• / - Home page (requires login)
• /dashboard - User dashboard
• /admin/[...slug] - Admin dashboard

UI Components

shadcn/ui components are pre-installed and ready to use:

import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Table } from '@/components/ui/table'

// All components are already available!

Available components:

• Accordion, Alert, Avatar, Badge
• Button, Calendar, Card, Checkbox
• Dialog, Dropdown Menu, Form
• Input, Label, Select, Table
• Tabs, Toast, Tooltip, and more...

Authentication Ready

Auth is configured and working:

// Server components are protected by default
import { getServerSession } from '@deessejs/auth'

export default async function HomePage() {
  const session = await getServerSession()

  if (!session) {
    redirect('/login')
  }

  return (
    <div>
      <h1>Welcome, {session.user.name}!</h1>
    </div>
  )
}

Admin Dashboard

The admin dashboard is fully functional:

• Content Management: Manage collections, media, users
• Marketplace: Browse and install plugins
• Settings: Configure all aspects of your app
• Logs: View system logs and errors

Access it at /admin with your admin credentials.

State Management

Three powerful state management solutions included:

// TanStack Query - Server state
import { useQuery } from '@deessejs/query'
const { data } = useQuery({ queryKey: ['posts'], queryFn: fetchPosts })

// Zustand - Client state
import { useAuthStore } from '@/store/auth'
const user = useAuthStore((state) => state.user)

// nuqs - URL state
import { useQueryState } from 'nuqs'
const [search, setSearch] = useQueryState('search')

Project Structure

my-app/
├── app/
│   ├── (auth)/              # Auth routes
│   │   ├── login/
│   │   └── signup/
│   ├── admin/               # Admin dashboard
│   │   └── [...slug]/
│   ├── dashboard/           # User dashboard
│   ├── api/                 # API routes
│   ├── layout.tsx           # Root layout
│   └── page.tsx             # Home page
├── components/
│   ├── ui/                  # shadcn/ui components
│   └── /*                  # Other components
├── lib/
│   ├── db.ts                # Database client
│   ├── auth.ts              # Auth configuration
│   └── utils.ts             # Utilities
├── store/
│   ├── auth.ts              # Zustand stores
│   └── /*                  # Other stores
└── deesse.config.ts         # DeesseJS configuration

CLI Features

The CLI provides many commands to enhance your project:

Generate Collections

# Create a new collection
npx deessejs g collection products

# With fields
npx deessejs g collection posts \
  --fields title:string,content:richtext,published:boolean

Generate Pages

# Generate a new page
npx deessejs g page about

# Generate admin page
npx deessejs g admin analytics

Generate Components

# Generate a component with shadcn/ui
npx deessejs g component ProductCard

# Generate form component
npx deessejs g form ContactForm

Database Commands

# Push schema to database
npx deessejs db:push

# Open Prisma Studio
npx deessejs db:studio

# Reset database
npx deessejs db:reset

Plugin Management

# Add a plugin
npx deessejs plugin add @deessejs/plugin-seo

# List plugins
npx deessejs plugin:list

# Remove plugin
npx deessejs plugin remove @deessejs/plugin-seo

Next Steps

• Learn What is DeesseJS? to understand the framework
• See how DeesseJS compares to other CMS solutions
• Explore the Admin Dashboard
• Check out the CLI commands for more options

Prerequisites

Before you begin, make sure you have:

• Node.js 18+ installed
• Basic knowledge of Next.js and React
• Familiarity with TypeScript
• A database (PostgreSQL, MySQL, MongoDB, or SQLite for dev)

Need Help?

• Check our FAQ
• Visit our GitHub repository
• Join our Discord community