Fitaru

Fitaru Tech Stack & Project Structure

Keputusan tech stack Fitaru: Flutter mobile app, Next.js admin CMS, Supabase, struktur project, deployment, dan development order.

55 dari 57 materi Project fitaruflutternextjssupabase

Fitaru Tech Stack and Project Structure

Dokumen ini menetapkan tech stack final dan struktur project untuk MVP Fitaru.

Final Tech Stack

Mobile App

Framework: Flutter

Target:

  • Android
  • iOS

Alasan:

  • Satu codebase untuk Android dan iOS
  • UI mobile bisa konsisten
  • Cocok untuk aplikasi tracking harian
  • Performa baik untuk dashboard, form, dan chart
  • Ekosistem package cukup matang

Package rekomendasi:

  • flutter_riverpod untuk state management
  • go_router untuk routing
  • dio untuk HTTP client
  • freezed dan json_serializable untuk model
  • fl_chart untuk chart progress
  • shared_preferences atau flutter_secure_storage untuk token/session
  • image_picker untuk foto makanan/progress nanti
  • intl untuk date formatting

Admin CMS

Framework: Next.js

Target:

  • Web admin dashboard

Alasan:

  • Cocok untuk dashboard CMS
  • Routing dan layout admin mudah dibuat
  • Bisa server-side rendering bila dibutuhkan
  • Mudah integrasi Supabase/API
  • Ekosistem UI dan table kuat

Package rekomendasi:

  • Next.js App Router
  • TypeScript
  • Tailwind CSS
  • TanStack Query
  • TanStack Table
  • React Hook Form
  • Zod
  • Recharts
  • Lucide React

Backend/API

Rekomendasi MVP:

Next.js API Routes atau Route Handlers untuk admin dan shared API

Alasan:

  • Lebih cepat untuk MVP
  • Admin CMS dan API bisa dalam satu project
  • Deployment lebih sederhana
  • Cocok dengan Supabase

Alternatif jika produk tumbuh:

  • NestJS API terpisah
  • Fastify API terpisah
  • Hono API ringan

Untuk MVP, gunakan:

Next.js Admin CMS + API Routes
Flutter Mobile App -> API Routes / Supabase

Database & Auth

Supabase PostgreSQL

Dipakai untuk:

  • Auth user
  • Auth admin
  • Database utama
  • Row Level Security
  • Storage untuk foto makanan/progress

Catatan:

  • Mobile app bisa memakai API backend untuk logic utama.
  • Untuk beberapa data public seperti artikel published dan reference data, bisa lewat API backend atau Supabase client dengan RLS.
  • Admin CMS sebaiknya lewat server-side API agar permission lebih aman.

Storage

Supabase Storage

Bucket awal:

  • meal-photos
  • progress-photos
  • article-thumbnails

Untuk MVP, upload foto bisa P1/P2 jika ingin lebih cepat launch.

Notifications

MVP awal:

  • Local notification di Flutter untuk reminder sederhana

Tahap berikutnya:

  • Firebase Cloud Messaging untuk push notification campaign dari admin CMS

Analytics

MVP awal:

  • Basic internal metrics dari database

Tahap berikutnya:

  • PostHog
  • Firebase Analytics
  • Supabase analytics
Flutter Mobile App
        |
        | REST API / Supabase Auth
        v
Next.js API Layer
        |
        | Supabase client/server SDK
        v
Supabase PostgreSQL + Storage
        ^
        |
Next.js Admin CMS

Monorepo Structure

Rekomendasi struktur repo:

fitaru/
├── fitaru-mobile/
│   └── Flutter app
├── fitaru-admin-web/
│   └── Next.js admin CMS + API routes
├── packages/
│   ├── api-contracts/
│   │   └── Shared API types and schemas
│   └── design-tokens/
│       └── Shared colors, spacing, naming docs
├── supabase/
│   ├── migrations/
│   ├── seed/
│   └── policies/
├── fitaru-docs/
│   ├── product/
│   ├── design/
│   ├── api/
│   └── planning/
├── .env.example
├── README.md
└── package.json

Untuk project awal yang sederhana, struktur bisa dibuat seperti ini:

fitaru/
├── fitaru-mobile/
├── fitaru-admin-web/
├── supabase/
├── fitaru-docs/
└── README.md

Rekomendasi saya: gunakan struktur sederhana dulu agar cepat mulai.

Flutter Mobile Structure

