// project 01 - teardown

CRM apps & dashboards

Several CRMs and pipeline dashboards, built across different teams, stacks, and scales — from a small internal tool to enterprise-level rollouts, covering sales, support queues, and hiring trackers. Different domains and different codebases, but the same recurring problem: records moving through stages, and getting that onto one screen instead of five.

Role

Front-end architecture & UI

Teams

Solo to 8-person teams

Domains

Sales, support, hiring ops

Focus

Real-time pipelines & forecasting

Vue
React
Angular
Bootstrap
MaterialUI
Prime
Chart.js
Rechart
01

Design intent

An internal tool for people working inside it all day — not a marketing surface. No entertainment, no decoration for its own sake: usable, fast, and informative comes first, and the visualization has to earn its place by making a decision easier to make, not by looking impressive.

02

Dashboard

CRM, Dashboards — Overview
Open pipeline
$842K
12.4%
Won this qtr
$318K
8.1%
Avg deal size
$14.2K
2.6%
Win rate
38%
3.0pt
Revenue by monthLast 8 mos
JanFebMarAprMayJunJulAugSepOctNovDec
Pipeline by stage142 deals
0Deals
Negotiation42%
Proposal26%
Qualified18%
New14%
Top dealsSorted by value
CompanyOwnerStageValueStatus
Northwind FreightM. AlvarezNegotiation$68,400In progress
Halden RoboticsJ. OkaforClosed Won$54,900Won
Vantree LogisticsM. AlvarezProposal$41,200In progress
Coldbrook RetailS. PuriClosed Lost$37,000Lost
Ferrum IndustrialJ. OkaforNegotiation$33,650In progress
Conversion funnelThis quarter
New
420
Qualified
286
Proposal
172
Won
68
Team leaderboardBy revenue
M. Alvarez$142K
J. Okafor$118K
S. Puri$96K
L. Byrne$74K
Activity — last 14 daysCalls · Emails · Meetings
03

Build notes

Hundreds of records, one glance

A pipeline with 500+ open deals still reads as a shape, not a spreadsheet — density comes from grouping and scale, not from shrinking text.

Gaps and blockers stay visible

Deals with no next step or no activity in 14 days get a distinct visual state, so what's stuck surfaces on its own instead of hiding in a list.

Filters that stack, not just toggle

Stage, owner, deal size, and last-activity combine as AND/OR groups instead of one dropdown at a time — indexed against the full dataset client-side, so a five-filter query on hundreds of deals still returns in a frame, not a spinner.

Performance sets the ceiling on data density

Lists virtualize so only on-screen rows ever mount, and charts plot server-aggregated rollups instead of raw records — the board can grow to thousands of deals without the browser paying for the ones you can't see.

Progress you can scan, not read

Stage age, win probability, and rep load render as compact visual encodings across the board, so status is legible before a single number is read.

Color is a hint, not the signal

Stage, risk, and priority are backed by icon and label as well as color, and the whole board is keyboard-navigable — so the dashboard holds up for color-blind reps and screen reader users, not just the demo.