Semua File Mandatory dalam Vibe Coding SDLC — Dari BRS hingga Deployment

# BRS — Business Requirement Specification
## Project: GrabFood Clone — "MakanYuk"
## Version: 1.0 | Date: 2026-03-01 | Author: Product Owner

## 1. Executive Summary
MakanYuk adalah platform food delivery yang menghubungkan restoran lokal
dengan konsumen di area Jabodetabek. Target: 50.000 pengguna aktif di Q4 2026.

## 2. Business Objectives
- BO-1: Akuisisi 50.000 Monthly Active Users dalam 6 bulan
- BO-2: Onboard 500 restoran mitra dalam 3 bulan
- BO-3: Achieve 15% profit margin per transaksi
- BO-4: Rata-rata delivery time < 35 menit

## 3. Stakeholders
| Stakeholder       | Role               | Interest              |
|-------------------|--------------------|-----------------------|
| CEO               | Sponsor            | Revenue & growth      |
| VP Product        | Decision Maker     | Feature prioritization|
| Head of Ops       | Delivery SLA       | Operational efficiency|
| Restaurant Owners | Partners           | Order volume          |
| End Users         | Consumers          | Fast, affordable food |

## 4. Business Rules
- BR-1: Minimum order Rp 25.000
- BR-2: Commission rate 20% per transaction
- BR-3: Free delivery for orders > Rp 75.000
- BR-4: Refund within 24 hours for failed deliveries
- BR-5: Driver rating < 3.5 → auto-suspend

## 5. Success Metrics (KPIs)
| KPI                    | Target     | Measurement           |
|------------------------|------------|-----------------------|
| MAU                    | 50,000     | Firebase Analytics     |
| Order Completion Rate  | >95%      | Backend metrics        |
| Avg Delivery Time      | <35 min   | GPS tracking           |
| Customer Satisfaction  | >4.2/5    | In-app rating          |
| Restaurant Churn       | <5%/month | CRM dashboard          |

## 6. Constraints
- Budget: Rp 500 juta (development + 6 months ops)
- Timeline: MVP in 3 months, full launch in 6 months
- Regulation: Must comply with Indonesian e-commerce laws
- Technology: Mobile-first (iOS + Android)

## 7. Approval
| Name         | Role      | Signature | Date       |
|--------------|-----------|-----------|------------|
| John Doe     | CEO       | _________ | 2026-03-01 |
| Jane Smith   | VP Product| _________ | 2026-03-01 |

# BRD — Business Requirement Document
## Project: MakanYuk Food Delivery

## 1. Feature Requirements

### FR-001: User Registration & Authentication
- Priority: P0 (Critical)
- Description: Users can register via phone number (OTP) or Google/Apple SSO
- Acceptance Criteria:
  - OTP delivered within 30 seconds
  - Session persists for 30 days
  - Profile includes: name, phone, email, address(es)
- Dependencies: SMS gateway (Twilio/WA), Firebase Auth

### FR-002: Restaurant Discovery & Search
- Priority: P0 (Critical)
- Description: Users browse nearby restaurants by category, rating, distance
- Acceptance Criteria:
  - Show restaurants within 5km radius (configurable)
  - Filter by: cuisine, rating (≥4.0), price range, delivery time
  - Search with autocomplete (debounce 300ms)
  - Sort by: relevance, distance, rating, delivery time
- Dependencies: GPS/Location API, Elasticsearch

### FR-003: Menu Browsing & Cart
- Priority: P0 (Critical)
- Description: Users view restaurant menu, add items to cart, customize
- Acceptance Criteria:
  - Menu grouped by category (Appetizer, Main, Drinks, etc)
  - Item detail: photo, description, price, customization options
  - Cart persists across sessions (localStorage + server sync)
  - Real-time price calculation with tax & delivery fee
- Dependencies: FR-002, payment gateway

### FR-004: Checkout & Payment
- Priority: P0 (Critical)
- Methods: GoPay, OVO, Dana, BCA VA, Credit Card, COD
- Promo code / voucher support
- Dependencies: Midtrans/Xendit payment gateway

### FR-005: Order Tracking (Real-time)
- Priority: P0 (Critical)
- Live GPS tracking of driver on map
- Status: Confirmed → Preparing → Picked Up → On the Way → Delivered
- Push notifications at each status change

### FR-006: Rating & Review
- Priority: P1 (High)
- Rate restaurant (1-5 stars) + text review
- Rate driver (1-5 stars)

