- 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
Halal MUI
Android app to check BPJPH halal certificates & BPOM registrations in one search box — by certificate number, registration number, or product name.
EngineeringOngkir SDK
Unofficial multi-provider TypeScript SDK for Indonesia shipping rates & tracking — Biteship, Komerce (RajaOngkir), Shipper — one ShippingProvider contract, bring-your-own-key, runtime-agnostic.