SmartStamp Web — Portfolio Case Study

Pages & Routes

40+

Components

Service Interfaces

What it does

SmartStamp is a collection management tool for art galleries that adds a provenance and verification layer on top of their existing processes. Most gallery tools stop at inventory. SmartStamp goes further: the mobile app scans each physical work up close, capturing its surface texture as a digital fingerprint tied to the object itself. The web app handles everything from there: building the ownership history, generating and signing documents, and pulling in collection data from Artlogic, CSV files, or the mobile app directly. I built the full frontend from scratch: 29 routes, 40+ components, and a service layer where every data dependency is injected via typed interfaces, keeping the UI completely decoupled from the backend.

The forgery gap

Traditional certificates can be duplicated or forged. SmartStamp ties the trust to the physical object by scanning its surface, not to a piece of paper anyone could reprint.

Fractured provenance

Ownership history, exhibition records, appraisals, and condition reports end up scattered across emails and spreadsheets. SmartStamp keeps all of it in one place, per artwork.

Document workflows

Contracts and certificates get built in Word and chased over email. SmartStamp generates, edits, and routes 13 document types for signing without needing any external tool.

Siloed collection data

Gallery data tends to live in Artlogic or spreadsheets with no easy way to connect it all. SmartStamp pulls from live feeds, CSV exports, and the mobile app and adds the verification layer on top.

Fingerprinting

A fingerprint tied to the physical object

The SmartStamp mobile app captures up to 9 close-up scans of each work: brushstroke texture, impasto patterns, signature areas. Each scan produces a fingerprint with a match score, usually between 96 and 100%. Verified artworks get a teal Integrity Stamp badge. Unverified works show a muted outline badge. The difference is visible everywhere: in grids, tables, and detail views.

Artwork detail, Integrity Stamp verified

Not yet stamped, fingerprinting pending via mobile

Hash trail, every event recorded

Collection

Grid and list views, filters and search in the URL

The registry has two views: a masonry grid (24 items per page) and a data table (50 items). The active view, filters, and search query all live in the URL, so browser back and forward work as expected and you can share a filtered view as a link. Search runs across title, artist, and medium as you type. One click filters down to stamped or unstamped works only.

List view, 50 per page

Add artwork, full form

Provenance

The full ownership history in one place

Each artwork has a provenance record built from five sections: the ownership history (acquisition method, price, verified status), exhibition appearances, publications, appraisals in any currency, and condition reports with photo attachments. Every time something is added, it gets written into the hash trail as a timestamped SHA-256 entry.

Documents tab on the artwork detail

Edit form, all fields

Documents & Signatures

Generated, editable, and signed without a third-party tool

SmartStamp generates 13 artwork document types and 6 gallery-level ones from branded HTML templates. You can edit the content before locking it, then send it for signing via a link. The person signing doesn't need an account. Status goes from draft to pending to signed, and every signing event gets recorded in the hash trail.

Artwork documents, 13 types

Gallery documents, contracts and legal

Integrations

Artlogic, CSV, and mobile, all with live progress

There are four ways to get artworks into the system: a live Artlogic feed sync, a CSV/Excel upload with column mapping, a sync from the SmartStamp mobile app (artworks come in already fingerprinted), and manual entry. Each path fires progress events as it runs so the UI shows what's happening step by step. Past imports are logged with source, count, errors, and timestamp.

Artists and collaborators list

Artist profile with their works

Dashboard

The state of the collection at a glance

The dashboard shows fingerprint coverage as an animated progress bar, a breakdown of where artworks came from (Artlogic, CSV, mobile app, or manual entry), a summary of the documents vault, and a recent activity feed. The stat numbers count up on load using a custom easing curve.

Audit log, grouped by date

Archive with one-click restore

Screen reference

All 21 screens

Authentication Login

Dashboard Dashboard

Collection Collection — Grid View

Collection Collection — List View

Collection Add Artwork

Artwork Detail Artwork Detail — Fingerprinted

Artwork Detail Artwork Detail — Documents

Artwork Detail Artwork Detail — Not Fingerprinted

Artwork Detail Artwork Detail — History

Provenance Provenance Record

Documents Documents Vault — Artwork Documents

Documents Documents Vault — Gallery Documents

Documents Document Signing

Integrations Import Hub

Team Artists & Collaborators

Team Artist Detail

Activity Activity Log

Archive Archived Works

Settings Gallery Settings

Collection Edit Artwork

Onboarding Onboarding — Gallery Setup

Design System

Built on a custom token system

The UI is built around a gallery viewing room aesthetic: warm whites, near-black text, sharp edges throughout (no border radius except for pills), and a restrained use of colour. Orange is reserved for the brand. Teal signals the fingerprint verification state. Every colour, shadow, and spacing value is defined as a CSS custom property and consumed through Tailwind utility classes.

Primary Dark
#1a1917

Dark Teal
#1e5459

Brand Orange
#b8502f

Fingerprinted
#4bd4e0

Warning
#e2c866

Background
#fcfcfc

Colour tokens

Heading typeface

Body text runs in Inter or the system sans-serif stack, sized from 13px to 20px depending on context. Line height sits at 1.75 for comfortable reading.

mono / Fragment Mono

Typography

0px — default

9999px — pills only

Border radius

Technical Architecture

Built to be extended

9 TypeScript Service Interfaces

All data access goes through typed interfaces injected via React context. Every service (Artworks, Fingerprints, Documents, Provenance, Activity, Hash Trail, Import, Auth) is swappable independently. Connecting the Firebase backend is a one-line change in providers.ts.

URL-Driven State

Pagination, filters, search, view modes, and active tabs all live in the URL. Browser back and forward work without any extra state management, and filtered views are shareable as links. Components read from useSearchParams() directly.

Append-Only Hash Trail

Fingerprint captures, ownership transfers, document signings, and provenance updates each get written as a SHA-256 chained entry. The trail is write-only at the application level, with Firestore security rules enforcing the same at the database level.

Layer	Technology
Framework	React 19 + TypeScript 6
Build	Vite 8 + SWC
Routing	React Router DOM 7
Data Fetching	TanStack React Query 5
Forms	React Hook Form 7 + Zod 4
UI Primitives	Radix UI + shadcn/ui
Styling	Tailwind CSS 3
Animation	Framer Motion 12
Icons	Lucide React + custom SVG
Backend	Firebase Auth + Firestore + Storage + Functions