A powerful, flexible, and production-ready Payload CMS V3 website builder with PostgreSQL database.
One-click deploy on Railway!
This boilerplate is a pre-configured, ready-to-deploy solution for Payload CMS as a website builder. It includes a fully-working backend, enterprise-grade admin panel, and a beautifully designed, production-ready website. This template is optimized for seamless deployment on Railway, and uses PostgreSQL for both local development and production environments.
- Modern Tech Stack:
- Next.js 15 with App Router
- React 19 with Server Components
- TypeScript for type safety
- Tailwind CSS for styling
- PostgreSQL for database
- Complete Authentication System:
- User registration and login
- Role-based access control
- JWT token authentication
- Password reset functionality
- Email verification
- Access Control:
- Granular permissions system
- Role-based access for admins and users
- Protected routes and API endpoints
- Advanced Layout Builder:
- Drag-and-drop interface
- Customizable blocks
- Responsive layouts
- Real-time preview
- Rich Text Editor:
- Powered by Lexical
- Custom formatting options
- Media embedding
- Code block support
- Media Management:
- Image optimization with Sharp
- Cloud storage integration
- Responsive image handling
- Media library organization
- Commenting System:
- Nested comments
- Admin moderation
- Spam protection
- Email notifications
- SEO Optimization:
- Meta tags management
- Sitemap generation
- Robots.txt configuration
- Open Graph support
- Social Features:
- Social sharing
- Social media integration
- User profiles
- Activity tracking
- TypeScript Integration:
- Full type safety
- Auto-generated types
- Type checking in development
- API Development:
- RESTful endpoints
- GraphQL support
- Custom API routes
- Webhook integration
- Development Tools:
- Hot reloading
- Error boundaries
- Development logging
- Debug utilities
- Optimization Features:
- Server-side rendering
- Static site generation
- Image optimization
- Code splitting
- Route prefetching
- Caching Strategy:
- Redis integration
- Browser caching
- API response caching
- Static asset caching
├── public/ # Static files and assets
│ ├── images/ # Image assets
│ ├── fonts/ # Font files
│ └── favicon.ico # Site favicon
│
├── src/ # Source code
│ ├── access/ # Access control functions
│ │ ├── roles.ts # Role definitions
│ │ └── permissions.ts # Permission handlers
│ │
│ ├── app/ # Next.js app directory
│ │ ├── (frontend)/ # Frontend routes
│ │ ├── (admin)/ # Admin panel routes
│ │ └── api/ # API routes
│ │
│ ├── blocks/ # Content blocks
│ │ ├── Hero/ # Hero section blocks
│ │ ├── Features/ # Feature blocks
│ │ └── Content/ # Content blocks
│ │
│ ├── collections/ # Payload collections
│ │ ├── Users/ # User collection
│ │ ├── Media/ # Media collection
│ │ └── Pages/ # Page collection
│ │
│ ├── components/ # React components
│ │ ├── ui/ # UI components
│ │ ├── forms/ # Form components
│ │ └── layout/ # Layout components
│ │
│ ├── endpoints/ # API endpoints
│ │ ├── auth/ # Authentication endpoints
│ │ └── api/ # Custom API endpoints
│ │
│ ├── fields/ # Custom field types
│ │ ├── RichText/ # Rich text fields
│ │ └── Media/ # Media fields
│ │
│ ├── Footer/ # Footer components
│ ├── Header/ # Header components
│ ├── heros/ # Hero section components
│ ├── hooks/ # Custom React hooks
│ ├── migrations/ # Database migrations
│ ├── plugins/ # Payload plugins
│ ├── providers/ # React context providers
│ ├── search/ # Search functionality
│ ├── utilities/ # Utility functions
│ ├── payload.config.ts # Payload configuration
│ └── environment.d.ts # TypeScript environment declarations
│
├── .env.example # Environment variables example
├── .gitignore # Git ignore file
├── docker-compose.yml # Docker configuration
├── next.config.js # Next.js configuration
├── package.json # Project dependencies
├── tailwind.config.mjs # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
- Node.js: ^18.20.2 or >=20.9.0
- PostgreSQL database
- Yarn package manager
- Git
-
Clone the Repository:
git clone <repository-url> cd payload-3-boilerplate
-
Environment Setup:
# Copy environment variables cp .env.example .env # Update the following variables in .env: - DATABASE_URI=postgres://username:password@localhost:5432/database_name - PAYLOAD_SECRET=your-secret-key - NEXT_PUBLIC_SERVER_URL=http://localhost:3000
-
Install Dependencies:
yarn install
-
Database Setup:
# Start PostgreSQL (if using Docker) docker-compose up -d # Or use your local PostgreSQL instance
-
Run Development Server:
yarn dev
-
Access the Application:
- Website: http://localhost:3000
- Admin Panel: http://localhost:3000/admin
-
One-Click Deploy:
- Click the "Deploy on Railway" button above
- Connect your GitHub repository
- Configure environment variables
- Deploy
-
Manual Railway Setup:
# Install Railway CLI npm i -g @railway/cli # Login to Railway railway login # Link your project railway link # Deploy railway up
-
Build the Project:
yarn build
-
Start Production Server:
yarn start
-
Environment Variables:
- Set up all required environment variables in your hosting platform
- Ensure database connection is properly configured
- Set appropriate security keys and secrets
-
Generate Types:
yarn generate:types
-
Linting:
# Check for issues yarn lint # Fix issues automatically yarn lint:fix
-
Database Migrations:
# Create migration yarn migration:create # Run migrations yarn migration:up
-
Testing:
# Run tests yarn test # Run tests in watch mode yarn test:watch
- Official Documentation: Complete guide and instructions
- Payload CMS Docs: Official Payload documentation
- Next.js Documentation: Next.js features and API
- TypeScript Documentation: TypeScript reference
- Tailwind CSS Docs: Tailwind CSS documentation
- PostgreSQL Docs: PostgreSQL documentation
This project is licensed under the MIT License - see the LICENSE file for details.
