TechProjectProduct

Personal Project Management & Tech Dashboard — All-in-One workspace untuk developer

Tech Stack

• Next.js 14 (App Router + TypeScript)
• Tailwind CSS (utility-first styling)
• Prisma ORM + SQLite (zero-config database)
• Recharts (data visualization)
• Lucide React (icons)
• Zod (schema validation)

Fitur

Modul	Fitur
Dashboard	Stats overview, recent activity, charts distribusi project & task
Projects	CRUD project, progress tracking, milestones, tags, filter & search
Tasks	Kanban view + list view, prioritas, due date, link ke project
Products	Product roadmap, pipeline status, feature tracking per product
Tech Stack	Dokumentasi teknologi, rating, pros/cons, grouping per kategori
Notes	Knowledge base personal, kategori, pin, search fulltext
Activity	Log semua aktivitas dengan timeline view

Setup & Run

# Install dependencies
npm install

# Generate Prisma client
npm run db:generate

# Push schema ke database
npm run db:push

# Seed data contoh
npm run db:seed

# Jalankan development server
npm run dev

Buka http://localhost:3000

Database

SQLite tersimpan di prisma/dev.db. Untuk melihat data secara visual:

npm run db:studio

Struktur Folder

app/
├── (pages)/           # Halaman utama
├── api/               # API routes (REST)
└── globals.css        # Global styles

components/
├── dashboard/         # Dashboard components
├── layout/            # Sidebar, Header
├── notes/             # Notes page
├── products/          # Products page
├── projects/          # Projects pages
├── tasks/             # Tasks page
├── tech/              # Tech stack page
└── ui/                # Reusable UI components

lib/
├── db.ts              # Prisma client singleton
└── utils.ts           # Helper functions

prisma/
├── schema.prisma      # Database schema
└── seed.ts            # Sample data seeder

Dark Mode

Toggle dark/light mode dengan tombol di header kanan atas.