About This Project

PayloadCMS Lab is a sample website project that demonstrates how to build a modern content-managed website using PayloadCMS, Next.js, and Tailwind CSS.

PayloadCMS 3

PayloadCMS is a headless CMS and application framework built with Node.js and TypeScript. It provides a powerful admin panel, authentication, access control, file uploads, and a flexible data model. In this project, it manages blog posts, pages, categories, media, and user authentication.

  • ✓Collections for Posts, Pages, Categories, Media, and Users
  • ✓Lexical rich text editor for content creation
  • ✓MongoDB database with Mongoose adapter
  • ✓File uploads with automatic image resizing via Sharp
  • ✓Role-based access control

Next.js 16

Next.js is a React framework for building full-stack web applications. This project uses the App Router with Server Components for optimal performance. Content is fetched directly from PayloadCMS using its local API - no REST calls needed when rendering on the server.

  • ✓App Router with route groups for frontend and admin
  • ✓React Server Components for data fetching
  • ✓Dynamic routes for blog posts
  • ✓TypeScript for type safety
  • ✓Automatic metadata generation for SEO

Tailwind CSS 4

Tailwind CSS is a utility-first CSS framework. Version 4 introduces CSS-based configuration, removing the need for a JavaScript config file. The design uses a clean, modern aesthetic with a consistent color palette and responsive layouts.

  • ✓CSS-based configuration with @theme directive
  • ✓Custom color palette with primary, accent, and surface tokens
  • ✓Responsive grid layouts for post cards
  • ✓Dark mode support via CSS custom properties
  • ✓Typography plugin for rich text content

Project Structure

src/
  app/
    (frontend)/          # Public-facing pages
      page.tsx           # Home page
      blog/
        page.tsx         # Blog listing
        [slug]/page.tsx  # Individual post
      about/page.tsx     # About page
    (payload)/           # PayloadCMS admin
      admin/             # Admin panel routes
      api/               # REST API routes
  collections/           # PayloadCMS collection configs
    Posts.ts
    Pages.ts
    Categories.ts
    Media.ts
    Users.ts
  components/            # Shared React components
    Header.tsx
    Footer.tsx
    PostCard.tsx
    RichText.tsx
  utilities/
    getPayloadClient.ts  # Payload client helper
  payload.config.ts      # PayloadCMS configuration
  seed.ts                # Sample data seeder
Open Admin Panel