282 lines
4.3 KiB
Markdown
282 lines
4.3 KiB
Markdown
# 🚀 SeTrip Project Architecture Guide
|
|
|
|
## 📌 Overview
|
|
|
|
Dokumen ini menjelaskan standar struktur project untuk aplikasi **SeTrip** menggunakan Next.js (App Router).
|
|
|
|
Tujuan:
|
|
|
|
- Menjaga code tetap rapi & scalable
|
|
- Menghindari spaghetti code
|
|
- Memudahkan AI / developer kontribusi
|
|
|
|
---
|
|
|
|
# 🧠 Core Principles
|
|
|
|
1. **Feature-based structure (WAJIB)**
|
|
2. **Separation client vs server logic**
|
|
3. **Colocation (file dekat dengan fitur)**
|
|
4. **No over-engineering (keep it simple)**
|
|
|
|
---
|
|
|
|
# 🏗️ Project Structure
|
|
|
|
```bash
|
|
src/
|
|
├── app/ # Next.js App Router (UI & routing)
|
|
│ ├── (public)/ # halaman publik
|
|
│ ├── (auth)/ # login/register
|
|
│ ├── trips/ # halaman trip
|
|
│ ├── create-trip/
|
|
│ └── profile/
|
|
│
|
|
├── features/ # 🔥 Business logic per domain
|
|
│ ├── auth/
|
|
│ ├── user/
|
|
│ ├── trip/
|
|
│ ├── booking/
|
|
│ └── review/
|
|
│
|
|
├── server/ # 🔒 Backend-only logic
|
|
│ ├── db/
|
|
│ ├── services/
|
|
│ └── repositories/
|
|
│
|
|
├── components/ # reusable UI components
|
|
│ ├── ui/
|
|
│ └── shared/
|
|
│
|
|
├── lib/ # helpers & utilities
|
|
│ ├── prisma.ts
|
|
│ ├── auth.ts
|
|
│ └── utils.ts
|
|
│
|
|
├── hooks/ # custom react hooks
|
|
├── types/ # global types
|
|
└── config/ # config (env, constants)
|
|
```
|
|
|
|
---
|
|
|
|
# 📂 Folder Rules
|
|
|
|
## 1. `/app` (Routing Layer)
|
|
|
|
Hanya untuk:
|
|
|
|
- page.tsx
|
|
- layout.tsx
|
|
- UI rendering
|
|
- data fetching ringan
|
|
|
|
❌ DILARANG:
|
|
|
|
- business logic
|
|
- query database langsung
|
|
|
|
---
|
|
|
|
## 2. `/features` (Domain Layer) 🔥
|
|
|
|
Setiap fitur punya folder sendiri:
|
|
|
|
```bash
|
|
features/trip/
|
|
├── components/
|
|
├── services/
|
|
├── hooks/
|
|
├── api/
|
|
└── types.ts
|
|
```
|
|
|
|
Digunakan untuk:
|
|
|
|
- business logic
|
|
- validation
|
|
- orchestration
|
|
|
|
---
|
|
|
|
## 3. `/server` (Backend Layer)
|
|
|
|
```bash
|
|
server/
|
|
├── db/
|
|
│ └── prisma.ts
|
|
├── services/
|
|
│ └── trip.service.ts
|
|
└── repositories/
|
|
└── trip.repo.ts
|
|
```
|
|
|
|
Digunakan untuk:
|
|
|
|
- database access
|
|
- heavy logic
|
|
- internal backend
|
|
|
|
---
|
|
|
|
## 4. `/components`
|
|
|
|
```bash
|
|
components/
|
|
├── ui/ # button, input, modal
|
|
└── shared/ # navbar, header
|
|
```
|
|
|
|
---
|
|
|
|
## 5. `/lib`
|
|
|
|
Utility global:
|
|
|
|
- prisma instance
|
|
- auth helper
|
|
- formatter
|
|
|
|
---
|
|
|
|
# 🔄 Data Flow Standard
|
|
|
|
```text
|
|
UI (app/)
|
|
↓
|
|
Feature (features/)
|
|
↓
|
|
Service (server/services)
|
|
↓
|
|
Repository (server/repositories)
|
|
↓
|
|
Database
|
|
```
|
|
|
|
---
|
|
|
|
# 🧩 Example Flow (Create Trip)
|
|
|
|
1. User klik create trip (UI)
|
|
2. Call feature service
|
|
3. Feature validate data
|
|
4. Call server service
|
|
5. Service call repository
|
|
6. Repository insert ke database
|
|
|
|
---
|
|
|
|
# ⚠️ Anti-Pattern (DILARANG)
|
|
|
|
❌ Jangan:
|
|
|
|
- query Prisma langsung di page.tsx
|
|
- campur UI + logic
|
|
- buat folder controller/service ala backend di Next.js
|
|
- over abstraction di awal
|
|
|
|
---
|
|
|
|
# ✅ Best Practice
|
|
|
|
✔ Gunakan:
|
|
|
|
- Zod untuk validation
|
|
- Prisma untuk ORM
|
|
- Server Actions / API route secukupnya
|
|
|
|
✔ Naming:
|
|
|
|
- `trip.service.ts`
|
|
- `trip.repo.ts`
|
|
- `useTrip.ts`
|
|
|
|
---
|
|
|
|
# 🚀 Development Phases
|
|
|
|
## Phase 1 (MVP)
|
|
|
|
- Auth
|
|
- Create Trip
|
|
- Join Trip
|
|
|
|
## Phase 2
|
|
|
|
- Review
|
|
- Limit & validation
|
|
|
|
## Phase 3
|
|
|
|
- Payment
|
|
- Organizer role
|
|
|
|
---
|
|
|
|
# 🧠 Final Principle
|
|
|
|
> Build fast → validate → refactor later
|
|
|
|
Jangan terlalu fokus ke arsitektur sempurna di awal.
|
|
|
|
---
|
|
|
|
# 📌 Notes for AI / Contributors
|
|
|
|
- Ikuti struktur ini tanpa pengecualian
|
|
- Jangan membuat folder baru tanpa alasan jelas
|
|
- Semua fitur baru harus masuk ke `/features`
|
|
- Semua akses DB harus lewat `/server`
|
|
|
|
---
|
|
|
|
# 📦 Tech Stack (MVP - Ideal)
|
|
|
|
Project SeTrip menggunakan stack berikut:
|
|
|
|
## Core
|
|
|
|
- Next.js (App Router)
|
|
- TypeScript
|
|
- Tailwind CSS
|
|
|
|
## Backend & Database
|
|
|
|
- Prisma (ORM)
|
|
- PostgreSQL
|
|
|
|
## Authentication
|
|
|
|
- NextAuth
|
|
|
|
## Validation
|
|
|
|
- Zod
|
|
|
|
## Utility
|
|
|
|
- Axios
|
|
- Dayjs
|
|
- Clsx
|
|
- Bcryptjs
|
|
|
|
---
|
|
|
|
# ⚠️ Rules for Dependencies
|
|
|
|
- Gunakan hanya library yang dibutuhkan untuk MVP
|
|
- Hindari menambahkan dependency tanpa alasan jelas
|
|
- Jangan install:
|
|
- state management kompleks (Redux, Zustand)
|
|
- realtime (socket.io)
|
|
- queue system
|
|
- payment gateway (di phase awal)
|
|
|
|
---
|
|
|
|
# 📌 Philosophy
|
|
|
|
> Minimal dependencies → faster development → easier maintenance
|
|
|
|
**End of Document**
|