Backend Architecture — Personal Brand Platform CMS

Overview

Platform personal brand yang dibangun dari sisi backend: schema design untuk 7 content types (Project, Post, Product, Media, Tag, Theme, SiteSetting), Ecto changeset dengan validasi dan auto-slug, Content context sebagai boundary layer antara database dan presentation, serta Backpex admin resource untuk CRUD. Setiap content type punya published/draft workflow, taxonomy management via enum arrays, dan relasi ke media untuk cover image.

Public query layer di Content context mengelola filtering by platform/discipline, featured sorting, dan slug-based lookup.

Tech & Libraries

Teknologi dan library yang dipakai atau disentuh di project ini:

Problem

Portfolio sebelumnya adalah static HTML/CSS/JS tanpa backend — data portfolio, writing, dan produk tersebar di file terpisah tanpa struktur database. Tidak ada admin interface untuk content management; setiap perubahan konten harus melalui edit kode langsung.

Recruiter tidak bisa melihat role, ownership, dan technical depth karena data tidak terstruktur — tidak ada taxonomy untuk filter by platform atau discipline, tidak ada published/draft workflow, dan tidak ada media management. Dari sisi backend, tidak ada schema yang bisa diquery, tidak ada validasi data, dan tidak ada API layer untuk public consumption.

My Role & Ownership

Solo builder: schema design, Content context, Ecto changeset, Backpex admin resource, public query layer, taxonomy filtering, media attachment.

Technical Approach

Membangun backend portfolio sebagai Phoenix monolith dengan PostgreSQL untuk persistence, Ecto untuk schema/changeset, Content context untuk read/write boundary, dan Backpex untuk admin CRUD. Layer ini mengelola published/draft workflow, slug generation, taxonomy filtering, media attachment, dan site settings.

Pendekatan teknisnya diarahkan ke recruiter-facing output: data project tidak cuma tersimpan, tapi bisa dirender menjadi detail work yang menjelaskan role, ownership, stack, decision, result, dan evidence tanpa edit HTML manual.

Architecture Notes

Backend dibuat dengan boundary yang jelas antara schema, context, admin resource, dan public rendering.

1. Project, Post, Product, Media, Tag, Theme, dan SiteSetting menjadi content type utama dengan Ecto schema dan changeset masing-masing.
2. Content context menjadi query boundary untuk published/draft filter, slug lookup, featured sorting, dan taxonomy filtering.
3. Backpex LiveResource menangani admin CRUD, sementara custom renderer/form helper dipakai untuk field taxonomy, structured textarea, media, dan preview actions.
4. Public LiveView membaca data lewat Content context, bukan query tersebar di template.
5. Media attachment dan theme/site settings dipisah dari project agar presentation state tidak bercampur dengan case study data.

Trade-offs

Beberapa keputusan dibuat pragmatis karena goal utamanya adalah portfolio CMS yang cepat dipakai untuk job search.

1. Enum array dipakai untuk platforms dan disciplines. Ini cepat untuk filter awal, tapi jika taxonomy makin kompleks perlu join table dan admin taxonomy management yang lebih kaya.
2. Session-based admin auth cukup untuk single-owner local/admin usage. Untuk multi-admin production, perlu RBAC, audit log, dan hardening credential.
3. Local media storage dan external URL dipakai dulu. Ini memudahkan development, tapi production perlu object storage dan lifecycle policy.
4. Backpex mempercepat CRUD, tetapi desain admin perlu custom polish agar form panjang tetap nyaman dipakai.

Implementation Highlights

• Designed Ecto schemas and changesets for Project, Post, Product, Media, Tag, Theme, and SiteSetting resources.
• Built Content context as the query boundary for published/draft records, slug lookup, featured sorting, and taxonomy filtering.
• Configured Backpex LiveResource definitions for admin CRUD, custom field renderers, upload handling, and safer form validation.
• Implemented auto-slug generation and duplicate handling for stable public URLs.
• Connected project taxonomy, media attachment, site settings, and public LiveView rendering into one CMS-backed flow.

Results

• 7 CMS-backed content types, 213 automated tests passing, taxonomy filtering by platform/discipline, and Content context as the single source of truth for public portfolio data.
• Admin CMS can manage seven content types from one Phoenix application.
• Public work detail pages can show recruiter-ready role, ownership, technical approach, architecture notes, results, and media.
• Content changes no longer require editing static HTML files or touching the database manually.
• 213 automated tests passing after latest admin and public detail changes.
• 7 CMS-backed content types: Project, Post, Product, Media, Tag, Theme, SiteSetting.
• Primary public read paths: homepage, /work, /work/:slug, /writing, /products, /about, /now, /contact.

Links

• Live Demo
• GitHub Repository