## 2. Feature Priority Matrix
| ID     | Feature              | Priority | MVP? | Sprint |
|--------|----------------------|----------|------|--------|
| FR-001 | Auth & Registration  | P0       | ✅   | 1      |
| FR-002 | Restaurant Discovery | P0       | ✅   | 1      |
| FR-003 | Menu & Cart          | P0       | ✅   | 2      |
| FR-004 | Checkout & Payment   | P0       | ✅   | 2      |
| FR-005 | Order Tracking       | P0       | ✅   | 3      |
| FR-006 | Rating & Review      | P1       | ✅   | 3      |
| FR-007 | Promo & Vouchers     | P1       | ❌   | 4      |
| FR-008 | Favorites & Reorder  | P2       | ❌   | 5      |
| FR-009 | Chat with Driver     | P2       | ❌   | 5      |
| FR-010 | Loyalty Program      | P3       | ❌   | 6      |

# PRD — MakanYuk Food Delivery App

## Vision
The fastest, most affordable food delivery platform for Indonesian users.

## Target Users
- Primary: Urban professionals (22-35), smartphone-first, order 3-5x/week
- Secondary: Families (30-45), order for dinner, weekend bulk orders
- Tertiary: Students (18-22), price-sensitive, promo-driven

## User Personas
### Persona 1: "Rina" — Busy Professional
- Age: 28, Works at startup, Lives in Sudirman
- Pain: No time to cook, tired of the same restaurants
- Goal: Quick lunch delivery, discover new restaurants
- Device: iPhone 16, fast internet

### Persona 2: "Budi" — Family Dad
- Age: 38, Office worker, Lives in BSD
- Pain: Kids are picky, needs variety
- Goal: Easy family dinner ordering with child-friendly options
- Device: Samsung Galaxy, moderate internet

## Feature Specifications

### F-001: Onboarding Flow
Screen 1: Splash → 3 onboarding slides (swipe)
Screen 2: Login: Phone OTP | Google SSO | Apple SSO
Screen 3: Set delivery address (GPS auto-detect + manual input)
Screen 4: Select food preferences (optional, skippable)
→ Redirect to Home Screen

### F-002: Home Screen
Components:
1. Header: delivery address selector + user avatar
2. Search bar with voice input
3. Promo banner carousel (auto-rotate 5s)
4. Category icons (horizontal scroll)
5. "Near You" restaurant cards (distance-sorted)
6. "Popular" restaurant cards (rating-sorted)
7. Bottom nav: Home | Search | Cart | Orders | Profile

### F-003: Restaurant Detail Page
Components:
1. Hero image + restaurant info (name, rating, distance, delivery time)
2. Tab menu categories
3. Menu items with photo, name, price, customization CTA
4. Sticky "View Cart" button at bottom
5. Info section: opening hours, address, reviews

## Non-Functional Requirements
- Performance: First Contentful Paint < 1.5s, TTI < 3s
- Availability: 99.9% uptime
- Security: OWASP Top 10, data encrypted at rest & in transit
- Accessibility: WCAG 2.1 AA minimum
- Localization: Bahasa Indonesia (primary), English (secondary)

# User Stories — MakanYuk

## Epic 1: Authentication

### US-001: Phone OTP Login
As a new user
I want to register/login using my phone number and OTP
So that I can quickly access the app without remembering passwords

Acceptance Criteria:
- [x] Input field accepts Indonesian phone format (+62xxx)
- [x] OTP sent via SMS within 30 seconds
- [x] OTP is 6 digits, expires in 5 minutes
- [x] Max 3 OTP resend attempts per hour
- [x] After verification → create/fetch user profile
- [x] Error state: invalid OTP, expired OTP, rate limited

### US-002: Add Delivery Address
As a logged-in user
I want to add my delivery address using GPS or manual input
So that I see restaurants that deliver to my location

Acceptance Criteria:
- [x] GPS auto-detect with "Use current location" button
- [x] Manual input with Google Places autocomplete
- [x] Pin adjustment on map for precise location
- [x] Label address: Home, Office, Other
- [x] Save multiple addresses (max 5)

## Epic 2: Restaurant Discovery

### US-003: Browse Nearby Restaurants
As a hungry user
I want to see restaurants near me sorted by distance
So that I can get food delivered quickly

### US-004: Search for Specific Food
As a user craving specific food
I want to search by food name or restaurant name
So that I can find exactly what I want

## Epic 3: Ordering

### US-005: Add to Cart with Customization
As a user browsing a restaurant menu
I want to add items to cart with customization (size, toppings, notes)
So that I get exactly the food I want

### US-006: Checkout and Pay
As a user ready to order
I want to review my cart, apply promo code, and pay
So that my order is placed and I can track it

### US-007: Track Order in Real-time
As a user who placed an order
I want to see live driver location on a map
So that I know exactly when my food will arrive

# System Architecture — MakanYuk

## Tech Stack
### Frontend (Mobile)
- Framework: React Native + Expo (iOS + Android)
- State: Zustand + React Query (TanStack)
- Navigation: Expo Router (file-based)
- UI: NativeWind (Tailwind for RN) + custom components
- Maps: react-native-maps + Google Maps SDK
- Push: Firebase Cloud Messaging

