projbase.app/login
PROJBASE — CASE FILE
COVER
ProjBase
PROJECTS,
INVOICES,
PAID.
✓
A freelance project & invoice tracker I designed and built end-to-end — plain PHP, vanilla JS, zero frameworks, one person.
ROLE: DESIGN + FULL-STACK
·
DURATION: SOLO BUILD
·
STACK: PHP · MariaDB · VANILLA JS
·
CURRENCY: ₹ INR
PROJBASE · UI/UX CASE STUDY · 2026 · PAGE 01/10
PROJBASE — CASE FILE
THE PROBLEM
FREELANCE
MONEY LIVES
IN TOO MANY
PLACES.
Briefs in chat apps. Deadlines in your head. Invoices in a Word template from 2019. Payments... somewhere. Nothing talks to anything, and the one question that matters — “who owes me what?” — takes twenty minutes to answer.
deadline?? check chat
INV-007.docx (final) (2).docx
client said he paid?? verify
THE BRIEF — WHAT IT HAD TO DO
EST. NO. PB-2026 · ITEMIZED
01
Track projects & statuses at a glance
02
Checklists per project, not per-item billing
03
Generate clean ₹ invoices in seconds
04
Record payments, derive status — never store it
05
Feel fast, tactile, and a little bit fun
TOTAL:
ONE TOOL, ZERO FRAMEWORKS
PROJBASE · UI/UX CASE STUDY · 2026 · PAGE 02/10
PROJBASE — CASE FILE
DESIGN SYSTEM
ONE THEME. LIGHT ONLY. ON PURPOSE.
A calm, paper-bright workspace — because money software should feel like a clean desk, not a cockpit.
A · COLOR
PAPER
#ECEFF5
INK
#101828
BLUE
#3A6FF0
MINT
#DFF5E8
AMBER
#FFF1DC
Planning
In progress
Delivered
Paid
B · TYPE
Ag
₹42,000
System sans for UI · tabular numerals for money — ₹ amounts always align.
C · COMPONENTS
+ New invoice
BTN-01 · PRIMARY
Active
Completed
SEG-02 · FILTER
TGL-03 · SWITCH
Paid
PILL-04 · STATUS
Search clients…
Bloom Cafe
Nimbus Tech
PixelForge Media
DD-05 · SEARCHABLE SELECT
JUL 2026
‹›
SMTWTFS
567891011
12131415161718
CAL-06 · DATE PICKER
D · PRINCIPLES
1.
Derive, don't store (status is math)
2.
No build step — view source IS the source
3.
Every screen is one self-contained file
4.
Motion is feedback, never decoration
PROJBASE · UI/UX CASE STUDY · 2026 · PAGE 03/10
SCREEN 01 / DASHBOARD
WHO OWES ME WHAT — IN ONE GLANCE.
Outstanding, overdue and paid-this-month up top; active projects and a revenue donut below. Every number is derived live from invoices and payments — nothing is stored twice.
4 KPIs · 1 REQUEST
0ms
perceived wait — data renders from a single API round-trip
projbase.app/dashboard
₹ figures use tabular numerals — columns of money always align
donut legend wraps safely on any width (min-width: 0 layout guard)
cards cascade in with a 40ms stagger on load
PROJBASE · UI/UX CASE STUDY · 2026 · PAGE 04/10
projbase.app/projects
SCREEN 02 / PROJECTS
CARDS MOVE THEMSELVES.
A five-lane board grouped by status — but nobody drags cards here. Status is computed from each project's checklist and invoices, so a project files itself into the right lane the moment work or money changes.
SAME DATA · 3 LENSES
3×
board · list · calendar — one switcher, zero page reloads
every card wears its client's color — a 3px top seam
view switcher: board / list / calendar
lane counters roll up live — 7 projects, 5 statuses, no refresh
PROJBASE · UI/UX CASE STUDY · 2026 · PAGE 05/10
SCREEN 03 / PROJECT DETAIL
THE WORK AND THE MONEY, SIDE BY SIDE.
One page per project: checklists drive progress on the left, billing math sits on the right — value, invoiced, collected, outstanding. When the work is done, "Generate invoice" is already waiting in the corner.
CHECKLIST → STATUS → LANE
2/5
done — and the board, pill and progress bar already know
projbase.app/projects/e-commerce-website
invoiced / collected / outstanding — pure math over payments, never stored
invoice starts here — pre-filled from the project
checklist ticks animate the progress bar and re-derive project status
PROJBASE · UI/UX CASE STUDY · 2026 · PAGE 06/10
projbase.app/invoices
SCREEN 04 / INVOICES
A LEDGER THAT NEVER LIES.
Outstanding, overdue and collected roll up at the top; below, every invoice wears a status pill — Draft, Sent, Partly paid, Overdue, Paid — computed from its payments and due date. You can't set a status. You can only record the truth.
STATES · ALL DERIVED
5/5
draft · sent · partly paid · overdue · paid — zero manual flags
overdue gets the only red on the page — it's the one number that should hurt
pills follow the payment math — record ₹, watch them flip
each row shows what's still due, not just the total — ₹16,000 left on INV-0005
PROJBASE · UI/UX CASE STUDY · 2026 · PAGE 07/10
SCREEN 05 / INVOICE BUILDER
FROM DONE TO BILLED IN SECONDS.
The builder arrives pre-filled: client, project, invoice number, dates. Delivered checklist items offer themselves as line items — one click each. Totals recompute as you type, and the PDF is already formatted for print.
DRAFT → SENT
~20s
from "Generate invoice" to a client-ready PDF
projbase.app/invoices/new
delivered checklist items become line items — one click each
client, dates and amounts arrive pre-filled from the project
total recomputes on every keystroke — no "update" button
PROJBASE · UI/UX CASE STUDY · 2026 · PAGE 08/10
projbase.app/invoices/INV-0001
SCREEN 06 / INVOICE DETAIL
PAYMENTS IN. STATUS OUT.
You record what actually happened — ₹45,000 arrived on 3 July. The invoice does the rest: paid total, balance due and the status pill all recompute. Delete the payment and everything rolls back. The ledger only ever reflects reality.
THE GOAL STATE
₹0
balance due — every screen in the product funnels here
the Paid pill isn't a field — it's the payment math wearing mint
payments are facts with dates — removable, auditable
subtotal − paid = balance due, computed in the render
PROJBASE · UI/UX CASE STUDY · 2026 · PAGE 09/10
PAGE 10 · CLOSING
EVERY PROJECT
ENDS WITH
A RECEIPT.
ProjBase started as a spreadsheet grudge and shipped as a working product — designed, built and used by one person. Here's the final tally.
FINAL TALLY — PROJBASE
Screens designed & shipped
09
Frameworks used
00
Statuses stored in the database
00
Designer · developer · user
01
TOTAL:
ONE CALM PLACE FOR THE MONEY
& THE REST OF THE DRAWER
projbase.app/clients
projbase.app/projects
projbase.app/invoices
PROJBASE · UI/UX CASE STUDY · 2026 · PAGE 10/10
1 /