fitaru-mobile/
├── lib/
│   ├── app/
│   │   ├── app.dart
│   │   ├── router.dart
│   │   └── theme.dart
│   ├── core/
│   │   ├── config/
│   │   ├── network/
│   │   ├── storage/
│   │   ├── utils/
│   │   └── widgets/
│   ├── features/
│   │   ├── auth/
│   │   ├── onboarding/
│   │   ├── profile_setup/
│   │   ├── dashboard/
│   │   ├── meal_log/
│   │   ├── exercise_log/
│   │   ├── weight_log/
│   │   ├── water_log/
│   │   ├── progress/
│   │   ├── tips/
│   │   └── feedback/
│   └── main.dart
├── assets/
│   ├── images/
│   └── icons/
├── test/
├── pubspec.yaml
└── README.md

Flutter Feature Structure

Setiap feature bisa memakai struktur:

feature_name/
├── data/
│   ├── models/
│   ├── repositories/
│   └── services/
├── domain/
│   └── entities/
├── presentation/
│   ├── screens/
│   ├── widgets/
│   └── controllers/
└── feature_name.dart

Untuk MVP, jangan terlalu kompleks. Jika feature kecil, boleh disederhanakan:

dashboard/
├── dashboard_screen.dart
├── dashboard_controller.dart
├── dashboard_repository.dart
└── dashboard_models.dart

Next.js Admin Structure

fitaru-admin-web/
├── app/
│   ├── (auth)/
│   │   └── login/
│   │       └── page.tsx
│   ├── (dashboard)/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── users/
│   │   ├── content/
│   │   ├── food-database/
│   │   ├── exercise-database/
│   │   ├── notifications/
│   │   ├── feedback/
│   │   └── settings/
│   └── api/
│       └── v1/
│           ├── admin/
│           ├── dashboard/
│           ├── meal-logs/
│           ├── exercise-logs/
│           ├── weight-logs/
│           ├── water-logs/
│           ├── articles/
│           ├── food-items/
│           └── exercise-items/
├── components/
│   ├── ui/
│   ├── layout/
│   ├── charts/
│   └── forms/
├── lib/
│   ├── supabase/
│   ├── auth/
│   ├── api/
│   ├── permissions/
│   ├── validations/
│   └── utils/
├── styles/
├── public/
├── package.json
└── README.md

Admin CMS Pages

MVP pages:

  • /login
  • /
  • /users
  • /content
  • /food-database
  • /exercise-database
  • /feedback
  • /settings

P2:

  • /notifications

API Route Structure

Mobile API:

/api/v1/me
/api/v1/me/profile
/api/v1/me/targets
/api/v1/dashboard/today
/api/v1/meal-logs
/api/v1/exercise-logs
/api/v1/weight-logs
/api/v1/water-logs
/api/v1/progress/summary
/api/v1/progress/weight-chart
/api/v1/articles
/api/v1/food-items
/api/v1/exercise-items
/api/v1/feedback

Admin API:

/api/v1/admin/overview
/api/v1/admin/users
/api/v1/admin/articles
/api/v1/admin/food-items
/api/v1/admin/exercise-items
/api/v1/admin/notifications
/api/v1/admin/feedback
/api/v1/admin/settings

Environment Variables

Root .env.example:

SUPABASE_URL=
SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
API_BASE_URL=

Flutter .env:

API_BASE_URL=
SUPABASE_URL=
SUPABASE_ANON_KEY=

Next.js .env.local:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

Deployment Plan

Mobile:

  • Android internal testing
  • iOS TestFlight

Admin CMS:

  • Vercel

Database:

  • Supabase hosted project

Storage:

  • Supabase Storage

Development Order

Recommended order:

  1. Create repo structure
  2. Move docs into fitaru-docs/
  3. Setup Supabase migration
  4. Scaffold Next.js admin
  5. Scaffold Flutter mobile
  6. Build shared design tokens manually in both projects
  7. Implement auth
  8. Implement mobile dashboard and tracking
  9. Implement admin CMS overview and content management

Architecture Decisions

Decision 1: Flutter for mobile

Accepted.

Reason:

  • Better fit for Android/iOS app experience
  • Fast UI iteration
  • Strong mobile ecosystem

Decision 2: Next.js for admin CMS

Accepted.

Reason:

  • Great for web dashboard
  • Easy API route integration
  • Good deployment story

Decision 3: Supabase for database/auth/storage

Recommended.

Reason:

  • Speeds up MVP
  • Works well with Flutter and Next.js
  • PostgreSQL supports reporting/admin dashboard

Decision 4: API inside Next.js for MVP

Recommended.

Reason:

  • Simpler deployment
  • Faster MVP development
  • Can be extracted into standalone backend later

Next Step

Setelah tech stack dan struktur project ini disepakati, langkah berikutnya adalah membuat scaffold folder project awal.