Features Overview

🛠️ Frameworks & Libraries:

• 🚀 Next.js 15.2 (App Router)
• ⚛️ React 19
• 📦 Payload CMS 3.0
• 🎨 Tailwind CSS v4
• 🧩 Shadcn/ui
• 📧 @react-email for responsive emails

🔐 Authentication:

• 🔑 Auth.js or Better Auth with custom adapters for Payload
• Frontend authentication components:
  • Sign-in
  • Sign-up
  • Reset Password
  • Verify Password
  • Profile page
  • Profile/Sign-in header menu item
• Custom styled "Verify Password" and "Reset Password" emails

📝 Form & Validation:

• 🪝 React Hook Form
• ✅ Zod

🖼️ Image Optimization:

• Custom Image Optimize Endpoint (Force Aspect Ratio)

⚙️ Code Quality & Tools:

• 🧹 ESLint 9
• ✨ Prettier
• 📜 Structured Naming Conventions for exports and files.

🚢 Deployment & Infrastructure:

• 🐳 Docker Compose production-ready, up-to-date setup (fully tested)
• 🏠 Self-hosted first (complete data control)

Pre-Configured Payload CMS Features 📦

• ⚙️ Live Preview: Real-time preview with breakpoints for mobile, tablet, desktop
• 📝 Draft Mode: Draft management separate from live content
• 📋 Form Builder: Forms with React Hook Form and Zod validation
• ✉️ Email Integration: Emails via Resend with custom templates
• 🔗 Nested Content: Organized with Nested Docs Plugin
• 🔍 SEO Optimization: Built-in sitemap.ts and robots.txt
• ↪️ Unlimited Redirects: Regex-supported middleware redirects
• 🌐 Reusable Blocks: Global content sharing
• 📝 Lexical Editor:
  • Custom classes per HTML tag (reduces backend complexity)
  • Responsive font sizes per breakpoint
  • Corrected HTML for OL and UL lists

Additional Payload Adjustments 🎛️

• 🖥️ Custom Admin UI: Styled for enhanced management
• 🖥️ Enhanced Field Width Control: Width property without row field

✨ Template Specific Features

• 📏 Unique Grid Component: Easy-to-use responsive grid
• 🧭 Configurable Header Menu: Fixed & contracted on scroll
• 🔗 Automatic Content Hashing: Unique asset hashes for immutable caching
• 🖌️ Enhanced Image Component: Dynamic aspect ratios, width, height via custom Sharp endpoint
• 🌐 View Transitions: Smooth view animations
• 🎥 Transition Component: Element animations (scroll compatible with RSC)
• 📑 Single H1 Enforcement: Improved SEO/accessibility
• 🔍 Simplified Querying: Improved querying between collections
• 🛠️ Lexical HTML Fixes: Corrected OL and UL outputs
• 🌗 Dark Mode Toggle: Theme customization
• ✏️ Editable Header & Footer: CMS editable
• 📐 Custom Section Component: Consistent block spacing
• 🛠️ Custom Fields:
  • Path field (cross-collection unique 🤯)
  • Tailwind Color field
  • Dynamic Icon field (lucide-react)

Project Structure 📁

A structured, developer-friendly folder architecture designed specifically for clarity and scalability:

├── src
│   ├── app                 # Next.js pages, layouts, routing (auth/frontend/payload)
│   ├── config              # Payload CMS config, metadata, and globals
│   ├── blocks              # Payload CMS reusable blocks
│   ├── components          # UI components, forms, layout elements
│   ├── features            # Modular, feature-specific code (authentication, emails)
│   ├── hooks               # Reusable custom React hooks
│   ├── lib                 # Shared utility libraries and external integrations
│   ├── utils               # Helper and utility functions for general use
│   ├── payload             # Payload CMS configurations, collections, utilities
│   └── middleware.ts       # Middleware logic (redirect handling)
│
├── scripts                 # Dev tooling scripts
├── docker-compose.yml      # Container setup
└── Dockerfile              # Containerized app setup

Coding Philosophy 📚

• 🛠️ Transparent and Customizable: Everything is open and adjustable—full control, no hidden layers.
• 🔄 Continuous Improvement: Dependencies stay current for security and performance. Feedback drives progress.
• 🧩 Modular by Design: Tackles complex problems, but you can strip out what you don’t need.
• 🔧 Best Practices First: Favors native Next.js solutions and proven methods over third-party dependencies.
• 🚀 Production-Ready: Built to be optimized, secure, and maintainable for real-world use.