Cara Menyusun Struktur Folder Frontend yang Scalable

Pendahuluan

Struktur folder adalah pondasi dari keberhasilan sebuah proyek frontend. Ketika proyek tumbuh, struktur yang rapi dan konsisten akan sangat membantu pengembang dalam navigasi, debugging, testing, hingga kolaborasi tim. Sebaliknya, struktur yang tidak dirancang sejak awal bisa memperlambat pengembangan, membuat kode tidak maintainable, dan menyulitkan scaling ke tim yang lebih besar.

Artikel ini membahas pendekatan struktur direktori frontend yang scalable dan maintainable, serta contoh struktur folder yang dapat digunakan dalam proyek nyata—baik dengan React, Next.js, Vue, maupun Vite.

1. Kenapa Struktur Folder Penting?

Memudahkan navigasi dan pemahaman proyek
Mengurangi keruwetan dalam refactoring dan scaling
Mempercepat onboarding developer baru
Meminimalkan konflik merge dan duplikasi kode
Mendukung pertumbuhan tim dan organisasi

2. Pendekatan Struktur yang Umum

A. Struktur Berdasarkan Tipe (Traditional)

├── components/
├── pages/
├── styles/
├── utils/
├── services/

Kelebihan: Familiar dan mudah dimulai Kekurangan: Sulit di-scale, dependensi lintas direktori makin kompleks

B. Struktur Berdasarkan Fitur (Feature-based)

├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   │   └── index.ts
│   ├── product/
│   └── cart/

Kelebihan: Modular, cocok untuk tim dan proyek skala menengah-besar Kekurangan: Butuh konvensi yang jelas

C. Struktur Berdasarkan Domain (Domain-driven)

├── modules/
│   ├── checkout/
│   │   ├── ui/
│   │   ├── services/
│   │   ├── model/
│   │   ├── hooks/
│   │   └── types.ts
│   ├── inventory/
│   └── user/

Kelebihan: Cocok untuk organisasi yang menerapkan DDD Kekurangan: Terlalu kompleks untuk proyek kecil

3. Struktur Folder Komprehensif untuk Proyek Frontend Skala Besar

Struktur berikut menggabungkan pendekatan feature-based dan domain-driven yang umum digunakan pada proyek skala besar dan tim kolaboratif.

src/
├── app/                 # Entry point, layout, global routes
│   ├── layout.tsx
│   ├── routes.ts
│   └── App.tsx
│
├── modules/             # Domain atau fitur utama
│   ├── auth/
│   │   ├── components/
│   │   ├── services/
│   │   ├── hooks/
│   │   ├── model/
│   │   ├── types.ts
│   │   └── index.ts
│   ├── dashboard/
│   ├── user/
│   └── product/
│
├── shared/              # Komponen dan utilitas global
│   ├── components/      # Reusable UI (Button, Modal, Card)
│   ├── hooks/
│   ├── utils/
│   ├── constants/
│   ├── types/
│   └── theme/
│
├── services/            # Integrasi API global (axios instance, interceptors)
├── store/               # State management (Redux, Zustand, Jotai)
├── assets/              # Gambar, font, ikon
├── styles/              # Global stylesheet (scss, tailwind, css modules)
├── config/              # Konfigurasi environment, runtime
└── index.tsx            # Entry point React/JS

4. Studi Kasus: Scaling Struktur Folder

A. Proyek Skala Kecil (Portfolio, Landing Page)

Struktur minimalis
Komponen dikumpulkan dalam satu components/
Gunakan src/ sebagai root

B. Skala Menengah (Dashboard, SaaS kecil)

Pecah fitur utama dalam modules/
Tambah folder hooks/, store/, dan types/
Gunakan alias import (misalnya @modules, @shared)

C. Skala Besar (Team cross-functional)

Gunakan monorepo jika multi-app (Turborepo, Nx)
Terapkan struktur domain-based
Buat README per modul
Terapkan konvensi penamaan, linting, dan code ownership

5. Tools & Tips Pendukung

Alias path: vite.config.ts, tsconfig.json
Barrel exports: index.ts per folder untuk memudahkan import
Dokumentasi struktur: buat docs/architecture.md
Plugin ESLint: untuk impor terstruktur dan naming consistency
Design tokens: simpan dalam shared/theme/ untuk styling konsisten

6. Anti-Pattern yang Harus Dihindari

Menggabungkan semua file di components/ tanpa hirarki
Import relatif panjang ../../../../../
Tidak memiliki dokumentasi atau konvensi
Duplikasi file dan fungsi utilitas antar fitur

7. Rekomendasi Template & Boilerplate

Kesimpulan

Struktur folder frontend yang scalable bukan hanya tentang kerapian, tapi tentang kejelasan peran, tanggung jawab antar bagian, dan kemampuan tim dalam bertumbuh. Pilih pendekatan yang sesuai dengan ukuran proyek dan kebutuhan timmu. Jangan takut melakukan refactor seiring waktu, namun selalu buat keputusan yang didokumentasikan dan konsisten.

Semakin baik struktur foldermu, semakin mudah proyekmu untuk dimaintain, dikembangkan, dan dikolaborasikan.