Personal Brand Platform - Phoenix LiveView CMS & Commerce

Overview

Personal Brand Platform adalah aplikasi web full-stack untuk mengelola personal website dari satu sumber data: portfolio project, writing/blog, products, media library, site settings, theme registry, dan commerce workflow. Project ini berkembang dari portfolio sederhana menjadi CMS operasional yang bisa dipakai harian untuk job search, publishing, product catalog, paid content, dan review order.

Untuk recruiter, project ini menunjukkan ownership end-to-end di Phoenix LiveView: mulai dari schema, context API, public route, Backpex admin resource, content workflow, search, monetization, payment integration, local scripts, deployment docs, sampai test coverage. Public site tetap memakai old_web_classic theme yang ringan, sementara admin dibuat lebih produktif dengan Backpex, Tailwind/daisyUI, EasyMDE, media picker, dan form helper yang aman untuk input konten panjang.

Tech & Libraries

Teknologi dan library yang dipakai atau disentuh di project ini:

Problem

Personal website yang hanya statis cepat menjadi bottleneck: setiap update portfolio, tulisan, produk, media, atau CTA harus lewat perubahan kode atau data manual. Untuk job search, ini berisiko membuat project unggulan tidak cepat terlihat, case study tidak konsisten, dan evidence seperti tech stack, role, ownership, metrics, demo, atau certificate tercecer.

Di sisi engineering, kebutuhan juga melebar: content perlu status draft/published/archived, slug stabil, media upload, unified search, markdown editor, paid post/product checkout, order review, Midtrans webhook, SEO meta, dan workflow lokal yang bisa direset tanpa merusak data penting. Tantangannya adalah membangun semua itu tetap sederhana sebagai Phoenix monolith, bukan berubah menjadi sistem e-commerce besar yang susah dirawat sendiri.

My Role & Ownership

Solo builder: scope, schema, contexts, public LiveView, Backpex admin, commerce, search, media, scripts, docs, and tests.

Technical Approach

Saya membangun platform Phoenix LiveView dengan PostgreSQL dan Ecto sebagai source of truth. Content context mengatur query public/admin, visibility, slug lookup, featured/best-three project, search, media lookup, dan dashboard summary.

Backpex LiveResources dipakai untuk mempercepat admin CRUD, lalu dipoles dengan custom field, delete confirmation, taxonomy checkbox, segmented boolean control, Markdown editor, dan relation picker untuk cover/certificate media.

Public LiveView merender homepage, Work, Writing, Products, About, Now, Contact, dan Search dari data yang sama. Commerce MVP ditambahkan tanpa memaksa user account: paid/tips posts dan products membuat order, memakai buyer email, access grant token, Midtrans Snap atau manual checkout fallback, lalu webhook memverifikasi pembayaran dan admin bisa review order dari dashboard.

Architecture Notes

Arsitektur sengaja dibuat sebagai Phoenix monolith dengan context boundary yang jelas, supaya fitur publik, admin, dan commerce tetap berada dalam satu deployment unit tetapi tidak saling bocor.

Keputusan arsitektur kunci:

1. Content context menjadi boundary untuk projects, posts, products, media, settings, themes, search, dan public visibility rules. LiveView tidak perlu query Repo langsung.
2. Commerce context dipisah dari Content agar order, access grant, Midtrans transaction, webhook verification, dan fulfillment status tidak mencemari schema konten.
3. Backpex resources menjadi admin surface, sementara Ecto changeset tetap menjadi kontrak validasi utama untuk slug, status, taxonomy, URL, JSON config, price, dan textarea array.
4. Public LiveView memakai satu module route-driven untuk menjaga old_web_classic rendering tetap ringan, dengan helper untuk pagination, filters, media, markdown, paywall, dan SEO assigns.
5. Local scripts dan SQL fallback dipertahankan agar database development bisa di-reset, di-seed, dan direstore tanpa mengandalkan klik manual di admin.

Trade-offs

Trade-off utama project ini adalah memilih platform personal yang cukup lengkap untuk portfolio dan monetization, tetapi tetap realistis untuk dioperasikan sendiri.

1. Phoenix monolith dipilih daripada frontend/backend terpisah. Ini mengurangi kompleksitas deployment dan state management, dengan konsekuensi semua UI dan business flow harus disiplin menjaga boundary context.
2. Backpex dipakai untuk mempercepat admin CMS. Konsekuensinya beberapa UX perlu custom renderer dan copy khusus, tetapi CRUD, auth boundary, relation fields, dan table behavior tidak perlu dibangun dari nol.
3. Search memakai PostgreSQL ILIKE, bukan full-text search atau external search engine. Ini cukup cepat untuk skala puluhan hingga ratusan konten, dengan upgrade path ke tsvector jika data tumbuh.
4. Commerce MVP memakai email + access token, Midtrans Snap, dan manual checkout fallback daripada customer account penuh. UX lebih ringan, tetapi access link perlu dijaga dengan token panjang dan email delivery otomatis masih menjadi improvement lanjutan.
5. Media storage mendukung upload lokal dan external URL. Ini praktis untuk development/portfolio, tetapi production jangka panjang lebih aman jika dipindah ke object storage.

Implementation Highlights

• Phoenix LiveView public routes untuk home, work, writing, products, about, now, contact, search, dan slug detail pages
• Backpex admin resources untuk projects, posts, products, orders, media, site settings, themes, dan tags
• Controlled taxonomy untuk platform/discipline project dengan checkbox admin UI dan filter counts di /work
• Unified search across projects, posts, dan products memakai PostgreSQL ILIKE dengan LiveView debounce
• Post monetization untuk free, tips-gated, dan paid gated writing dengan buyer email dan access grant token
• Product checkout gate dengan Midtrans Snap atau manual checkout_url fallback, plus order review admin
• Midtrans webhook verification memakai runtime env secret, bukan content/database setting
• Markdown-first writing workflow memakai MDEx renderer dan EasyMDE admin editor
• SEO meta tags, Open Graph, Twitter Card, cover image, certificate PDF, and public writing claps
• Local start/status/stop/reset scripts, VPS deployment templates, health check, and SQL fallback workflow

Results

• Mengubah personal website dari portfolio statis menjadi Phoenix LiveView CMS + commerce-ready platform yang bisa dipakai untuk job search, publishing, product catalog, dan paid content.
• Portfolio, writing, products, media, settings, themes, search, and commerce now run from one Phoenix LiveView app
• Admin CMS supports daily content editing without direct database access
• Recruiter-facing /work page supports taxonomy filtering, counts, load more, manual priority, and detailed case studies
• Paid writing and paid products have an MVP checkout path with orders, access grants, and Midtrans/manual fallback
• Operational docs and scripts cover local start/status/stop/reset, deployment prep, and project data workflows
• 249 tests covering schema, context, commerce, LiveView, and admin routes in the latest project README
• 11 public routes including /search, /health, checkout endpoints, and Midtrans webhook
• 7+ admin resources: projects, posts, products, orders, media, site settings, themes, and tags
• 12 controlled project disciplines and 7 platform values for recruiter-oriented filtering
• 9 items per page load-more pagination on Work, Writing, and Products

Links

• GitHub Repository