Di Balik Web Profile Sendi Studio: Tech Stack Frontend dan Backend yang Saya Gunakan

Kenapa Web Profile Ini Dibangun dengan Pendekatan Headless

Web profile Sendi Studio saya bangun bukan hanya sebagai halaman company profile statis, tetapi sebagai portal yang bisa berkembang untuk kebutuhan portfolio, blog, produk digital, layanan, rate card, legalitas, dan link bio. Karena itu, arsitektur yang saya pilih adalah headless: frontend fokus pada pengalaman pengguna dan SEO, sedangkan backend fokus sebagai API provider dan pusat data.

Pendekatan ini membuat setiap bagian lebih mudah dipelihara. Konten blog, project, client, product, dan profile tidak harus diubah langsung dari source code. Semuanya bisa dikelola dari admin dashboard, lalu frontend mengambil data melalui endpoint API.

Frontend: Next.js, React, Tailwind CSS, dan App Router

Di sisi frontend, stack utama yang saya gunakan adalah Next.js App Router dengan React. Next.js dipilih karena mendukung server component, metadata dinamis, routing berbasis folder, optimasi image, sitemap, robots, dan struktur SEO yang lebih rapi.

React menjadi fondasi UI, sedangkan Tailwind CSS digunakan untuk styling agar desain bisa dikembangkan cepat tanpa kehilangan konsistensi. Untuk komponen dasar seperti dialog, tabs, form, dan elemen interaktif, saya memakai pendekatan component-based dengan shadcn/ui dan Radix UI.

Library penting di frontend

1. Next.js untuk App Router, SSR/SSG, metadata, dan routing.
2. React untuk struktur komponen.
3. Tailwind CSS untuk styling utility-first.
4. next-intl untuk dukungan bahasa Indonesia dan English.
5. TanStack React Query untuk data fetching di sisi client/admin.
6. Axios sebagai API client.
7. GSAP untuk animasi landing page yang tetap terkontrol performanya.
8. Quill dan quill-table-better untuk rich text editor blog di admin.

Backend: API Provider untuk Konten Dinamis

Backend saya posisikan sebagai API provider untuk semua konten dinamis. Di dalamnya ada endpoint untuk profile, experience, services, projects, clients, articles, digital products, dan links. Setiap response dibuat agar frontend bisa langsung membaca data dengan struktur yang jelas.

Untuk konten bilingual, beberapa tabel menggunakan field lang dan translation_key. Dengan pola ini, satu konten bisa punya versi ID dan EN yang berbeda slug-nya, tetapi tetap dianggap sebagai satu pasangan terjemahan yang sama di admin.

Data penting untuk blog

1. title untuk judul artikel.
2. description untuk ringkasan dan SEO description.
3. content untuk isi artikel dari rich text editor.
4. slug untuk URL yang SEO-friendly.
5. lang untuk membedakan konten ID dan EN.
6. translation_key untuk memasangkan artikel bilingual.
7. editorial_note untuk catatan editorial di halaman detail.

Admin CMS: Agar Konten Bisa Dikelola Tanpa Deploy

Salah satu tujuan utama web profile ini adalah memisahkan pekerjaan konten dari proses deploy. Karena itu, saya membuat admin dashboard untuk mengelola data publik. Admin bisa mengubah blog, project, client, layanan, produk digital, profile, dan links tanpa menyentuh source code frontend.

Untuk editor blog, saya menggunakan Quill agar proses menulis lebih nyaman dibanding textarea biasa. Dukungan tabel dari quill-table-better juga penting karena artikel teknis sering membutuhkan perbandingan stack, fitur, atau arsitektur.

SEO dan Performa

Karena web profile ini berfungsi sebagai aset publik, SEO menjadi prioritas. Setiap public page disiapkan dengan metadata, Open Graph, struktur heading, sitemap, robots, dan URL yang terlokalisasi. Di sisi performa, animasi dibuat selektif menggunakan GSAP agar halaman tetap terasa hidup tanpa mengorbankan loading dan scroll performance.

Dengan kombinasi Next.js, API backend, CMS admin, dan rich text editor, web profile ini bisa menjadi fondasi yang fleksibel untuk company profile, personal branding, portfolio, content hub, dan katalog produk digital.