Behind the Sendi Studio Web Profile: The Frontend and Backend Tech Stack I Use

Why This Web Profile Uses a Headless Architecture

I built the Sendi Studio web profile not only as a static company profile, but as a portal that can grow into a portfolio showcase, blog, digital product catalog, services page, rate card, legal pages, and social bio link hub. That is why I chose a headless architecture: the frontend focuses on user experience and SEO, while the backend works as the API provider and content source.

This approach makes each layer easier to maintain. Blog articles, projects, clients, products, and profile data do not need to be changed directly from the source code. They can be managed from the admin dashboard, while the frontend consumes the data through API endpoints.

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

On the frontend, the main stack is Next.js App Router with React. Next.js is used because it supports server components, dynamic metadata, file-based routing, image optimization, sitemap, robots, and a cleaner SEO structure.

React is the foundation of the UI, while Tailwind CSS is used for fast and consistent styling. For base components such as dialogs, tabs, forms, and interactive elements, I use a component-based approach with shadcn/ui and Radix UI.

Key frontend libraries

1. Next.js for App Router, SSR/SSG, metadata, and routing.
2. React for component structure.
3. Tailwind CSS for utility-first styling.
4. next-intl for Indonesian and English localization.
5. TanStack React Query for client-side and admin data fetching.
6. Axios as the API client.
7. GSAP for controlled and performance-aware landing page animation.
8. Quill and quill-table-better for the admin blog rich text editor.

Backend: API Provider for Dynamic Content

The backend is positioned as the API provider for all dynamic content. It exposes endpoints for profile, experiences, services, projects, clients, articles, digital products, and links. Each response is structured so the frontend can consume the data clearly and consistently.

For bilingual content, several tables use `lang` and `translation_key`. This pattern allows one content item to have different ID and EN slugs while still being treated as the same translation pair inside the admin dashboard.

Important blog fields

1. title for the article title.
2. description for summary and SEO description.
3. content for the rich text article body.
4. slug for SEO-friendly URLs.
5. lang to separate ID and EN content.
6. translation_key to pair bilingual articles.
7. editorial_note for the editorial note on the detail page.

Admin CMS: Managing Content Without Deployment

One of the main goals of this web profile is to separate content work from deployment. The admin dashboard allows public data to be managed without touching the frontend source code. Blog articles, projects, clients, services, digital products, profile content, and links can all be updated from one CMS area.

For the blog editor, I use Quill to make writing more comfortable than a plain textarea. Table support from quill-table-better is also important because technical articles often need stack comparisons, feature matrices, or architecture breakdowns.

SEO and Performance

Since this web profile is a public-facing asset, SEO is a priority. Every public page is prepared with metadata, Open Graph data, heading structure, sitemap, robots, and localized URLs. On the performance side, animations are kept selective with GSAP so the page feels alive without sacrificing loading speed or scroll performance.

With Next.js, a backend API, an admin CMS, and a rich text editor, this web profile becomes a flexible foundation for a company profile, personal branding, portfolio showcase, content hub, and digital product catalog.