# Dokumentasi File Root Level - Straps Dev

## Gambaran Umum

File-file di root level workspace berisi konfigurasi project, dependencies, build settings, dan utility scripts untuk development dan production.

---

## 📁 Struktur File Root

```
straps-dev/
├── .env                          # Environment variables (secrets)
├── .gitignore                    # Git ignore rules
├── README.md                     # Project documentation
├── package.json                  # NPM dependencies & scripts
├── package-lock.json             # Locked dependency versions
├── tsconfig.json                 # TypeScript compiler config
├── next.config.ts                # Next.js configuration
├── postcss.config.mjs            # PostCSS (Tailwind) config
├── eslint.config.mjs             # ESLint linting rules
├── prisma.config.ts              # Prisma configuration
├── next-env.d.ts                 # Next.js type definitions (auto-generated)
├── tsconfig.tsbuildinfo          # TypeScript incremental build cache (auto-generated)
├── debug_menu.js                 # Quick database inspection script
├── integrated.js                 # Legacy fall detection + rehab system (100KB!)
├── exercise_rules.pdf            # Exercise configuration documentation
└── DOKUMENTASI_*.md              # Project documentation files (generated)
```

---

## 🔧 Configuration Files

### **1. `package.json`** ⭐

**Path**: `/package.json`

**Fungsi**: NPM package configuration - dependencies, scripts, metadata

**Size**: ~1.3 KB

#### **Project Metadata**:

```json
{
	"name": "straps-dev",
	"version": "0.1.0",
	"private": true
}
```

#### **NPM Scripts**:

```json
{
	"scripts": {
		"dev": "concurrently \"next dev --webpack\" \"prisma studio\"",
		"build": "prisma generate && next build --webpack",
		"start": "next start",
		"lint": "eslint",
		"db:studio": "prisma studio"
	}
}
```

**Command Breakdown**:
| Command | Description | Use Case |
|---------|-------------|----------|
| `npm run dev` | Start dev server + Prisma Studio | Development (hot reload) |
| `npm run build` | Generate Prisma Client + Build production | Pre-deployment |
| `npm start` | Run production server | Production mode |
| `npm run lint` | Run ESLint | Code quality check |
| `npm run db:studio` | Open Prisma Studio only | Database management |

**Key Features**:

- ✅ `concurrently` runs dev server + Prisma Studio simultaneously
- ✅ `--webpack` flag for webpack mode (vs Turbopack)
- ✅ Prisma Client auto-generation before build

#### **Dependencies** (Production):

```json
{
	"@mediapipe/pose": "^0.5.1675469404", // Legacy pose detection
	"@mediapipe/tasks-vision": "^0.10.22", // MediaPipe AI
	"@prisma/client": "^6.19.1", // Database ORM
	"@tensorflow-models/pose-detection": "^2.1.3", // TensorFlow pose
	"@tensorflow/tfjs": "^4.22.0", // TensorFlow.js
	"axios": "^1.13.2", // HTTP client
	"bcryptjs": "^3.0.3", // Password hashing
	"framer-motion": "^12.23.26", // Animations
	"lucide-react": "^0.562.0", // Icon library
	"next": "^16.1.1", // Next.js framework
	"next-auth": "^5.0.0-beta.30", // Authentication
	"react": "^19.2.3", // React 19
	"zod": "^4.2.1" // Validation
}
```

**Tech Stack**:

- **Frontend**: React 19 + Next.js 16
- **AI**: MediaPipe + TensorFlow.js
- **Database**: PostgreSQL + Prisma
- **Auth**: NextAuth v5 (beta)
- **Styling**: Tailwind CSS v4

#### **DevDependencies**:

```json
{
	"@tailwindcss/postcss": "^4", // Tailwind v4
	"@types/node": "^20", // Node types
	"@types/react": "^19", // React types
	"concurrently": "^9.2.1", // Run multiple commands
	"eslint": "^9", // Linting
	"tsx": "^4.21.0", // TypeScript executor
	"typescript": "^5" // TypeScript compiler
}
```

