Back to projects

Project case study

Every Sale Counts

Sales dashboard showing revenue, gross profit and margin by period, channel and product, in HTML, CSS and JavaScript.

My roleDeveloper
Technologies used
  • SVG
  • JavaScript
  • HTML
  • CSS
  • Playwright
Open demo
Every Sale Counts dashboard with period and channel filters, four indicators and the revenue and gross profit chart.
business-intelligence-eight.vercel.app / Home page

Problem

Revenue alone does not show how much each sale leaves.

Comparing periods, channels and products in a spreadsheet is slow.

Solution

Architecture at a glance
  • A synthetic, deterministic base of 2,700 records: 180 days, 5 products and 3 channels.
Product view with indicators and the product table.
Product view with indicators and the product table.
Technical decisions
  1. A single index.html with dependency-free JavaScript and values stored in whole cents.
  2. Revenue and gross profit chart drawn by hand in SVG, with no library.
  3. Three hash views: overview, products and channels.

Result

Synthetic records
2,700
Private repository / generator in index.html / commit a78e889
Overflow checks
18
Private repository / tests/dashboard.cjs, 6 widths × 3 periods / commit a78e889

A lean dashboard that puts each sale's margin in view, built as an academic project.

  • SVG visualisation
  • Gross margin modelling
  • Framework-free JavaScript
  • Responsiveness tests

Learnings and limitations

  • The data is fictitious, produced by a formula, with fixed dates from 5 Oct 2026.
  • It only covers gross profit: shipping, taxes and expenses are left out.
  • The interface is in Portuguese only.

More about the project

Full case details, collapsed for optional reading.

Full description

Every Sale Counts is a sales dashboard built as an end-of-semester academic project.

The base is synthetic and deterministic: 2,700 records over 180 days, 5 products and 3 channels, with values in whole cents.

The dashboard filters by period and channel, compares each indicator with the previous period and draws revenue and gross profit in SVG, with no library.

There are product and channel views, table search and a CSV export marked as a demonstration.

Dependency-free HTML, CSS and JavaScript, an SVG chart and Playwright tests; static hosting on Vercel.

Features and highlights
  • 7, 30 or 90 day period filter.
  • Channel filter.
  • Indicators compared with the previous period.
  • Product table with search.
  • CSV export.
  • Draws the revenue and gross profit chart in SVG, with no library.
  • Stores values in whole cents to avoid rounding errors.
  • Compares each indicator with the previous period.
  • Tests overflow at 6 widths and 3 periods with Playwright.
Technical architecture and data

Technical architecture

How the case was designed as a product

Sales dashboard showing revenue, gross profit and margin by period, channel and product, in HTML, CSS and JavaScript.

SVGVisualizationJavaScriptLanguageHTMLWeb platformCSSWeb platformPlaywrightFramework

Data used

  • A synthetic, deterministic base of 2,700 records: 180 days, 5 products and 3 channels.

Core components

  • 7, 30 or 90 day period filter.
  • Channel filter.
  • Indicators compared with the previous period.
  • Product table with search.
  • CSV export.

Technical decisions

  • SVG visualisation
  • Gross margin modelling
  • Framework-free JavaScript
  • Responsiveness tests

Trade-offs

  • The data is fictitious, produced by a formula, with fixed dates from 5 Oct 2026.
  • It only covers gross profit: shipping, taxes and expenses are left out.
  • The interface is in Portuguese only.
How to run
  1. The repository is private; the steps below apply to anyone with access.
  2. Open index.html in the browser or run npm run build.
  3. npm ci, npx playwright install chromium and npm test
Additional media
Channel view with each channel's share of revenue.
Channel view with each channel's share of revenue.
Credits

Developed by Matheus Siqueira - https://www.matheusdev.tech

Next projectLibrary Studio

FastAPI service that catalogues books, searches by title, author and year, and fills in metadata from the ISBN via OpenLibrary.

View full case