- Next.js
- TypeScript
- Tailwind CSS
- Recharts
- PWA
Harga Pangan
Monitor Indonesian food prices with a trading-view interface — commodities as tickers, color-coded daily changes, historical charts, top gainers/losers, and watchlist. Data from PIHPS Bank Indonesia.
About this project
Built on Next.js 16 App Router with TypeScript, consuming api-harga-pangan (an unofficial PIHPS aggregator). The market overview renders every commodity as a ticker list — latest price, daily change (Rp & %) with green/red colors plus ▲/▼ icons for color-blind users, and a 7-day sparkline. The commodity detail page is styled like a stock detail: a large latest price, a Recharts historical chart with 7H/30H/90H ranges, and multi-line region comparison. Watchlist lives in localStorage, and the selected region persists across pages. Data is fetched server-side with caching that respects the API's Cache-Control headers so the rate limit isn't hammered.
A live PWA at harga-pangan.vercel.app that exercises the full api-harga-pangan API — commodities, regions, latest prices, and price history — across market overview, detail charts, region comparison, and watchlist.
More Work
Ongkir SDK
Unofficial multi-provider TypeScript SDK for Indonesia shipping rates & tracking — Biteship, Komerce (RajaOngkir), Shipper — one ShippingProvider contract, bring-your-own-key, runtime-agnostic.
EngineeringAccurate MCP Server
MCP server that connects AI assistants like Claude to Accurate Online data — ask about stock, invoices, or financial reports in natural language and get answers from real accounting data.