Tech Stack

Portfolio CMS is built with a modern, production-ready tech stack designed for performance, developer experience, and maintainability.

Core Technologies

Next.js (App Router)

The foundation of our frontend, providing:

• Server Components - Render on the server for optimal performance
• App Router - File-based routing with layouts and loading states
• Server Actions - Type-safe server mutations
• Image Optimization - Automatic image optimization and lazy loading
• Metadata API - SEO-friendly page metadata

// Example: Server Component with data fetching
export default async function ProjectsPage() {
  const projects = await getProjects()
  return <ProjectsGrid projects={projects} />
}

Payload CMS

A powerful, TypeScript-first headless CMS:

• Local API - Direct database access in Server Components
• Admin Panel - Beautiful, customizable admin interface
• Access Control - Role-based permissions
• Hooks - Lifecycle events for business logic
• Live Preview - Real-time content preview
• GraphQL & REST - Multiple API options

// Example: Payload Collection
export const Projects: CollectionConfig = {
  slug: 'projects',
  admin: { useAsTitle: 'title' },
  fields: [
    { name: 'title', type: 'text', required: true },
    { name: 'category', type: 'relationship', relationTo: 'categories' },
  ],
}

TailwindCSS

Utility-first CSS framework with:

• Just-In-Time Compiler - Zero runtime, minimal CSS
• Dark Mode - Built-in dark mode support
• Custom Properties - CSS variable theming
• Responsive Design - Mobile-first breakpoints

/* CSS Variables for theming */
:root {
  --primary: oklch(0.39 0.172 264);
  --background: oklch(0.98 0.005 264);
}

shadcn/ui

High-quality, accessible UI components:

• Radix UI Primitives - Accessible component foundation
• Customizable - Copy/paste components you own
• Consistent - Unified design language
• Accessible - WCAG compliant

Database & Storage

PostgreSQL

Primary database for all content:

• ACID Compliant - Data integrity guaranteed
• JSON Support - Store complex data structures
• Full-Text Search - Built-in search capabilities
• Scalable - Handles millions of records

S3-Compatible Storage

Media file storage:

• Cloudflare R2 - Default configuration
• AWS S3 - Easy to switch
• DigitalOcean Spaces - Supported
• MinIO - Self-hosted option

// Storage configuration
s3Storage({
  collections: { media: true },
  bucket: process.env.S3_BUCKET!,
  config: {
    endpoint: `https://${process.env.S3_ACCOUNT_ID}.r2.cloudflarestorage.com`,
    region: 'auto',
  },
})

Development Tools

TypeScript

Full type safety across the stack:

// Auto-generated types from Payload
import type { Project, Skill, Experience } from '@/payload-types'

// Type-safe data fetching
const projects: Project[] = await getProjects()

ESLint & Prettier

Code quality and formatting:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

Dependency Overview

Production Dependencies

Package	Version	Purpose
next	15.4.x	React framework
payload	3.72.x	Headless CMS
react	19.2.x	UI library
tailwindcss	4.1.x	CSS framework
@radix-ui/*	Latest	UI primitives
lucide-react	Latest	Icons
sharp	0.34.x	Image processing
resend	Latest	Email delivery

Development Dependencies

Package	Version	Purpose
typescript	5.7.x	Type checking
eslint	9.x	Linting
prettier	3.x	Formatting
vitest	3.x	Unit testing
playwright	1.56.x	E2E testing
vitepress	2.x	Documentation

System Requirements

Node.js

Node.js ^18.20.2 or >=20.9.0

Package Manager

pnpm ^9 or ^10 (recommended)
npm or yarn also work

Database

PostgreSQL 14+ (recommended)

Next Steps

Now that you understand the tech stack, proceed to Installation to set up your development environment.