Skip to content
All projects

Full-stack web application

PricePulse PH

Live app

Deployed Web Application

I built PricePulse PH as a full-stack commodity price monitoring dashboard. It turns Philippine commodity price data into interactive trends, location comparisons, and market insights. It also includes multi-location comparisons, estimated household basket costs, shareable views, CSV export, and clearer data transparency.

My contribution
Solo Developer / Software Engineer
Primary users
Consumers, students, researchers, analysts, and people interested in Philippine commodity price trends.
Dataset coverage
  • 25,000+ price observations
  • 163 commodities
  • 19 locations

Technology stack

  • Next.js
  • React
  • TypeScript
  • Node.js
  • Tailwind CSS
  • PostgreSQL
  • Prisma
  • Vercel
  • Git
  • GitHub

01 / The Problem

Raw commodity datasets contain useful information, but people should not have to work through rows of records to answer simple questions. I wanted users to see the latest price, whether it increased or decreased, how it changed over time, how locations compare, and whether the current value is high or low compared with past observations.

02 / The Solution

I turned the dataset into an interactive dashboard built around context. Searchable commodity and location selectors give users a focused view of price movement and market comparisons.

  • Latest available and previous prices, with peso and percentage movement.
  • Historical price trends, minimum and maximum values, and position within that range.
  • Location comparisons within a price/reporting context, market-average comparison, and location ranking.
  • Detailed price observations that let users inspect the underlying records.

Latest Improvements

Multi-Location Trend Comparison
I added a way to compare the same commodity across up to three locations on one chart, with a supporting data table. This extends location comparison from a single reporting context to changes over time.
Household Basket Calculator
I added a custom basket for up to eight commodities. Users can adjust quantities and compare estimated costs across locations or reporting periods. Completeness checks run before a total is shown.
Shareable Views & CSV Export
I made configured dashboard views shareable and added CSV downloads so users can continue working with chart data in Excel, Google Sheets, Python, or R.
Dynamic Data Coverage & Source and Methodology
Coverage reflects the records currently available. I also added a Source and Methodology page that explains where the data comes from, what the dashboard represents, how records are handled, and how missing observations are treated.

03 / Application Screens

Use the previous and next buttons, left and right arrow keys, or swipe or drag horizontally to browse. Home and End jump to the first and last screen. Select the image to enlarge it.

0105
Screen 1 of 5.

Explore Food Prices

Historical monthly price trends for a selected commodity, location, and reporting range.

04 / System & Data Flow

Application architecture

  1. User

    Explore prices

  2. Next.js

    Application on Vercel

  3. Route Handlers

    Next.js / Node.js

  4. Prisma ORM

    Structured queries

  5. PostgreSQL

    Prisma Postgres

Data preparation pipeline

  1. Raw PSA Data

    Source records

  2. Cleaning

    Prepare records

  3. Normalization

    Consistent structure

  4. Validation

    Check prepared data

  5. PostgreSQL Import

    Store prepared data

  6. Application Queries

    Read for analytics

Next.js handles both the frontend and backend. Route Handlers and server-side logic run on Node.js, with Prisma ORM querying PostgreSQL. Vercel hosts the application, and Prisma Postgres provides the production database.

05 / Key Engineering Decisions

Searchable commodity selection

There are more than 160 commodities, so a long dropdown made selection slow. I added a searchable selector so users can find a commodity directly.

Structured database storage

I store cleaned records in PostgreSQL instead of parsing the source dataset on every dashboard load. This separates data preparation from application usage and supports structured queries through Prisma. Database records also provide available dates and coverage counts, so the displayed metadata stays aligned with the stored data.

Contextual analytics

I added server-side calculations for the latest available price, the previous observation, peso and percentage changes, the average across available locations, location ranking, and the current value's position within the historical minimum–maximum range.

Evidence behind visualizations

I structured the experience to move from a summary to a visualization and then to the exact observations. Charts make patterns easier to see, while a detailed table shows the records behind them. CSV export uses the observations behind the main chart so users can continue their analysis outside PricePulse.

Data Completeness & Shareable State

I preserve gaps in multi-location charts when observations are unavailable; missing values are never interpolated or fabricated. For a basket, each item cost is its recorded commodity price multiplied by the selected quantity. I sum these costs only when every required price is available. Otherwise, the total is withheld and the interface identifies the missing data instead of showing a partial estimate as complete.

Main dashboard filters are encoded in the URL so users can share and reopen an analysis with the same selections. This makes the view reproducible without requiring saved dashboards or user accounts.

06 / Dashboard Experience

I refined the interface to put useful information first. It starts with the user's question, establishes the current price context, and then opens up comparisons and supporting detail.

The “Try an Example” action selects a commodity and location with existing observations. This gives first-time visitors a useful starting view.

Empty and invalid states explain unavailable observations, the absence of a common reporting period, invalid date ranges, and missing required basket prices. I treat missing data as a valid condition in the dataset, not automatically as an application error.

  1. 01Filters
  2. 02Current Price Summary
  3. 03Historical Trend
  4. 04Market Context
  5. 05Location Comparison
  6. 06Detailed Observations

07 / Technical Challenges

Preparing raw commodity data

I cleaned, normalized, validated, and imported the raw records before using them for analytics.

Navigating a large commodity list

More than 160 options made a basic dropdown inconvenient. I added a searchable selector without making the filtering workflow more complicated.

Creating meaningful analytics

Showing prices was straightforward. Choosing calculations that help users interpret them required backend logic for price movement, location comparisons, and historical context.

Generating Prisma Client in production

The application worked locally but initially failed during the Vercel build because Prisma Client had not been generated. I corrected the build sequence so it generates the client before the Next.js production build.

prisma generate && next build

Configuring the production database

I configured database environment variables in Vercel so the deployed server-side application could connect securely to PostgreSQL. Production traffic uses the pooled Prisma Postgres connection.

08 / What I Learned

Building PricePulse connected the full application lifecycle: preparing and validating data, modeling it in PostgreSQL, querying it through Prisma, and writing Next.js Route Handlers and analytics logic on Node.js. Reliable data preparation and clear calculations became the foundation for the interface.

On the frontend, React, Next.js, TypeScript, and Tailwind CSS supported a responsive dashboard where visualization and UX refinement worked together. Git and GitHub supported incremental development, code organization, and debugging throughout the project.

Deploying to Vercel extended the work beyond local development. Production builds, Prisma Client generation, environment variables, database connectivity, and connection management all needed attention to bring the application online.

The latest work added experience in multi-series visualization, multi-item calculation logic, and data-completeness validation. Deriving metadata from database records, managing filter state through URLs, generating CSV exports, and explaining edge cases strengthened the connection between reliable calculations and understandable results.