PsxWorth: AI-Powered PSX Portfolio Tracker

Active Development

Building Pakistan's first modern, ad-free stock portfolio tracker

Role
Full-Stack Developer & Product Designer
Type
Progressive Web Application
Timeline
2025
90+
Lighthouse Score
99.9%
Uptime

Overview

Problem

Pakistani investors lacked a modern way to understand true portfolio performance with reliable PSX data and effortless transaction management.

Solution

Designed and built PsxWorth as an AI-assisted, cross-platform PWA that automates transaction ingestion, delivers institutional-grade analytics, and keeps performance transparent.

Impact

80+ Lighthouse performance, sub-500ms analytics, and 10k+ transactions processed with zero data-loss incidents.

Acted as both product owner and full-stack engineer—running user interviews, prioritizing investor workflows, and iterating on UX to keep complex finance data approachable.

  • Orchestrated the end-to-end AI import experience, combining Gemini prompts, Zod validation, and optimistic UI states for a 97% faster data entry flow.
  • Crafted a modular analytics layer that lets investors toggle portfolios, compare strategies, and visualize diversification without leaving the dashboard.
  • Shipped a mobile-first PWA that installs natively, and keeps investors engaged through thoughtful motion defaults.
  • Automated PSX price refreshes after every 2 minutes via cron jobs so valuations stay trustworthy without manual intervention.

frontend

Next.js 15 (App Router)
React 19
TypeScript 5.7
Tailwind CSS
shadcn/ui
Framer Motion
TanStack Query
Zustand
ApexCharts

backend

Next.js Server Actions
Drizzle ORM
Turso (LibSQL/SQLite)
Clerk Authentication
Upstash Redis

ai

Google Gemini AI

devops

Vercel
PostHog Analytics
Vercel Speed Insights
Turbopack
pnpm

AI-Powered Transaction Import

97% reduction in data entry time (15 minutes → 30 seconds).

Paste plain text and let Gemini extract structured transactions with guardrails.

Google Gemini AIStructured OutputsZod Validation

Comprehensive Performance Analytics

Delivers institutional-grade accuracy investors usually pay for.

Track realised vs. unrealised gains, average cost basis, and commission impact in real time.

Financial modellingReal-time calculationsTemporal queries

Advanced Data Visualisation

Immediate diversification insights with hover, zoom, and comparison states.

Interactive charts reveal sector allocation, stock concentration, and performance trends tailored for PSX behaviours.

ApexChartsRechartsResponsive motion design

Corporate Actions Radar

Keeps investors proactive about cashflows and strategy shifts.

Surfaces upcoming dividends, bonus issues, and splits across the PSX and flags which events impact the investor's portfolios in one glance.

Scheduled ingestorsPortfolio cross-referencingNotification pipelines

Multi-Portfolio Operating System

Unlocks richer insights for power users managing multiple portfolios.

Create unlimited strategies, apply custom themes, and benchmark portfolios side-by-side.

ZustandShared analytics layerComponent-driven theming

Reliable PSX Price Sync

Maintains investor trust with verified, repeatable automations.

Every-3-minute price ingest with historical caching keeps valuations current despite no official PSX API.

Cheerio scraperVercel CronTurso pricing database
Technical Insight

Type-Safe Server Actions

Wrapped Next.js server actions with auth, ownership checks, and zod validation to eliminate boilerplate across mutations.

export const createTransaction = withErrorHandling(
  withAuth(
    withPortfolioOwnership(async (payload) => {
      return db.transaction.create(payload);
    })
  )
);
Technical Insight

AI Integration with Structured Outputs

Designed Gemini prompts and Zod schemas that convert messy broker statements into reliable transaction arrays.

const response = await generateContent(prompt, {
  responseMimeType: 'application/json',
  responseSchema: transactionsAISchema
});
Technical Insight

Optimised Database Architecture

Separated pricing and portfolio data across Turso databases with caching to keep analytics sub-500ms.

const cachedOwnership = unstable_cache(
  validatePortfolioOwnership,
  ['portfolio-ownership'],
  { revalidate: 3600 }
);
Technical Insight

Performance-First UI

Leaned on React 19 compiler hints, dynamic imports, and virtualisation to keep data-dense tables at 60fps.

const Chart = dynamic(() => import('./Chart'), {
  ssr: false,
  loading: () => <Skeleton />
});

Lighthouse Scores

83
performance
82
accessibility
93
bestPractices
92
seo

Key Performance Metrics

  • Time to Interactive
    < 3s
  • First Contentful Paint
    < 2s
  • Largest Contentful Paint
    < 4.0s
  • Avg API Response
    < 700ms

Scale Confidence

  • Optimised for 100K+ transactions per investor.
  • Edge-first deployment keeps concurrent users responsive.
  • Rate limiting and caching protect expensive AI calls.
  • Daily sync keeps 500+ stocks fresh without manual effort.