Build a Blog

apps/api/internal/models/post.go        # GORM model
apps/api/internal/handlers/post.go      # CRUD handler
apps/api/internal/services/post.go      # Business logic
packages/shared/schemas/post.ts         # Zod validation
packages/shared/types/post.ts           # TypeScript types
apps/web/hooks/use-posts.ts             # React Query hooks (web)
apps/admin/hooks/use-posts.ts           # React Query hooks (admin)
apps/admin/app/resources/posts/page.tsx # Admin page
apps/admin/resources/posts.ts           # Resource definition

package models

import (
    "time"
    "gorm.io/gorm"
)

type Post struct {
    ID         uint           `gorm:"primarykey" json:"id"`
    Title      string         `gorm:"size:255;not null" json:"title" binding:"required"`
    Slug       string         `gorm:"size:255;uniqueIndex;not null" json:"slug" binding:"required"`
    Content    string         `gorm:"type:text" json:"content"`
    Excerpt    string         `gorm:"type:text" json:"excerpt"`
    Published  bool           `gorm:"default:false" json:"published"`
    Views      int            `gorm:"default:0" json:"views"`
    CategoryID uint           `gorm:"index;not null" json:"category_id" binding:"required"`
    Category   Category       `gorm:"foreignKey:CategoryID" json:"category,omitempty"`
    CreatedAt  time.Time      `json:"created_at"`
    UpdatedAt  time.Time      `json:"updated_at"`
    DeletedAt  gorm.DeletedAt `gorm:"index" json:"deleted_at,omitempty"`
}

package models

import (
    "time"
    "gorm.io/gorm"
)

type Category struct {
    ID          uint           `gorm:"primarykey" json:"id"`
    Name        string         `gorm:"size:255;uniqueIndex;not null" json:"name" binding:"required"`
    Slug        string         `gorm:"size:255;uniqueIndex;not null" json:"slug" binding:"required"`
    Description string         `gorm:"type:text" json:"description"`
    Posts       []Post         `gorm:"foreignKey:CategoryID" json:"posts,omitempty"`
    CreatedAt   time.Time      `json:"created_at"`
    UpdatedAt   time.Time      `json:"updated_at"`
    DeletedAt   gorm.DeletedAt `gorm:"index" json:"deleted_at,omitempty"`
}

func (s *PostService) GetAll(page, pageSize int, sort, order, search string) ([]models.Post, int64, error) {
    var posts []models.Post
    var total int64

    query := s.db.Model(&models.Post{})

    // Search across title and excerpt
    if search != "" {
        query = query.Where("title ILIKE ? OR excerpt ILIKE ?",
            "%"+search+"%", "%"+search+"%")
    }

    // Count total before pagination
    query.Count(&total)

    // Sorting
    if sort != "" {
        direction := "ASC"
        if order == "desc" {
            direction = "DESC"
        }
        query = query.Order(sort + " " + direction)
    } else {
        query = query.Order("created_at DESC")
    }

    // Preload the Category relationship
    query = query.Preload("Category")

    // Pagination
    offset := (page - 1) * pageSize
    result := query.Offset(offset).Limit(pageSize).Find(&posts)

    return posts, total, result.Error
}

func (s *PostService) GetByID(id uint) (*models.Post, error) {
    var post models.Post
    // Preload Category when fetching a single post
    result := s.db.Preload("Category").First(&post, id)
    if result.Error != nil {
        return nil, result.Error
    }
    return &post, nil
}

// GetPublished returns only published posts for the public frontend.
func (h *PostHandler) GetPublished(c *gin.Context) {
    page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
    pageSize, _ := strconv.Atoi(c.DefaultQuery("page_size", "10"))

    var posts []models.Post
    var total int64

    query := h.db.Model(&models.Post{}).Where("published = ?", true)
    query.Count(&total)

    query.Preload("Category").
        Order("created_at DESC").
        Offset((page - 1) * pageSize).
        Limit(pageSize).
        Find(&posts)

    pages := int(total) / pageSize
    if int(total)%pageSize != 0 {
        pages++
    }

    c.JSON(http.StatusOK, gin.H{
        "data": posts,
        "meta": gin.H{
            "total":     total,
            "page":      page,
            "page_size": pageSize,
            "pages":     pages,
        },
    })
}

import { useQuery } from '@tanstack/react-query'
import { apiClient } from '@/lib/api-client'
import type { Post } from '@shared/types/post'
import type { PaginatedResponse } from '@shared/types/api'

interface UsePublishedPostsOptions {
  page?: number
  pageSize?: number
}

export function usePublishedPosts({ page = 1, pageSize = 10 }: UsePublishedPostsOptions = {}) {
  return useQuery<PaginatedResponse<Post>>({
    queryKey: ['posts', 'published', page, pageSize],
    queryFn: async () => {
      const { data } = await apiClient.get('/api/posts/published', {
        params: { page, page_size: pageSize },
      })
      return data
    },
  })
}

'use client'

import { useState } from 'react'
import Link from 'next/link'
import { usePublishedPosts } from '@/hooks/use-published-posts'

export default function BlogPage() {
  const [page, setPage] = useState(1)
  const { data, isLoading } = usePublishedPosts({ page, pageSize: 12 })

  if (isLoading) {
    return (
      <div className="space-y-6">
        <h1 className="text-3xl font-bold tracking-tight">Blog</h1>
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="rounded-xl border border-border/40 bg-card/50 p-6 animate-pulse">
              <div className="h-4 w-20 rounded bg-accent/30 mb-3" />
              <div className="h-6 w-3/4 rounded bg-accent/30 mb-2" />
              <div className="h-4 w-full rounded bg-accent/30" />
            </div>
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <h1 className="text-3xl font-bold tracking-tight">Blog</h1>

      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {data?.data.map((post) => (
          <Link
            key={post.id}
            href={`/blog/${post.slug}`}
            className="group rounded-xl border border-border/40 bg-card/50 p-6
                       hover:border-primary/30 hover:bg-card/80 transition-all"
          >
            {post.category && (
              <span className="text-xs font-mono text-primary/70 mb-2 block">
                {post.category.name}
              </span>
            )}
            <h2 className="text-lg font-semibold mb-2 group-hover:text-primary transition-colors">
              {post.title}
            </h2>
            {post.excerpt && (
              <p className="text-sm text-muted-foreground/70 line-clamp-2">
                {post.excerpt}
              </p>
            )}
            <p className="text-xs text-muted-foreground/50 mt-3">
              {new Date(post.created_at).toLocaleDateString('en-US', {
                year: 'numeric', month: 'long', day: 'numeric',
              })}
            </p>
          </Link>
        ))}
      </div>

      {/* Pagination */}
      {data?.meta && data.meta.pages > 1 && (
        <div className="flex items-center justify-center gap-2 pt-4">
          <button
            onClick={() => setPage((p) => Math.max(1, p - 1))}
            disabled={page === 1}
            className="px-3 py-1.5 text-sm rounded-md border border-border/40
                       hover:bg-accent/50 disabled:opacity-40 disabled:cursor-not-allowed"
          >
            Previous
          </button>
          <span className="text-sm text-muted-foreground">
            Page {page} of {data.meta.pages}
          </span>
          <button
            onClick={() => setPage((p) => Math.min(data.meta.pages, p + 1))}
            disabled={page === data.meta.pages}
            className="px-3 py-1.5 text-sm rounded-md border border-border/40
                       hover:bg-accent/50 disabled:opacity-40 disabled:cursor-not-allowed"
          >
            Next
          </button>
        </div>
      )}
    </div>
  )
}