### Backend
- Runtime: Node.js 22 + Hono (lightweight framework)
- ORM: Prisma (type-safe database access)
- Auth: Firebase Auth + custom JWT middleware
- Real-time: Socket.io (order tracking)
- Queue: BullMQ + Redis (order processing, notifications)
- Search: Meilisearch (restaurant & menu search)

### Database
- Primary: PostgreSQL 16 (Supabase)
- Cache: Redis 7 (sessions, real-time data)
- File Storage: Supabase Storage (images)

### Infrastructure
- Hosting: Vercel (API) + Supabase (DB + Auth + Storage)
- CDN: Cloudflare
- CI/CD: GitHub Actions
- Monitoring: Sentry (errors) + PostHog (analytics)
- Payment: Midtrans (GoPay, OVO, VA, CC)

## Architecture Diagram
```
┌─────────────┐     ┌─────────────┐     ┌──────────────┐
│  React Native│────▶│  Hono API   │────▶│ PostgreSQL   │
│  (Expo)      │     │  (Vercel)   │     │ (Supabase)   │
└──────┬───────┘     └──────┬──────┘     └──────────────┘
       │                    │
       │ WebSocket          ├────▶ Redis (Cache + Queue)
       │                    │
       ▼                    ├────▶ Meilisearch (Search)
  Firebase FCM              │
  (Push Notif)              ├────▶ Midtrans (Payment)
                            │
                            └────▶ Supabase Storage (Images)
```

## API Communication
- REST API for CRUD operations (JSON)
- WebSocket for real-time order tracking
- Webhook from Midtrans for payment callbacks
- FCM for push notifications

%% ERD — MakanYuk Food Delivery
%% Render di: mermaid.live, GitHub, atau VS Code Mermaid extension

