1018 lines
20 KiB
Markdown
1018 lines
20 KiB
Markdown
# 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! 🚀
|