Cara Mengatur Struktur Folder Project Biar Gak Pusing Sendiri
Pernah gak sih, kamu mulai bikin project, asal-asalan aja naruh file, terus pas projectnya makin gede malah bingung sendiri nyari file? Tenang, kamu gak sendirian. Banyak developer, terutama yang masih belajar, sering meremehkan pentingnya struktur folder. Padahal, struktur folder yang rapi itu ibarat lemari baju yang teratur—gampang dicari, gak berantakan, dan bikin kerja lebih nyaman.
Yuk, kita bahas gimana sih cara mengatur struktur folder project yang simpel tapi efektif.
1. Pisahkan Berdasarkan Fungsinya, Bukan Tipe File doang
Ini nih jebakan umum. Misalnya kamu bikin folder `css`, `js`, `html`. Kelihatannya rapi, tapi kalau project kamu udah punya banyak halaman, kamu bakal kerepotan nyari mana file CSS buat halaman login, mana buat dashboard. Solusinya? Kelompokkan berdasarkan fitur atau modul.
Contoh:
“`
src/
features/
auth/
AuthForm.jsx
AuthStyle.css
dashboard/
Dashboard.jsx
DashboardStyle.css
components/
Button.jsx
Navbar.jsx
“`
Dengan begini, semua file yang berkaitan dengan satu fitur ada di satu tempat. Gampang diurus, dikit-dikit tinggal copas folder kalau mau dipake di project lain.
2. Gunakan Nama Folder yang Jelas dan Konsisten
Jangan pakai singkatan yang cuma kamu sendiri yang ngerti. Misalnya `comp` buat components, `util` buat utilities. Mending tulis aja `components`, `utils`. Panjang dikit gak masalah, asal jelas. Terus, konsisten dalam penamaan. Misalnya kalau pake camelCase, ya semua folder pake camelCase. Kalau pake kebab-case, konsisten.
Contoh pola yang banyak dipakai:
– `src/components/` → komponen reusable
– `src/pages/` atau `src/routes/` → halaman utama
– `src/services/` → logic API, database
– `src/hooks/` → custom hooks (kalau React)
– `src/utils/` atau `src/helpers/` → fungsi bantuan
3. Jangan Tumpuk Semua Asset di Satu Folder
Sering lihat folder `assets` isinya campur aduk gambar, font, icon? Memang gak salah, tapi mending dipisah lagi. Misalnya `assets/images`, `assets/fonts`, `assets/icons`. Kalau project kecil mah gak masalah, tapi kalau udah banyak icon dan gambar, bakal susah nyari.
Lebih rapi lagi kalau asset yang spesifik untuk fitur tertentu ditaruh di folder fitur itu sendiri. Misalnya gambar logo ya di `components/Logo/` aja, bukan di `assets/images`.
4. Terapkan Struktur Flat (Datar) untuk Project Kecil, Tapi Jangan Berlebihan
Project kecil, misalnya aplikasi CRUD sederhana, gak perlu struktur folder yang terlalu dalam. Cukup:
“`
src/
components/
pages/
utils/
index.js
“`
Ini cukup. Tapi kalau udah lebih dari 10-15 file di satu folder, saatnya mikir buat grouping ulang.
5. Gunakan Index Files untuk Ekspor Bersih
Buat file `index.js` atau `index.ts` di setiap folder yang isinya re-export dari file-file di dalamnya. Contoh:
“`
components/
Button/
Button.jsx
ButtonStyle.css
index.js
“`
Isi `index.js`:
“`js
export { default } from ‘./Button’;
“`
Nah, pas tinggal import di komponen lain, kamu bisa nulis `import Button from ‘components/Button’` tanpa perlu tau nama file aslinya. Ini bikin kode lebih rapih dan mengurangi error.
6. Pisahkan Konfigurasi dan Environment
File konfigurasi kayak `.env`, `webpack.config.js`, `package.json`, mending ditaruh di root project, bukan di dalam `src`. Juga, buat folder `config/` kalau konfigurasinya banyak. Tapi ingat, jangan terlalu banyak folder di root yang bikin pusing.
Biasanya struktur root yang umum:
“`
project/
src/
public/
config/
.env
.gitignore
package.json
README.md
“`
7. Jangan Takut Refaktor Struktur Folder
Struktur folder pertama yang kamu buat bukan harga mati. Kalau udah jalan dan rasanya mulai berantakan, refaktor aja. Jangan nunggu makin parah. Pindahin file, buat folder baru, hapus yang gak perlu. Git commit aja dulu, jadi kalau error bisa balik.
Insight Penutup
Struktur folder yang baik bukan cuma soal estetika, tapi soal kemampuan tim untuk berkembang. Kalau kamu kerja sendiri, struktur yang rapi bakal bikin kamu lebih cepat debugging dan nambah fitur. Kalau kerja tim, struktur yang jelas bikin onboarding anggota baru lebih cepat dan mengurangi konflik merge.
Yang paling penting: konsistensi. Mau pake pola fitur-based atau layer-based, yang penting semua anggota tim pakai aturan yang sama. Jangan setengah-setengah, misalnya kadang ada folder `components`, kadang `ui`, kadang `elements`. Bingung sendiri nanti.
Intinya, atur folder project seperti kamu mau orang lain bisa baca dan lanjutin projectmu tanpa harus tanya-tanya ke kamu. Karena siapa tahu, “orang lain” itu adalah dirimu sendiri 6 bulan kemudian yang udah lupa semua struktur. 😉
Selamat ngoding, dan jangan lupa rapiin folder dulu sebelum tidur!