#### **Prisma Seed Config**:

```json
{
	"prisma": {
		"seed": "npx tsx prisma/seed.ts"
	}
}
```

- Auto-runs `seed.ts` after `prisma migrate reset`

---

### **2. `next.config.ts`** ⚙️

**Path**: `/next.config.ts`

**Fungsi**: Next.js build and webpack configuration

**Size**: ~1.2 KB

#### **Code**:

```typescript
const nextConfig = {
	// Transpile ESM packages to CommonJS
	transpilePackages: [
		"@tensorflow-models/pose-detection",
		"@/app/generated/client",
	],

	experimental: {
		esmExternals: "loose", // Allow mixing CJS/ESM
	},

	webpack: (config: any) => {
		// Alias @mediapipe/pose to custom shim
		const path = require("path");
		config.resolve.alias["@mediapipe/pose"] = path.resolve(
			__dirname,
			"lib/mediapipe-shim.js",
		);

		// Extension alias for JS/TS interop
		config.resolve.extensionAlias = {
			".js": [".ts", ".tsx", ".js", ".jsx"],
		};
		return config;
	},

	// CORS headers for API routes
	async headers() {
		return [
			{
				source: "/api/:path*",
				headers: [
					{ key: "Access-Control-Allow-Origin", value: "*" },
					{
						key: "Access-Control-Allow-Methods",
						value: "GET, POST, PUT, DELETE, OPTIONS",
					},
					{
						key: "Access-Control-Allow-Headers",
						value: "Content-Type, Authorization",
					},
				],
			},
		];
	},
};
```

**Key Features**:

1. **MediaPipe Shim**: Custom polyfill untuk resolve MediaPipe compatibility
2. **ESM Transpilation**: Convert pose-detection library to CommonJS
3. **CORS Enabled**: Allow external API requests
4. **Extension Alias**: Support `.ts` imports dengan `.js` extension

**Why Needed**:

- MediaPipe has module resolution issues di browser
- Pose detection library is ESM-only, Next.js needs CommonJS
- API routes accessible dari external domains

---

### **3. `tsconfig.json`** 📘

**Path**: `/tsconfig.json`

**Fungsi**: TypeScript compiler configuration

**Size**: ~663 bytes

#### **Code**:

```json
{
	"compilerOptions": {
		"target": "ES2017", // Compile to ES2017 (async/await support)
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true, // Allow .js files
		"skipLibCheck": true, // Skip type checking node_modules
		"strict": true, // Strict type checking
		"noEmit": true, // No JS output (Next.js handles compilation)
		"esModuleInterop": true,
		"module": "esnext",
		"moduleResolution": "node",
		"resolveJsonModule": true, // Import JSON files
		"isolatedModules": true, // Each file as separate module
		"jsx": "react-jsx", // React 19 JSX transform
		"incremental": true, // Faster rebuilds
		"plugins": [{ "name": "next" }], // Next.js TypeScript plugin
		"paths": {
			"@/*": ["./*"] // Path alias: @/lib → /lib
		}
	},
	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
	"exclude": ["node_modules"]
}
```

**Important Settings**:

- ✅ `strict: true` - Maximum type safety
- ✅ `noEmit: true` - Next.js handles compilation
- ✅ `paths: { "@/*": ["./*"] }` - Import shorthand
- ✅ `incremental: true` - Faster rebuilds (uses `.tsbuildinfo`)

**Path Alias Usage**:

```typescript
// Instead of:
import { HARCore } from "../../../lib/pose/HARCore";

// Use:
import { HARCore } from "@/lib/pose/HARCore";
```

---

### **4. `postcss.config.mjs`** 🎨

**Path**: `/postcss.config.mjs`

**Fungsi**: PostCSS configuration untuk Tailwind CSS v4

**Size**: ~94 bytes

#### **Code**:

