Context

Engineered and deployed Prime Capital Ledger (accessible at primecapitaledger.site), a comprehensive, full-stack portfolio tracking application. Designed to consolidate and track shared investment capital, the system handles live market data, currency conversion, and the automated parsing of brokerage statement PDF files.

Architecture & Tech Stack

Core Framework & Language

• Built on the Next.js framework utilizing the App Router architecture for optimized rendering.
• Developed entirely in TypeScript to enforce strict type safety across the frontend and backend.
• Core UI library powered by React.

Database & Backend Infrastructure

• Database: Utilized a serverless PostgreSQL database hosted on Neon.
• ORM: Implemented Prisma (v6) for type-safe database querying and schema management.
• Caching Layer: Integrated Redis (via Upstash) to cache Yahoo Finance API responses and USD↔IDR foreign exchange rates. This architectural decision significantly optimized query performance and prevented third-party API rate-limiting.

Authentication & Security

• Implemented NextAuth.js (v4) for secure session management.
• Configured robust authentication flows supporting both Google OAuth and custom credentials utilizing bcryptjs for secure password hashing.

User Interface & Client-Side Logic

• Styling: Styled utilizing Tailwind CSS (v4) with PostCSS integration.
• Components & Animation: Built a highly interactive and accessible interface using shadcn/ui, Radix UI Primitives, and Framer Motion.
• Data Visualization: Integrated recharts (v3) to render dynamic financial charts and portfolio metrics.
• State & Validation: Enforced strict runtime schema validation using Zod combined with react-hook-form for secure, error-free user input handling.

Associated Entities

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