GLIO - Project Management

Gambaran Umum

GLIO adalah platform produktivitas profesional berbasis web untuk mengelola end-to-end alur kerja freelancer/agency: branding personal, manajemen project, kolaborasi tim, komunikasi klien, file showcase, hingga CV publik berbasis shortlink.
Aplikasi ini dirancang agar user bisa bekerja, mempresentasikan hasil, dan membangun kredibilitas profesional dalam satu ekosistem terpadu.

Masalah Yang Diselesaikan

Sebelum ada GLIO, alur kerja cenderung terpecah:

• manajemen project di tool A,
• komunikasi/email di tool B,
• file showcase di tool C,
• CV/portfolio di tool D.

Fragmentasi ini membuat data tidak sinkron, proses update lambat, dan kualitas presentasi ke klien kurang konsisten. GLIO menyatukan semua itu ke satu dashboard sehingga operasional harian lebih efisien dan hasil terlihat lebih profesional.

Peran Saya

Sebagai Full-Stack Developer, saya menangani:

• perancangan arsitektur fitur modular (portfolio, projects, cv-generator, file-manager, communications),
• implementasi backend action + integrasi database (Prisma + MongoDB),
• pembangunan UI dashboard & halaman publik (Next.js + TypeScript),
• pengembangan sistem bilingual (Indonesia/English) lintas halaman,
• optimasi upload/display media (kompresi, validasi size, loading performance),
• hardening untuk mode public (read-only control, permission-safe rendering),
• debugging issue produksi (schema mismatch, invalid ObjectID, image delivery issue).

Solusi & Fitur Utama

Selain fitur inti portfolio, project detail, showcase, dan CV generator, GLIO juga mencakup:

• Dashboard analytics (overview project, revenue chart, status progress).
• Manajemen kategori project (CRUD + bulk categories).
• Client management (CRUD client + recent clients).
• Member & guest collaboration:
  • invite member/guest,
  • accepted/declined invitation flow,
  • guest project listing.
• Notification center (create, mark as read, mark all as read).
• Email suite:
  • invoice link email,
  • client invitation,
  • member invitation,
  • single/bulk email campaign ke clients/subscribers.
• Subscriber management + blacklist email sementara/disposable.
• File Manager:
  • folder/file CRUD,
  • upload/delete sinkron ke storage,
  • revalidate lintas route project/public.
• Project links (quick links widget per project).
• Credentials vault (simpan credential project secara terstruktur).
• Proposal builder:
  • create/update/delete proposal,
  • signature flow.
• Modul & task/project module management.
• Invoice page per payment dengan tampilan detail.
• Portfolio public page + featured/other projects logic.
• CV Generator lanjutan:
  • CRUD experience/education/skills/language,
  • skill category management (rename, reorder, delete),
  • bilingual CV content,
  • public preview tanpa login,
  • shortlink slug custom (/p/[slug]).
• Theme support (dark/light) dan language switch di halaman publik.

Tech Stack & Arsitektur

• Frontend: Next.js (App Router), React, TypeScript, Tailwind, Shadcn UI.
• Backend: Server Actions + Route Handlers.
• Database: MongoDB + Prisma ORM.
• Auth: NextAuth.
• Storage/Upload: UploadThing + pipeline validasi/optimasi.
• Email Delivery: Resend (template invitation/invoice/general mail).
• Deploy: Vercel.

Arsitektur dipisah berbasis domain (actions per fitur + route group dashboard/public/project) agar maintainable dan mudah scale.

Tantangan & Solusi Teknis

• Batasan ukuran file UploadThing (literal size union tidak menerima 3MB)
  Solusi: set server ke ukuran valid (4MB) + guard sisi client untuk enforce 3MB.
• Error Prisma ObjectID saat delete file
  Solusi: gunakan identifier DB record yang valid, pisahkan key storage vs id database.
• Inkonsistensi konten private/public
  Solusi: unify komponen detail dengan publicMode agar tampilan sama, permission tetap aman.
• Issue performa image showcase
  Solusi: kompresi + format efisien + optimasi rendering.
• Konsistensi multilingual di banyak section
  Solusi: fallback chain ID/EN terstandar di data layer + UI switch terintegrasi.

Hasil / Value Project

• Workflow user lebih ringkas karena semua proses inti ada dalam satu platform.
• Kecepatan loading media meningkat setelah optimasi kompresi/render.
• Presentasi profesional ke klien meningkat lewat public project, portfolio, dan CV shortlink.
• Kolaborasi lebih terstruktur dengan invitation, notification, dan role-based visibility.
• Produktivitas operasional naik karena email, invoice, proposal, dan file management terintegrasi.