erDiagram
    USER {
        uuid    id          PK
        string  phone       UK
        string  name
        string  email
        string  avatar_url
        enum    role        "customer|driver|restaurant_owner|admin"
        timestamp created_at
    }

    ADDRESS {
        uuid    id          PK
        uuid    user_id     FK
        string  label       "home|office|other"
        string  street
        string  detail
        float   latitude
        float   longitude
        boolean is_default
    }

    RESTAURANT {
        uuid    id          PK
        uuid    owner_id    FK
        string  name
        string  description
        string  image_url
        string  cuisine_type
        float   latitude
        float   longitude
        float   rating
        int     total_reviews
        boolean is_active
        time    open_time
        time    close_time
    }

    MENU_CATEGORY {
        uuid    id          PK
        uuid    restaurant_id FK
        string  name
        int     sort_order
    }

    MENU_ITEM {
        uuid    id          PK
        uuid    category_id FK
        string  name
        string  description
        string  image_url
        int     price       "in IDR cents"
        boolean is_available
    }

    ORDER {
        uuid    id          PK
        uuid    customer_id FK
        uuid    restaurant_id FK
        uuid    driver_id   FK
        uuid    address_id  FK
        enum    status      "pending|confirmed|preparing|picked_up|delivering|delivered|cancelled"
        int     subtotal
        int     delivery_fee
        int     discount
        int     total
        string  payment_method
        string  payment_status "pending|paid|failed|refunded"
        string  promo_code
        text    notes
        timestamp created_at
        timestamp delivered_at
    }

    ORDER_ITEM {
        uuid    id          PK
        uuid    order_id    FK
        uuid    menu_item_id FK
        int     quantity
        int     unit_price
        text    customization
    }

    REVIEW {
        uuid    id          PK
        uuid    order_id    FK
        uuid    user_id     FK
        uuid    restaurant_id FK
        int     rating      "1-5"
        text    comment
        timestamp created_at
    }

    PAYMENT {
        uuid    id          PK
        uuid    order_id    FK
        string  gateway_ref "Midtrans transaction ID"
        string  method
        string  status
        int     amount
        json    gateway_response
        timestamp created_at
    }

    USER ||--o{ ADDRESS : "has"
    USER ||--o{ ORDER : "places"
    USER ||--o{ REVIEW : "writes"
    USER ||--o| RESTAURANT : "owns"
    RESTAURANT ||--o{ MENU_CATEGORY : "has"
    MENU_CATEGORY ||--o{ MENU_ITEM : "contains"
    RESTAURANT ||--o{ ORDER : "receives"
    ORDER ||--o{ ORDER_ITEM : "contains"
    ORDER ||--|| PAYMENT : "has"
    ORDER ||--o| REVIEW : "has"
    MENU_ITEM ||--o{ ORDER_ITEM : "ordered_as"

%% State Transition — Order Status

stateDiagram-v2
    [*] --> PENDING : Customer places order
    
    PENDING --> CONFIRMED : Restaurant accepts
    PENDING --> CANCELLED : Customer cancels (within 2 min)
    PENDING --> CANCELLED : Restaurant rejects
    PENDING --> CANCELLED : Payment fails (auto after 15 min)
    
    CONFIRMED --> PREPARING : Restaurant starts cooking
    CONFIRMED --> CANCELLED : Restaurant cancels (penalty applies)
    
    PREPARING --> READY : Food is ready for pickup
    
    READY --> PICKED_UP : Driver picks up order
    
    PICKED_UP --> DELIVERING : Driver en route to customer
    
    DELIVERING --> DELIVERED : Driver confirms delivery
    DELIVERING --> FAILED : Customer unreachable (3 call attempts)
    
    DELIVERED --> [*]
    CANCELLED --> [*]
    FAILED --> REFUND_PENDING : Auto-trigger refund
    REFUND_PENDING --> REFUNDED : Refund processed
    REFUNDED --> [*]

%% Trigger notifications at each transition:
%% CONFIRMED → push notif to customer + driver assignment queue
%% PREPARING → update ETA on customer app
%% PICKED_UP → start live GPS tracking
%% DELIVERED → prompt rating/review

# Design System — MakanYuk

## 1. Color Tokens
```
--color-primary:      #7C3AED   (Purple — brand identity)
--color-primary-light:#A78BFA
--color-primary-dark: #5B21B6
--color-secondary:    #F59E0B   (Amber — CTAs, highlights)
--color-success:      #10B981   (Green — confirmed, active)
--color-warning:      #F59E0B   (Amber — pending states)
--color-error:        #EF4444   (Red — errors, cancellations)
--color-bg:           #FFFFFF   (Light mode background)
--color-bg-dark:      #0F0F14   (Dark mode background)
--color-surface:      #F9FAFB   (Cards, containers)
--color-surface-dark: #1C1C24
--color-text-primary: #111827
--color-text-secondary:#6B7280
--color-text-inverse: #FAFAFA
--color-border:       #E5E7EB
```

## 2. Typography Scale
```
Font Family: "Inter" (primary), system-ui (fallback)

--text-display:  32px / 40px / 800   (Hero text, promo)
--text-h1:       24px / 32px / 700   (Screen titles)
--text-h2:       20px / 28px / 600   (Section headers)
--text-h3:       16px / 24px / 600   (Card titles)
--text-body:     14px / 22px / 400   (Body text)
--text-body-sm:  13px / 20px / 400   (Secondary text)
--text-caption:  12px / 16px / 500   (Badges, timestamps)
--text-overline: 10px / 14px / 700   (Labels, uppercase)
```

## 3. Spacing Scale (8px grid)
```
--space-xs:   4px    (tight padding)
--space-sm:   8px    (icon gap, small padding)
--space-md:   12px   (standard gap)
--space-lg:   16px   (card padding, section gap)
--space-xl:   24px   (section separator)
--space-2xl:  32px   (major section gap)
--space-3xl:  48px   (screen padding top)
```

## 4. Border Radius
```
--radius-sm:  8px    (buttons, inputs)
--radius-md:  12px   (cards, tags)
--radius-lg:  16px   (modals, bottom sheets)
--radius-xl:  24px   (promo banners)
--radius-full:9999px (avatars, pills)
```

## 5. Shadow Scale
```
--shadow-sm:  0 1px 2px rgba(0,0,0,0.05)
--shadow-md:  0 4px 12px rgba(0,0,0,0.08)
--shadow-lg:  0 12px 32px rgba(0,0,0,0.12)
--shadow-xl:  0 20px 48px rgba(0,0,0,0.16)
```

## 6. Touch Targets
- Minimum: 44×44px (Apple HIG)
- Recommended: 48×48px (Material Design)
- Bottom nav icons: 48×48px with 56px hit area

## 7. Icon System
- Library: Lucide Icons (24px default, 20px compact)
- Style: Outline (default), Filled (active state)
- Color: inherits text color

%% User Flow: Complete Order Journey

flowchart TD
    A[Open App] --> B{Logged In?}
    B -->|No| C[Onboarding Screens]
    C --> D[Login: Phone OTP / SSO]
    D --> E[Set Delivery Address]
    E --> F[Home Screen]
    B -->|Yes| F

    F --> G{How to find food?}
    G -->|Browse| H[Scroll Category/Nearby]
    G -->|Search| I[Search Bar → Results]
    G -->|Promo| J[Tap Promo Banner]

    H --> K[Restaurant Detail Page]
    I --> K
    J --> K

    K --> L[Browse Menu]
    L --> M[Select Item → Customize]
    M --> N[Add to Cart]
    N --> O{Add more?}
    O -->|Yes| L
    O -->|No| P[Cart Review]

    P --> Q[Apply Promo Code]
    Q --> R[Select Payment Method]
    R --> S[Confirm & Pay]

    S --> T{Payment OK?}
    T -->|No| U[Error: Retry Payment]
    U --> R
    T -->|Yes| V[Order Confirmed Screen]

    V --> W[Track Order (Real-time Map)]
    W --> X[Order Status Updates]
    X --> Y[Order Delivered]
    Y --> Z[Rate Restaurant + Driver]
    Z --> F

# CLAUDE.md — MakanYuk Project Context

## Project Overview
MakanYuk is a food delivery mobile app built with React Native (Expo)
and Hono backend. Target: Indonesian market, Jabodetabek area.

## Tech Stack
- Frontend: React Native + Expo SDK 52 + NativeWind + Zustand
- Backend: Hono + Prisma + PostgreSQL (Supabase)
- Auth: Firebase Auth (Phone OTP + Google SSO)
- Payment: Midtrans
- Maps: Google Maps SDK
- Real-time: Socket.io
- Search: Meilisearch

## Project Structure
```
/app                  → Expo Router screens (file-based routing)
/components           → Reusable UI components
/components/ui        → Atomic components (Button, Input, Card)
/hooks                → Custom React hooks
/stores               → Zustand stores
/services             → API service layer
/utils                → Helper functions
/constants            → App constants, theme tokens
/types                → TypeScript type definitions
/server               → Hono backend
/server/routes        → API route handlers
/server/middleware     → Auth, validation, error handling
/server/services      → Business logic
/prisma               → Prisma schema and migrations
/docs                 → All documentation (PRD, ERD, etc)
```

## Coding Standards
- Language: TypeScript strict mode, no `any`
- Formatting: Prettier (2 space indent, single quotes, no semicolons)
- Linting: ESLint + Expo config
- Naming: camelCase (variables/functions), PascalCase (components/types)
- Files: kebab-case for files, PascalCase for component files
- Tests: Vitest + React Native Testing Library
- Commits: Conventional Commits (feat:, fix:, docs:, chore:)

## Component Patterns
- Use functional components with hooks only
- Use NativeWind (Tailwind) for styling, no inline StyleSheet
- Prefer composition over prop drilling
- Extract shared logic into custom hooks (/hooks)
- All API calls go through /services layer
- Use Zustand for global state, React Query for server state

## Design System Reference
See docs/design-system.md for colors, typography, spacing tokens.
Primary: #7C3AED, Secondary: #F59E0B, Success: #10B981, Error: #EF4444
Font: Inter. Spacing: 8px grid. Radius: 8/12/16px. Min touch: 44px.

## API Patterns
- RESTful: GET /api/restaurants, POST /api/orders
- Response format: { success: boolean, data?: T, error?: string }
- Auth: Bearer token in Authorization header
- Pagination: ?page=1&limit=20 → { data, meta: { total, page } }
- Validation: Zod schemas for request body

## Important Rules
- NEVER commit .env files or API keys
- ALWAYS run `npx expo lint` before committing
- ALWAYS write tests for new API endpoints
- Use Indonesian for user-facing strings (i18n ready)
- Follow Conventional Commits format
- Keep components under 150 lines — extract if longer

makanyuk/
├── CLAUDE.md                  ← AI agent instructions
├── README.md                  ← Project overview + setup guide
├── CHANGELOG.md               ← Version history
├── .gitignore                 ← Git ignore rules
├── .env.example               ← Environment template (COMMITTED)
├── .env                       ← Actual secrets (NEVER COMMIT)
│
├── docs/                      ← All documentation
│   ├── BRS.md                 ← Business Requirements
│   ├── BRD.md                 ← Business Requirement Document
│   ├── PRD.md                 ← Product Requirements
│   ├── FSD.md                 ← Functional Specification
│   ├── user-stories.md        ← Agile user stories
│   ├── architecture.md        ← System architecture
│   ├── erd.mermaid            ← ERD diagram
│   ├── state-transitions.mermaid ← Order state machine
│   ├── user-flows.mermaid     ← User journey flows
│   ├── api-spec.yml           ← OpenAPI 3.1 specification
│   ├── design-system.md       ← Colors, typography, spacing
│   ├── wireframes.md          ← Low-fidelity wireframes
│   ├── components.md          ← Component library docs
│   ├── test-plan.md           ← Testing strategy
│   └── deployment.md          ← Deployment checklist
│
├── app/                       ← Expo Router screens
│   ├── _layout.tsx            ← Root layout (providers, nav)
│   ├── index.tsx              ← Splash / redirect
│   ├── (auth)/
│   │   ├── login.tsx          ← Phone OTP login
│   │   ├── verify-otp.tsx     ← OTP verification
│   │   └── onboarding.tsx     ← First-time user flow
│   ├── (tabs)/
│   │   ├── _layout.tsx        ← Bottom tab navigator
│   │   ├── index.tsx          ← Home screen
│   │   ├── search.tsx         ← Search screen
│   │   ├── cart.tsx           ← Cart screen
│   │   ├── orders.tsx         ← Order history
│   │   └── profile.tsx        ← User profile
│   ├── restaurant/
│   │   └── [id].tsx           ← Restaurant detail (dynamic)
│   ├── order/
│   │   ├── checkout.tsx       ← Checkout & payment
│   │   └── [id]/
│   │       └── track.tsx      ← Real-time order tracking
│   └── +not-found.tsx         ← 404 screen
│
├── components/                ← Reusable components
│   ├── ui/                    ← Atomic UI components
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   ├── Card.tsx
│   │   ├── Badge.tsx
│   │   ├── Skeleton.tsx
│   │   ├── BottomSheet.tsx
│   │   └── index.ts           ← Barrel export
│   ├── restaurant/
│   │   ├── RestaurantCard.tsx
│   │   ├── MenuItemCard.tsx
│   │   └── CategoryPill.tsx
│   ├── order/
│   │   ├── OrderStatusBadge.tsx
│   │   ├── OrderTrackingMap.tsx
│   │   └── CartItemRow.tsx
│   └── layout/
│       ├── Header.tsx
│       ├── SearchBar.tsx
│       └── PromoBanner.tsx
│
├── hooks/                     ← Custom hooks
│   ├── useAuth.ts
│   ├── useLocation.ts
│   ├── useCart.ts
│   └── useOrder.ts
│
├── stores/                    ← Zustand stores
│   ├── auth-store.ts
│   ├── cart-store.ts
│   └── location-store.ts
│
├── services/                  ← API service layer
│   ├── api.ts                 ← Axios/fetch instance
│   ├── auth.service.ts
│   ├── restaurant.service.ts
│   ├── order.service.ts
│   └── payment.service.ts
│
├── server/                    ← Hono backend
│   ├── index.ts               ← Server entry point
│   ├── routes/
│   │   ├── auth.routes.ts
│   │   ├── restaurant.routes.ts
│   │   ├── menu.routes.ts
│   │   ├── order.routes.ts
│   │   ├── payment.routes.ts
│   │   └── review.routes.ts
│   ├── middleware/
│   │   ├── auth.middleware.ts
│   │   ├── validate.middleware.ts
│   │   └── error.middleware.ts
│   ├── services/
│   │   ├── order.service.ts
│   │   ├── payment.service.ts
│   │   └── notification.service.ts
│   └── schemas/               ← Zod validation schemas
│       ├── auth.schema.ts
│       ├── order.schema.ts
│       └── review.schema.ts
│
├── prisma/                    ← Database
│   ├── schema.prisma          ← Prisma schema (from ERD)
│   ├── seed.ts                ← Seed data
│   └── migrations/            ← Auto-generated migrations
│
├── __tests__/                 ← Tests
│   ├── unit/
│   ├── integration/
│   └── e2e/
│
├── types/                     ← TypeScript types
│   ├── api.types.ts
│   ├── restaurant.types.ts
│   ├── order.types.ts
│   └── user.types.ts
│
├── constants/                 ← App constants
│   ├── theme.ts               ← Design system tokens
│   ├── config.ts              ← App config
│   └── enums.ts               ← Shared enums
│
├── utils/                     ← Helpers
│   ├── format-currency.ts
│   ├── format-distance.ts
│   ├── validate-phone.ts
│   └── storage.ts
│
├── package.json
├── tsconfig.json
├── tailwind.config.js
├── app.json                   ← Expo config
└── .github/
    └── workflows/
        ├── ci.yml             ← Lint + test on PR
        └── deploy.yml         ← Auto deploy on main

# ================================
# MakanYuk — Environment Variables
# Copy to .env and fill in values
# NEVER commit .env to git!
# ================================

# App
APP_ENV=development
APP_URL=http://localhost:3000
API_URL=http://localhost:8787

# Database (Supabase)
DATABASE_URL=postgresql://user:password@host:5432/makanyuk
DIRECT_URL=postgresql://user:password@host:5432/makanyuk

# Supabase
SUPABASE_URL=https://xxx.supabase.co
SUPABASE_ANON_KEY=eyJxxx
SUPABASE_SERVICE_KEY=eyJxxx

# Firebase
FIREBASE_API_KEY=AIzaxxx
FIREBASE_PROJECT_ID=makanyuk-prod

# Payment (Midtrans)
MIDTRANS_SERVER_KEY=SB-Mid-server-xxx
MIDTRANS_CLIENT_KEY=SB-Mid-client-xxx
MIDTRANS_IS_PRODUCTION=false

# Google Maps
GOOGLE_MAPS_API_KEY=AIzaxxx

# Redis
REDIS_URL=redis://localhost:6379

# Meilisearch
MEILI_HOST=http://localhost:7700
MEILI_MASTER_KEY=xxx

# Sentry (Error Tracking)
SENTRY_DSN=https://xxx@sentry.io/xxx

# JWT
JWT_SECRET=super-secret-key-change-in-production
JWT_EXPIRES_IN=30d

# Test Plan — MakanYuk

## Testing Strategy
| Level        | Tool                          | Coverage Target |
|-------------|-------------------------------|-----------------|
| Unit        | Vitest + RTL                  | 80% functions   |
| Integration | Vitest + Supertest            | All API routes  |
| E2E         | Maestro (mobile) / Playwright | Critical paths  |
| Performance | k6                            | <200ms p95      |
| Security    | OWASP ZAP + Snyk              | 0 critical      |

## Critical Test Scenarios

### Auth Flow
- [x] Register with valid phone → OTP sent → verify → profile created
- [x] Login with existing phone → OTP → session resumed
- [x] Invalid OTP → error message → retry
- [x] Expired OTP → error → resend available
- [x] Rate limit: max 3 OTP/hour per phone
- [x] Google SSO → account created/linked

### Order Flow (Happy Path)
- [x] Browse restaurant → add items → cart → checkout → pay → track → delivered
- [x] Apply promo code → discount calculated correctly
- [x] Multiple items from same restaurant → single order
- [x] Order total: subtotal + delivery_fee - discount = correct

### Payment
- [x] GoPay → redirect → callback → order confirmed
- [x] Payment timeout (15 min) → auto cancel → refund
- [x] Double payment prevention (idempotency key)

### Edge Cases
- [x] Restaurant closes mid-order → notification → refund
- [x] Menu item sold out after adding to cart → alert
- [x] Network loss during tracking → reconnect → resume
- [x] GPS unavailable → manual address input

name: CI Pipeline
on:
  pull_request:
    branches: [main, develop]
  push:
    branches: [main]

jobs:
  lint-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'npm'
      
      - run: npm ci
      
      - name: Lint
        run: npx expo lint
      
      - name: Type Check
        run: npx tsc --noEmit
      
      - name: Unit Tests
        run: npx vitest run --coverage
      
      - name: Build Check
        run: npx expo export --platform web

  deploy-preview:
    needs: lint-and-test
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}

# Pre-Deployment Checklist — MakanYuk

## Code Quality
- [ ] All tests passing (unit + integration + E2E)
- [ ] No TypeScript errors (tsc --noEmit)
- [ ] No ESLint warnings
- [ ] Code review approved by 2+ reviewers
- [ ] No console.log in production code

## Security
- [ ] .env NOT in git (check .gitignore)
- [ ] All API keys rotated from development
- [ ] HTTPS enforced
- [ ] CORS configured (allowlist domains only)
- [ ] Rate limiting enabled on all endpoints
- [ ] SQL injection prevention (Prisma parameterized)
- [ ] XSS prevention (sanitize user inputs)
- [ ] Snyk scan: 0 critical vulnerabilities

## Database
- [ ] Production migrations tested on staging
- [ ] Seed data loaded (categories, test restaurant)
- [ ] Database backup configured (daily)
- [ ] Connection pooling enabled

## Performance
- [ ] Images optimized (WebP, lazy loading)
- [ ] Bundle size < 2MB (app) / < 500KB (web)
- [ ] API response time < 200ms (p95)
- [ ] CDN configured for static assets

## Monitoring
- [ ] Sentry configured (error tracking)
- [ ] PostHog/Amplitude (analytics)
- [ ] Uptime monitoring (BetterStack/Upptime)
- [ ] Alert channels: Slack #prod-alerts

## Mobile Specific
- [ ] App Store screenshots & metadata ready
- [ ] Play Store listing complete
- [ ] Deep linking configured
- [ ] Push notification certificates valid
- [ ] Offline fallback screens implemented

# Master Tools Map — Vibe Coding SDLC 2026

╔══════════════════════════════════════════════════════════════════╗
║  PHASE 1 — BUSINESS REQUIREMENTS (BRS, BRD)                    ║
╠══════════════════════════════════════════════════════════════════╣
  ChatGPT / GPT-5       → Draft BRS & BRD dari brief singkat
  Gemini Deep Research  → Riset kompetitor, market sizing, trends
  Manus AI              → Auto-generate dokumen + spreadsheet + slides
  Notion AI             → Kolaborasi BRD real-time dengan stakeholder
  Perplexity Pro        → Fact-checking data bisnis + citations

╔══════════════════════════════════════════════════════════════════╗
║  PHASE 2 — PRODUCT REQUIREMENTS (PRD, User Stories, FSD)       ║
╠══════════════════════════════════════════════════════════════════╣
  ChatGPT / GPT-5       → PRD generation, user personas, acceptance criteria
  Gemini 3 Pro          → PRD dengan deep thinking + 1M context cross-ref
  DeepSeek V3.2         → FSD teknikal + acceptance criteria (termurah)
  Cursor Composer       → Generate PRD.md langsung di codebase
  Notion AI             → User story boards + sprint planning
  Linear / Jira         → Issue tracking dari user stories

╔══════════════════════════════════════════════════════════════════╗
║  PHASE 3 — TECHNICAL DESIGN (Architecture, ERD, API, Diagrams) ║
╠══════════════════════════════════════════════════════════════════╣
  Cursor AI             → Generate architecture.md, schema.prisma, API spec
  DeepSeek V3.2         → ERD + SQL schema (thinking mode, sangat murah)
  ChatGPT Canvas        → Sequence diagram, state machine (visual iterate)
  Mermaid.live          → Render ERD, flowchart, sequence dari kode
  dbdiagram.io          → Visual ERD builder, export SQL, team collab
  Eraser.io             → Architecture + sequence diagram AI-assisted
  Supabase Studio       → Visual table editor + auto-generated types
  Prisma Studio         → Schema management + visual browser

╔══════════════════════════════════════════════════════════════════╗
║  PHASE 4 — UI/UX DESIGN (Design System, Wireframes, Mockups)   ║
╠══════════════════════════════════════════════════════════════════╣
  Figma                 → Design system, hi-fi mockups, prototyping (#1)
  v0.dev (Vercel)       → Prompt → React + Tailwind UI components
  Bolt.new              → Prompt → full-stack app + instant preview
  Lovable               → Prompt → polished app + Supabase built-in
  Excalidraw            → Quick wireframes, hand-drawn style, free
  Whimsical             → Wireframes + flowcharts + mind maps
  tldraw / makereal     → Sketch wireframe → AI generate working UI
  Galileo AI            → Text → hi-fi UI mockup (Figma-compatible)

╔══════════════════════════════════════════════════════════════════╗
║  PHASE 5 — AI AGENT CONFIG (CLAUDE.md, .cursorrules, AGENTS.md)║
╠══════════════════════════════════════════════════════════════════╣
  Cursor AI             → .cursorrules, Composer, Background Agents ($20/mo)
  Cline (VS Code)       → Plan/Act, MCP, BYOK any model (open-source)
  Windsurf/Antigravity  → .windsurfrules, Cascade, multi-agent parallel
  Kilo Code             → AGENTS.md, Memory Bank, 500+ models (open-source)
  Claude Code           → CLAUDE.md native, Figma MCP ($20-200/mo)
  GitHub Copilot        → copilot-instructions.md, agent mode ($10/mo)
  Qwen Code             → Terminal agent, 1000 req/hari gratis
  Devin AI              → Autonomous engineer, full environment

╔══════════════════════════════════════════════════════════════════╗
║  PHASE 6 — PROJECT SCAFFOLD (Structure, .env, Config)          ║
╠══════════════════════════════════════════════════════════════════╣
  Cursor Composer       → Multi-file scaffold, config generation
  Bolt.new              → Instant full-stack scaffold + package.json
  Lovable               → Auto-setup Supabase + Shadcn + .env
  v0.dev                → Generate Next.js components + Tailwind config
  create-t3-app         → TypeScript + Prisma + tRPC + Tailwind scaffold
  Supabase CLI          → Database migrations, Edge Functions, types

╔══════════════════════════════════════════════════════════════════╗
║  PHASE 7 — TESTING & QA (Test Plan, Unit, E2E, UAT)            ║
╠══════════════════════════════════════════════════════════════════╣
  Cursor / Cline        → Auto-generate tests dari kode yang ada
  ChatGPT / Codex       → Test plan dari PRD, security audit checklist
  DeepSeek V3.2         → Bulk test generation + edge case (termurah)
  Playwright Codegen    → Record → auto-generate E2E test code
  Vitest                → Unit + integration testing (Vite-native)
  Maestro               → Mobile E2E testing (React Native / Flutter)
  GitHub Copilot        → Inline test suggestions + tab-complete

╔══════════════════════════════════════════════════════════════════╗
║  PHASE 8 — DEPLOYMENT & OPS (CI/CD, Monitoring, Docs)          ║
╠══════════════════════════════════════════════════════════════════╣
  GitHub Actions        → CI/CD pipeline, auto lint/test/build/deploy
  Vercel                → Auto deploy Next.js, preview per PR, edge
  Supabase              → Managed Postgres + Auth + Storage + Realtime
  Netlify               → Alternative deploy, serverless functions
  Railway               → Backend hosting, database, auto-deploy
  Sentry               → Error tracking + performance monitoring
  PostHog              → Product analytics, feature flags, session replay
  BetterStack           → Uptime monitoring + incident management