```javascript
const config = {
	plugins: {
		"@tailwindcss/postcss": {},
	},
};

export default config;
```

**Purpose**:

- Enable Tailwind CSS v4 processing
- Auto-process `globals.css` dengan Tailwind directives

**Tailwind v4 Changes**:

- No more `tailwind.config.js`
- All config via PostCSS
- Faster build times

---

### **5. `eslint.config.mjs`** ✅

**Path**: `/eslint.config.mjs`

**Fungsi**: ESLint code quality rules

**Size**: ~465 bytes

#### **Code**:

```javascript
import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";

const eslintConfig = defineConfig([
	...nextVitals, // Next.js best practices
	...nextTs, // TypeScript rules
	globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
]);

export default eslintConfig;
```

**Rules Applied**:

1. **Next.js Core Web Vitals**: Performance, accessibility, SEO
2. **TypeScript**: Type-aware linting
3. **Ignores**: Build artifacts, generated files

**Run Lint**:

```bash
npm run lint
```

---

### **6. `prisma.config.ts`** 🗄️

**Path**: `/prisma.config.ts`

**Fungsi**: Prisma ORM configuration (alternative to `schema.prisma` for programmatic config)

**Size**: ~527 bytes

#### **Code**:

```typescript
import "dotenv/config";
import { defineConfig } from "prisma/config";

export default defineConfig({
	schema: "prisma/schema.prisma",
	migrations: {
		path: "prisma/migrations",
	},
	datasource: {
		url: process.env["DATABASE_URL"]!,
	},
	// @ts-expect-error - seed is valid at runtime
	seed: {
		command: "npx tsx prisma/seed.ts",
	},
});
```

**Note**: Ini adalah **optional config file**

- Prisma masih menggunakan `schema.prisma` sebagai source of truth
- File ini untuk advanced configuration (custom generators, etc.)
- Tidak wajib untuk basic usage

---

### **7. `.gitignore`** 🚫

**Path**: `/.gitignore`

**Fungsi**: Git ignore rules untuk exclude files dari version control

**Size**: ~503 bytes

#### **Key Exclusions**:

```gitignore
# Dependencies
/node_modules

# Build outputs
/.next/
/out/
/build

# Environment variables
.env*

# TypeScript
*.tsbuildinfo
next-env.d.ts

# Prisma generated
/app/generated/prisma
```

**Why**:

- ✅ `node_modules` - Too large, regenerate via `npm install`
- ✅ `.next/` - Build cache, regenerate on `npm run dev`
- ✅ `.env` - **CRITICAL**: Contains secrets (DATABASE_URL, API keys)
- ✅ `tsbuildinfo` - TypeScript cache, auto-regenerated

**Security**:

- ❌ **NEVER** commit `.env` to Git
- ✅ Provide `.env.example` with placeholder values

---

###**8. `.env`** 🔐
**Path**: `/.env`

**Fungsi**: Environment variables (secrets, config)

**Size**: ~123 bytes

**Status**: ⚠️ **CONFIDENTIAL** - Not shown in docs

**Expected Contents**:

```bash
# Database
DATABASE_URL="postgresql://user:pass@localhost:5432/straps_db"

# NextAuth (if used)
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"

# API Keys (if any)
NEXT_PUBLIC_API_URL="http://localhost:3000/api"
```

**Best Practices**:

1. ✅ Use `NEXT_PUBLIC_` prefix for client-side variables
2. ✅ Create `.env.example` dengan placeholder values
3. ❌ Never commit `.env` to Git
4. ✅ Use different `.env` untuk dev/staging/production

---

## 📄 Auto-Generated Files

### **9. `next-env.d.ts`** (Auto-Generated)

**Path**: `/next-env.d.ts`

**Fungsi**: Next.js TypeScript type definitions

**Size**: ~251 bytes

**Content**:

```typescript
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs for more information.
```

**Purpose**:

- Enable TypeScript autocomplete untuk Next.js APIs
- Auto-regenerated oleh Next.js
- ❌ **DO NOT EDIT**

