Back to Projects

Portfolio CMS

November 10, 2024

Headless CMS untuk portfolio website dengan REST API, role-based access control, media management, dan customizable content types.

Portfolio CMS

A powerful headless CMS designed specifically for portfolio websites, featuring role-based access control and flexible content modeling.

Overview

This project provides a complete backend solution for managing portfolio content with an intuitive admin interface built with React and shadcn/ui components.

Core Features

Content Management

  • Custom Content Types: Define your own content structures
  • Rich Text Editor: Built-in markdown editor with preview
  • Media Library: Centralized media management with image optimization
  • Version Control: Track changes and restore previous versions

API Capabilities

  • RESTful API: Well-documented endpoints for all content types
  • Authentication: JWT-based auth with refresh tokens
  • Rate Limiting: Prevent API abuse
  • CORS Configuration: Flexible origin policies

Admin Dashboard

  • shadcn/ui Components: Beautiful, accessible UI components
  • Dark Mode Support: Built-in theme switching
  • Responsive Design: Works on all devices
  • Real-time Preview: See changes before publishing

Technical Architecture

Backend (NestJS)

// Example content type definition
@Entity()
export class Project {
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Column()
  title: string;

  @Column('text')
  description: string;

  @Column('simple-array')
  tags: string[];

  @CreateDateColumn()
  createdAt: Date;
}

Database Schema

Built with Prisma for type-safe database access:

  • Users with role-based permissions
  • Projects with metadata and content
  • Media files with automatic optimization
  • Activity logs for audit trail

Security Features

  • RBAC: Admin, Editor, Viewer roles
  • Input Validation: Zod schemas for all endpoints
  • XSS Protection: Sanitized inputs and outputs
  • CSRF Tokens: Protected form submissions

API Performance

  • Average response time: < 100ms
  • Database queries optimized with indexes
  • Redis caching for frequently accessed content
  • Image CDN integration for fast media delivery

Use Cases

Perfect for:

  • Personal portfolio websites
  • Agency project showcases
  • Freelancer portfolios
  • Creative professional websites

Tech Stack

NestJS
React
Prisma
shadcn

Tags

#Backend
#CMS