Struktur Proyek
Pendahuluan
Dokumen ini memberikan rincian detail tentang struktur direktori frontend Ravenxcope, konvensi kepemilikan file, dan file-file yang terkait dengan runtime.
Direktori Root
ravenxcope-frontend
.env# Variabel lingkungan lokal
.env.example# Dokumentasi variabel lingkungan
.gitlab-ci.yml# Definisi pipa CI/CD
.prettierrc# Konfigurasi Prettier
Dockerfile# Build frontend multi-tahap dan runtime Nginx
README.md# README Vite default
docker-entrypoint.sh# Menulis config.js runtime sebelum Nginx berjalan
eslint.config.js# Konfigurasi flat ESLint
index.html# Titik masuk HTML Vite
nginx
package.json# Skrip dan dependensi
package-lock.json# npm lockfile
yarn.lock# Yarn lockfile yang digunakan oleh Dockerfile
postcss.config.js# Konfigurasi PostCSS
tailwind.config.js# Konfigurasi Tailwind
tsconfig.json# Konfigurasi proyek TypeScript
vite.config.ts# Konfigurasi Vite dan alias
public# Aset statis dan templat konfigurasi runtime
src# Sumber aplikasi
knowledge# Paket dokumentasi frontend
Catatan: baik
package-lock.jsonmaupunyarn.locktersedia. Dockerfile saat ini menggunakanyarn install --frozen-lockfile, sehingga resolusi dependensi produksi mengikutiyarn.lock.
Direktori Source (Sumber)
src
App.css# Gaya tingkat aplikasi
index.css# Variabel Tailwind global dan CSS
i18n.ts# Inisialisasi i18next
main.tsx# Entri React DOM
app
App.tsx# Provider global dan perenderan rute
PrivateRoutes.tsx# Guard rute dasbor privat
routes.tsx# Metadata rute publik/dasbor dan item navigasi sidebar
components
config
core
hooks
lib
locales
modules
types
Kepemilikan Folder Fitur
| Folder | Tanggung Jawab |
|---|---|
modules/sensors/ | Dasbor, halaman daftar/detail sensor, metrik, perintah pendaftaran, CRUD dan aktivasi sensor virtual |
modules/analytics/ | Workspace analitik keamanan, partial bagan/filter/tabel, ekspor laporan, chat AI opsional |
modules/users/ | Halaman daftar pengguna organisasi, partial tabel pengguna, dialog buat/edit, alur penghapusan |
modules/roles/ | Halaman daftar peran, partial tabel peran, dialog izin, alur penghapusan |
modules/organizations/ | Halaman detail/profil organisasi dan dialog edit |
modules/onboarding/ | Halaman pendaftaran organisasi publik dan pengguna-admin |
modules/auth/ | Halaman login publik |
core/layout/ | Shell dasbor, sidebar responsif, header, menu pengguna, pengalih bahasa |
core/page/ | RoutePage, DataTableCard, header/toolbar halaman, transisi, status kosong/pemuatan |
components/ui/ | Primitif UI yang dapat digunakan kembali dibangun di atas Radix UI dan gaya lokal |
components/providers/ | Konteks alert global |
lib/ | API, auth, konstanta, pembantu analitik, utilitas PDF/laporan |
hooks/ | Hook bersama yang membungkus pembacaan API umum |
File Runtime dan Penyebaran (Deployment)
| File | Peran |
|---|---|
Dockerfile | Membangun aset statis dengan Node 22 Alpine, melayani dengan Nginx Alpine pada port 8000 |
docker-entrypoint.sh | Menulis /usr/share/nginx/html/config.js dari variabel lingkungan kontainer |
nginx/default.conf | Mengaktifkan fallback SPA ke index.html, caching aset statis, gzip, dan no-cache untuk config.js |
public/config.js | Templat konfigurasi lokal/runtime yang dimuat oleh browser |
.env.example | Mendokumentasikan kunci Vite dan konfigurasi runtime |
Konvensi Penamaan
| Tipe | Konvensi | Contoh |
|---|---|---|
| Komponen | PascalCase | AnalyticsDashboard.tsx, SensorDetail.tsx |
| Hook | camelCase dengan awalan use | useSensors, useUserPermissions |
| Modul utilitas | camelCase atau nama domain | analyticsFilters.ts, pdfReport.ts |
| Konstanta bersama | Kunci objek UPPER_SNAKE | PERMISSIONS.CREATE_SENSOR |
| Tipe/antarmuka | PascalCase | Sensor, ApiResponse<T>, AnalyticsDashboardFilters |
Direktori yang Dihasilkan atau Non-Source
| Direktori | Catatan |
|---|---|
node_modules/ | Dependensi yang terinstal, bukan sumber |
dist/ | Output build produksi Vite |
Jangan mendokumentasikan perilaku dengan membaca file yang dibangun di dist/; gunakan file sumber di bawah src/.