---

### **10. `tsconfig.tsbuildinfo`** (Auto-Generated)

**Path**: `/tsconfig.tsbuildinfo`

**Fungsi**: TypeScript incremental build cache

**Size**: **~170 KB** (Large!)

**Purpose**:

- Speed up TypeScript compilation
- Stores type information dari previous builds
- Safe to delete (will regenerate)

**When to Delete**:

```bash
# If TypeScript acting weird
rm tsconfig.tsbuildinfo
npm run dev  # Will regenerate
```

---

## 🛠️ Utility Scripts

### **11. `debug_menu.js`** 🐛

**Path**: `/debug_menu.js`

**Fungsi**: Quick script untuk inspect latest menu dari database

**Size**: ~706 bytes

#### **Code**:

```javascript
const { PrismaClient } = require("./app/generated/client");
const prisma = new PrismaClient();

async function main() {
	const menus = await prisma.training_menus.findMany({
		orderBy: { id: "desc" },
		take: 1,
	});

	if (menus.length > 0) {
		console.log("Latest Menu:", JSON.stringify(menus[0], null, 2));
		const ex = menus[0].exercises;
		if (typeof ex === "string") {
			console.log("Exercises (parsed):", JSON.parse(ex));
		} else {
			console.log("Exercises (raw):", ex);
		}
	} else {
		console.log("No menus found.");
	}
}

main()
	.catch((e) => console.error(e))
	.finally(async () => await prisma.$disconnect());
```

**How to Run**:

```bash
node debug_menu.js
```

**Output**:

```json
Latest Menu: {
  "id": 1,
  "name": "Upper Body Day 1",
  "exercises": [
    { "name": "Bicep Curl", "reps": 10, "weight": 15 }
  ],
  ...
}
```

**Use Cases**:

- ✅ Verify menu saved correctly
- ✅ Debug JSON parsing issues
- ✅ Quick database inspection tanpa Prisma Studio

---

### **12. `integrated.js`** 🏋️ (Legacy)

**Path**: `/integrated.js`

**Fungsi**: Legacy fall detection + rehabilitation exercise system

**Size**: **~100 KB** (Very Large!)

**Status**: ⚠️ **DEPRECATED** - Superseded by TypeScript implementation

**Content**: 3,380 lines of JavaScript

- Fall detection using MediaPipe
- 7 rehabilitation exercises
- ROI (Region of Interest) for sleeping detection
- Firebase integration
- Telegram alerts
- Form accuracy scoring
- Rehab mode workout queue

**Why So Large**:

- Contains entire UI logic
- Embedded exercise Config
- Firebase SDK imports
- Telegram integration
- Canvas drawing functions

**Current Usage**: Likely **NOT USED**

- Modern app uses `/lib/pose/` TypeScript modules
- Check if referenced anywhere:
  ```bash
  grep -r "integrated.js" app/
  ```

**Recommendation**:

- ✅ Archive to `/legacy/` folder
- ✅ Or delete if not referenced

---

### **13. `exercise_rules.pdf`** 📖

**Path**: `/exercise_rules.pdf`

**Fungsi**: Documentation of exercise configuration rules

**Size**: ~24 KB

**Content** (Likely):

- Explanation of `ExerciseRules.ts` config
- Angle thresholds untuk setiap exercise
- Form validation rules
- Diagrams/illustrations

**Use Case**:

- Reference untuk non-technical stakeholders
- Onboarding documentation
- Exercise configuration guide

**Recommendation**:

- Move to `/docs/` folder for better organization

---

## 📚 Documentation Files

### **14-18. `DOKUMENTASI_*.md`** 📝

**Path**: `/DOKUMENTASI_*.md`

**Files**:

