TubagusDafa
primecapitaledger.site
Visit Siteprimecapitaledger.site
Academic / University
Web Development

Prime Capital Ledger

RoleFull-Stack Web Developer
Timeline2026-05 — 2026-05
OrganizationUniversity of Indonesia - Computer Engineering Undergraduate

Built and deployed Prime Capital Ledger (primecapitaledger.site), a full-stack financial portfolio tracking application designed to consolidate and monitor shared investment capital. The architecture handles live market data ingestion, real-time currency conversion, and automated parsing of brokerage statement PDFs.

Investment Portfolio Dashboard Overview.png

Architecture & Tech Stack

Core Framework & Language

  • Built on the Next.js (v16.2.6) framework, utilizing the App Router architecture for optimized Server-Side Rendering (SSR) and API routing.
  • Developed entirely in TypeScript (v5.x) to enforce strict type safety across both frontend components and backend API routes.
  • React (v19.2.4) for component rendering.

Database & Backend Infrastructure

  • Database: Hosted on Neon's serverless PostgreSQL infrastructure.
  • ORM: Configured Prisma (v6.19.3) to ensure type-safe database querying, automated migrations, and strict schema management.
  • Caching Layer: Integrated a Redis caching layer (via Upstash @upstash/redis v1.38.0) to cache Yahoo Finance API responses and USD↔IDR exchange rates — reducing upstream API call frequency, improving query performance, and mitigating rate-limit exposure.

Authentication & Security

  • Configured session and JWT management via NextAuth.js (next-auth v4.24.14).
  • Implemented authentication flows supporting both Google OAuth SSO and custom credentials, utilizing bcryptjs (v3.0.3) for cryptographic password hashing.

User Interface & Client-Side Logic

  • Styling: Styled with Tailwind CSS (v4) via native PostCSS integration."
  • Components & Animation: Composed UI components with shadcn/ui and Radix UI Primitives (radix-ui v1.4.3), animated via Framer Motion (framer-motion v12.38.0).
  • Data Visualization: Rendered financial charts and asset allocation breakdowns via recharts (v3.8.1).
  • State & Validation: Enforced strict runtime schema validation adopting Zod (v4.4.3) combined with react-hook-form (v7.75.0) for client-side input handling.

External Integrations & Utilities

  • Market Data: Fetched live market data via yahoo-finance2 (v3.14.0) for fetching live global financial market data.
  • Document Parsing: Processed unpdf (v1.6.2) to extract and parse semi-structured tabular data from brokerage statement PDFs.
  • Time Calculation: Utilized date-fns (v4.1.0) for date arithmetic and time zone formatting.

Financial Portfolio Analytics Dashboard with Performance Metrics and Charts.png

Core Competencies

Next.js, TypeScript, PostgreSQL, Redis, Prisma, Web Architecture, API Integration