Command Palette

Search for a command to run...

Ken's Blog

Archived

A blog application built using Next.js and Tailwind CSS, with Sanity CMS as the backend ✍️

Source Code
example.com

Overview

Ken's Blog is a modern headless publishing platform and blog application. Built to demonstrate full-stack content orchestration, it integrates Next.js and Tailwind CSS with Sanity CMS as the structured content backend, allowing content authors to edit and publish posts in real time.

Features

  • Headless Content Management: Full editorial control powered by Sanity Studio, featuring real-time collaborative editing and instant publication.
  • Rich Media & Code Snippets: Integrated syntax highlighting and rich media embeds powered by Portable Text and Sanity plugins.
  • Dynamic Previews: Live previewing of draft posts before deployment using Sanity's visual editing loaders.
  • Responsive Design: Mobile-first, accessible layout optimized across all viewport sizes with clean typography.
  • Performant Architecture: Fast page loads with static site generation (SSG) and incremental content revalidation.

Architecture & Tech Stack

  • Frontend: Next.js, React, TypeScript.
  • CMS & Backend: Sanity CMS Studio, @sanity/vision, and Next-Sanity.
  • Content Rendering: @portabletext/react with @sanity/image-url for optimized asset delivery.
  • Styling: Tailwind CSS with responsive typography and code syntax styling.
  • Infrastructure: Vercel Edge Network for hosting and global CDN caching.

Milestones & Impact

2026: Modern Stack Modernization

  • Framework & Core Upgrades: Upgraded to Next.js 16 with React 19 support and Turbopack dev tooling.
  • CMS Modernization: Maintained Sanity Studio and vision tooling on the latest release series.
  • Code Quality: Migrated codebase formatting and linting to Biome for lightning-fast CI checks.

2025: Dependency & CMS Refresh

  • Sanity Ecosystem: Upgraded @sanity/code-input, @sanity/react-loader, and next-sanity to the modern visual editing ecosystem.
  • CSS Architecture: Prepared and upgraded styling foundation to Tailwind CSS v4.

2022: Initial Launch

  • Baseline Deployment: Deployed initial version in December 2022 using Sanity Studio and Next.js.
  • Design System: Configured custom responsive typography with Tailwind CSS and established schema types for blog articles and author profiles.

Local Development

To get started with this project locally, clone the repository:

git clone https://github.com/KenTandrian/ken-blog.git

Install the dependencies:

pnpm install

Configure your Sanity environment variables in .env.local:

NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_API_VERSION=2022-12-24

Run the development server:

pnpm dev