Gigih_Palatangara/STRAPS_LOCALHOST
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
8ad58f7beb
STRAPS_LOCALHOST/DOKUMENTASI_ROOT_FILES.md

20 KiB
Raw Blame History

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:

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

NPM Scripts:

{
	"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):

{
	"@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:

{
	"@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:

{
	"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:

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:

{
	"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:

// 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:

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:

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:

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:

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:

# 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:

# 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:

/// <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:

# 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:

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:

node debug_menu.js

Output:

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: 
    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:

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:

# 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

# 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

# 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

# Generate Prisma Client + Build
npm run build

# Test production locally
npm start

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

Workflow 4: Update Dependencies

# 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

Error: ENOENT: no such file or directory

Solution:

# 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

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

Solution:

# Clear TS cache
rm tsconfig.tsbuildinfo

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

Issue: Next.js build errors

Error: Module not found: @mediapipe/pose

Solution:

# 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

Error: Cannot find module '@prisma/client'

Solution:

# 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:

# Check bundle size
npm run build

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

# Identify unused packages
npx depcheck

2. Archive Legacy Code:

# 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! 🚀