Gigih_Palatangara/STRAPS_LOCALHOST
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
STRAPS_LOCALHOST/DOKUMENTASI_APP_FOLDER.md

10 KiB
Raw Permalink Blame History

Dokumentasi Struktur Folder app/

Gambaran Umum

Folder app/ adalah direktori utama aplikasi Next.js yang menggunakan App Router. Folder ini berisi semua halaman, API routes, dan komponen utama aplikasi pelatihan kebugaran "Straps".

📁 Struktur Direktori

1. api/ - API Routes

Folder yang berisi semua endpoint backend untuk komunikasi antara client dan server.

api/auth/[...nextauth]/

  • Fungsi: Menangani autentikasi pengguna menggunakan NextAuth.js
  • Endpoint: /api/auth/*
  • Fitur: Login, logout, session management

api/clients/

  • Fungsi: Endpoint untuk mengelola data klien
  • Operasi: CRUD operations untuk client data

api/coach/link-client/

  • File: route.ts
  • Fungsi: Menghubungkan pelatih (coach) dengan klien mereka
  • Method: POST untuk membuat hubungan coach-client

api/logs/

  • File: route.ts
  • Fungsi: Mencatat dan mengambil log aktivitas training
  • Method: GET (mengambil logs), POST (membuat log baru)

api/menus/

  • File: route.ts
  • Fungsi: Mengelola menu latihan (workout programs)
  • Method: GET (semua menu), POST (buat menu baru)
api/menus/[id]/
  • File: route.ts
  • Fungsi: Operasi pada menu spesifik berdasarkan ID
  • Method: GET (detail menu), PUT (update), DELETE (hapus)

api/recap/

  • File: route.ts
  • Fungsi: Menyimpan dan mengambil ringkasan latihan (training recap)
  • Method: GET (semua recap), POST (simpan recap baru)
  • Data: Termasuk skor form, detail per-rep, dan statistik latihan
api/recap/[id]/
  • File: route.ts
  • Fungsi: Mengakses recap latihan spesifik
  • Method: GET (detail recap), DELETE (hapus recap)

api/register/

  • File: route.ts
  • Fungsi: Registrasi pengguna baru
  • Method: POST untuk membuat akun baru (Coach atau Client)
  • Validasi: Email unik, password hashing

api/status/

  • Fungsi: Health check endpoint untuk monitoring aplikasi
  • Method: GET untuk cek status server

api/users/

  • File: route.ts
  • Fungsi: Mengelola data pengguna
  • Method: GET (daftar users), POST (buat user)
api/users/[id]/
  • File: route.ts
  • Fungsi: Operasi pada user spesifik
  • Method: GET (detail user), PUT (update), DELETE (hapus)

2. client/ - Halaman Klien

Folder untuk semua halaman yang diakses oleh pengguna dengan role "Client".

client/page.tsx

  • Route: /client
  • Fungsi: Dashboard utama klien
  • Fitur:
    • Menampilkan program latihan yang ditugaskan
    • Tombol navigasi ke mode Training, Free Mode, dan Monitor
    • Informasi pelatih yang ditugaskan

client/free/

client/free/page.tsx
  • Route: /client/free
  • Fungsi: Mode latihan bebas (Personal Menu)
  • Fitur:
    • Builder untuk membuat menu latihan custom
    • Sistem berbasis "Round" (Set grouping)
    • Pilihan exercise terbatas ke 7 latihan inti
    • Penyimpanan ke localStorage
    • Duplicate round untuk efisiensi

client/monitor/

client/monitor/page.tsx
  • Route: /client/monitor
  • Fungsi: Monitor real-time untuk form exercise
  • Fitur:
    • Live camera feed dengan pose detection
    • Visual feedback untuk form quality
    • Counter repetisi real-time
    • Tidak ada target/assignment

client/training/

client/training/page.tsx
  • Route: /client/training
  • Fungsi: Mode latihan utama dengan program assigned
  • Fitur:
    • AI-powered form tracking per rep
    • Automatic rep counting
    • Rest timer antar set
    • Training Recap:
      • Summary statistik (total sets, total reps)
      • Table detail per set dengan:
        • Form score average
        • Expandable per-rep breakdown
        • Grade labels (Excellent/Good/Fair/Needs Improvement)
        • Feedback text spesifik per rep (e.g., "Knees Inward")
    • Toggle antara Assigned Program dan Personal Menu
    • Reset functionality

3. coach/ - Halaman Pelatih

Folder untuk semua halaman yang diakses oleh pengguna dengan role "Coach".

coach/dashboard/

coach/dashboard/page.tsx
  • Route: /coach/dashboard
  • Fungsi: Dashboard utama pelatih
  • Fitur:
    • Daftar klien yang terhubung
    • Link Client functionality
    • Navigasi ke menu management

coach/menu/

Folder untuk manajemen menu latihan.

coach/menu/[id]/
  • Route: /coach/menu/[id]
  • Fungsi: Edit menu latihan yang sudah ada
  • Fitur:
    • Form editor untuk menu details
    • Exercise composer dengan round system
    • Preview menu structure
    • Update dan delete operations
coach/menu/new/
  • File: page.tsx
  • Route: /coach/menu/new
  • Fungsi: Membuat menu latihan baru
  • Fitur:
    • Round-based exercise builder
    • Input untuk:
      • Nama menu
      • Target reps per exercise
      • Weight (beban)
      • Rest time
    • Pilihan 7 exercise core
    • Duplicate round
    • Group sets by exercise
    • Auto-save to database

coach/recap/

coach/recap/[id]/
  • Route: /coach/recap/[id]
  • Fungsi: Melihat detail recap latihan klien
  • Fitur:
    • Visualisasi statistik klien
    • Form quality analysis
    • Historical performance tracking

4. debug/

  • Fungsi: Halaman untuk debugging dan testing
  • Status: Development/testing only
  • Akses: Biasanya disabled di production

5. generated/ - Prisma Client

Folder yang di-generate otomatis oleh Prisma ORM.

generated/client/

  • File-file utama:

    • client.ts - Prisma Client instance
    • browser.ts - Browser-compatible client
    • models.ts - Type definitions untuk database models
    • enums.ts - Enum definitions
    • commonInputTypes.ts - Input type definitions
    • libquery_engine-*.so.node - Native query engine binary

  • Folder internal/: Internal Prisma helpers

  • Folder models/: Model type definitions

PENTING: ❌ Jangan edit manual, akan di-regenerate saat prisma generate

6. lib/ (Symlink)

  • Fungsi: Symlink ke /lib di root project
  • Isi: Helper functions dan utility libraries
  • Contoh isi:
    • pose/HARCore.ts - Human Activity Recognition core
    • pose/RehabCore.ts - Exercise recognition dan rep counting
    • Form analysis algorithms

7. login/

  • File: Kemungkinan page.tsx (route file)
  • Route: /login
  • Fungsi: Halaman login untuk semua pengguna
  • Fitur:
    • Form email dan password
    • Authentication via NextAuth
    • Redirect ke dashboard sesuai role

8. register/

  • File: page.tsx
  • Route: /register
  • Fungsi: Halaman registrasi pengguna baru
  • Fitur:
    • Form input: nama, email, password
    • Pilihan role (Coach/Client)
    • Validasi input
    • Submit ke /api/register

📄 File Konfigurasi Root

favicon.ico

  • Fungsi: Icon aplikasi yang muncul di browser tab
  • Format: ICO file
  • Size: 25.9 KB

globals.css

  • Fungsi: Global stylesheet untuk seluruh aplikasi
  • Isi:
    • Reset CSS
    • Tailwind CSS directives (@tailwind base, components, utilities)
    • Custom color variables
    • Global typography styles
  • Size: ~773 bytes

layout.tsx

  • Fungsi: Root layout component (App-wide wrapper)
  • Fitur:
    • HTML structure (<html>, <body>)
    • Metadata configuration
    • Font loading (biasanya)
    • Global providers (Session, Theme, etc.)
  • Applies to: Semua route di aplikasi
  • Size: ~757 bytes

page.tsx

  • Route: / (Homepage)
  • Fungsi: Landing page aplikasi
  • Fitur:
    • Welcome screen
    • Login/Register CTA
    • Informasi aplikasi
    • Redirect logic berdasarkan auth status
  • Size: ~15 KB

🔑 Poin Penting untuk Dokumentasi

Routing Convention (Next.js App Router)

  • page.tsx → Halaman yang dapat diakses
  • route.ts → API endpoint
  • layout.tsx → Layout wrapper
  • [id]/ → Dynamic route parameter
  • [...slug]/ → Catch-all route

Role-Based Access

  • /client/* → Hanya untuk role "Client"
  • /coach/* → Hanya untuk role "Coach"
  • /api/* → Backend endpoints (internal)

Key Features

  1. AI Form Analysis: Real-time pose detection dan rep counting
  2. Per-Rep Tracking: Detail skor form untuk setiap repetisi
  3. Round System: Exercise grouping untuk efisiensi workout builder
  4. Training Recap: Dashboard komprehensif pasca-latihan

Tech Stack

  • Framework: Next.js 16 (App Router)
  • Database: PostgreSQL via Prisma ORM
  • Auth: NextAuth.js
  • UI: TailwindCSS
  • AI: MediaPipe Pose Landmarker
  • Language: TypeScript

📊 Diagram Struktur

app/
├── api/                    # Backend Endpoints
│   ├── auth/
│   ├── coach/
│   ├── logs/
│   ├── menus/
│   ├── recap/
│   ├── register/
│   └── users/
├── client/                 # Client Dashboard & Features
│   ├── free/              # Personal Menu Builder
│   ├── monitor/           # Live Form Monitor
│   ├── training/          # Assigned Training Mode
│   └── page.tsx           # Client Dashboard
├── coach/                  # Coach Dashboard & Tools
│   ├── dashboard/
│   ├── menu/
│   └── recap/
├── generated/             # Prisma Auto-Generated (DO NOT EDIT)
├── lib/                   # Utilities (Symlink)
├── login/                 # Login Page
├── register/              # Registration Page
├── favicon.ico
├── globals.css            # Global Styles
├── layout.tsx             # Root Layout
└── page.tsx               # Homepage

💡 Tips Maintenance

  1. Jangan edit folder generated/ secara manual
  2. Run prisma generate setelah schema change
  3. API routes mengikuti REST convention
  4. Per-rep data disimpan dalam struktur nested di recap
  5. Feedback text di-capture frame-by-frame lalu dianalisa untuk dominan message