1. `DOKUMENTASI_APP_FOLDER.md` (~10 KB)
2. `DOKUMENTASI_LIB_FOLDER.md` (~17 KB)
3. `DOKUMENTASI_PRISMA_FOLDER.md` (~17 KB)
4. `DOKUMENTASI_PUBLIC_FOLDER.md` (~12 KB)
5. `DOKUMENTASI_SCRIPTS_FOLDER.md` (~16 KB)

**Fungsi**: Project documentation dalam Bahasa Indonesia

**Total Size**: ~72 KB

**Created**: Recently generated for project documentation

**Content**: Comprehensive guides untuk each major folder

---

### **19. `README.md`** 📘

**Path**: `/README.md`

**Fungsi**: Project README (default Next.js template)

**Size**: ~1.5 KB

**Content**:

```markdown
This is a Next.js project bootstrapped with create-next-app.

## Getting Started

npm run dev

Open http://localhost:3000

## Learn More

- Next.js Documentation
- Learn Next.js tutorial

## Deploy on Vercel

[Link to Vercel deployment docs]
```

**Status**: ⚠️ **NEEDS UPDATE**

**Recommendation**: Replace with custom README:

```markdown
# Straps Fitness - AI-Powered Form Tracking

## Tech Stack

- Next.js 16 + React 19
- PostgreSQL + Prisma
- MediaPipe AI
- Tailwind CSS v4

## Quick Start

\`\`\`bash
npm install
npm run dev
\`\`\`

## Features

- Real-time form tracking
- Per-rep analysis
- Coach-client management
- Training recap dashboard

[... more details ...]
```

---

## 🔐 Security Checklist

### **✅ Safe to Commit**:

- `package.json`, `package-lock.json`
- `tsconfig.json`
- `next.config.ts`
- `postcss.config.mjs`
- `eslint.config.mjs`
- `.gitignore`
- `README.md`
- `DOKUMENTASI_*.md`

### **❌ NEVER Commit**:

- `.env` - **Contains DATABASE_URL, secrets**
- `node_modules/` - Too large
- `.next/` - Build artifacts
- `tsconfig.tsbuildinfo` - Cache file

### **⚠️ Sensitive Files**:

- `integrated.js` - May contain hardcoded API keys/tokens
  - **Action**: Review before committing

---

## 📊 File Size Summary

| File                   | Size       | Status  | Editable?     |
| ---------------------- | ---------- | ------- | ------------- |
| `.env`                 | 123 B      | Secret  | ✅ (config)   |
| `.gitignore`           | 503 B      | Config  | ✅            |
| `postcss.config.mjs`   | 94 B       | Config  | ⚠️ (rarely)   |
| `prisma.config.ts`     | 527 B      | Config  | ⚠️ (optional) |
| `eslint.config.mjs`    | 465 B      | Config  | ✅            |
| `tsconfig.json`        | 663 B      | Config  | ✅            |
| `debug_menu.js`        | 706 B      | Utility | ✅            |
| `package.json`         | 1.3 KB     | Config  | ✅            |
| `next.config.ts`       | 1.2 KB     | Config  | ✅            |
| `README.md`            | 1.5 KB     | Docs    | ✅            |
| `next-env.d.ts`        | 251 B      | Auto    | ❌            |
| `exercise_rules.pdf`   | 24 KB      | Docs    | ✅            |
| `integrated.js`        | **100 KB** | Legacy  | ⚠️ (archive)  |
| `tsconfig.tsbuildinfo` | **170 KB** | Cache   | ❌            |
| `package-lock.json`    | **293 KB** | Lock    | ❌ (auto)     |

**Total Configurable**: ~40 KB  
**Total Auto-Generated**: ~460 KB

---

## 🚀 Common Workflows

### **Workflow 1: Fresh Setup**

```bash
# Clone repo
git clone [repo-url]
cd straps-dev

# Install dependencies
npm install

# Create .env
cp .env.example .env
# Edit .env dengan DATABASE_URL

# Setup database
npx prisma migrate dev
npx prisma db seed

# Start dev server
npm run dev
```

---

### **Workflow 2: Add New Dependency**

```bash
# Add production dependency
npm install [package-name]

# Add dev dependency
npm install -D [package-name]

# Verify package.json updated
git diff package.json
```

---

### **Workflow 3: Production Build**

```bash
# Generate Prisma Client + Build
npm run build

# Test production locally
npm start

# Deploy (example: Vercel)
vercel deploy --prod
```

---

### **Workflow 4: Update Dependencies**

```bash
# Check outdated packages
npm outdated

# Update specific package
npm update [package-name]

# Update all (careful!)
npm update

# Test after update
npm run build
npm run dev
```

---

## 💡 Troubleshooting

### **Issue**: `npm install` fails

```bash
Error: ENOENT: no such file or directory
```

**Solution**:

```bash
# Clear npm cache
npm cache clean --force

# Delete node_modules
rm -rf node_modules package-lock.json

# Reinstall
npm install
```

---

### **Issue**: TypeScript errors after update

```bash
Error: Cannot find module '@/lib/...'
```

**Solution**:

```bash
# Clear TS cache
rm tsconfig.tsbuildinfo

# Restart TS server (VSCode)
Cmd/Ctrl + Shift + P → "TypeScript: Restart TS Server"
```

---

### **Issue**: Next.js build errors

```bash
Error: Module not found: @mediapipe/pose
```

**Solution**:

```bash
# Check next.config.ts webpack alias
# Verify file exists: lib/mediapipe-shim.js

# Try clean build
rm -rf .next
npm run build
```

---

### **Issue**: Prisma Client not found

```bash
Error: Cannot find module '@prisma/client'
```

**Solution**:

```bash
# Regenerate Prisma Client
npx prisma generate

# Verify generation
ls app/generated/client/
```

---

## 📈 Maintenance Tips

### **Regular Tasks**:

#### **Weekly**:

- ✅ Run `npm outdated` to check dependency updates
- ✅ Review `.env` for unused variables
- ✅ Check `.gitignore` if adding new tools

#### **Monthly**:

- ✅ Update dependencies (major versions carefully)
- ✅ Review `integrated.js` - still needed?
- ✅ Clean up `debug_*.js` scripts

#### **Before Deployment**:

- ✅ `npm run lint` - No errors
- ✅ `npm run build` - Build succeeds
- ✅ Test production mode locally
- ✅ Verify `.env.production` configured

---

## 🎯 Optimization Opportunities

### **1. Remove Unused Dependencies**:

```bash
# Check bundle size
npm run build

# Analyze bundle
npm install -D @next/bundle-analyzer

# Identify unused packages
npx depcheck
```

---

### **2. Archive Legacy Code**:

```bash
# Move to legacy folder
mkdir legacy
mv integrated.js legacy/
git commit -m "Archive legacy integrated.js"
```

---

### **3. Update README**:

- Replace boilerplate with project-specific content
- Add architecture diagram
- Document environment variables
- Add troubleshooting guide

---

## ✅ Summary

**Total Root Files**: 19 (excluding folders)

**Categories**:

- 🔧 **Configuration**: 9 files (package.json, tsconfig, etc.)
- 📄 **Auto-Generated**: 3 files (next-env.d.ts, tsbuildinfo, package-lock.json)
- 🛠️ **Utilities**: 2 files (debug_menu.js, integrated.js)
- 📚 **Documentation**: 6 files (README.md, DOKUMENTASI\_\*.md, exercise_rules.pdf)
- 🔐 **Secrets**: 1 file (.env)

**Key Files to Know**:

1. `package.json` - Dependencies & scripts
2. `next.config.ts` - Build configuration
3. `tsconfig.json` - TypeScript settings
4. `.env` - **Secrets** (never commit!)
5. `.gitignore` - Version control rules

**Total Size**: ~570 KB (mainly `package-lock.json` + cache files)

**Security**: ✅ `.env` properly ignored from Git

Dokumentasi ini mencakup semua file penting di root level! 🚀