HAIZEL — Blkbook · professional networking PWA

SaaS & Infrastructure · Est. $18k – $20k

HAIZEL

Blkbook · professional networking PWA

Coralsoft designed, built and shipped this product for the client.

MobileWebBackendNext.js 16 App RouterReact 18 + TypeScript 5TanStack Query v5

HAIZEL onboarding role picker — founder, photographer, talent, corporate, designer, realtor

The situation

What was in place before we started.

A mobile-first progressive web app that replaces the paper business card with a fully customisable digital identity — built from zero to production by Coralsoft.

The client came to Coralsoft with a clear ambition: build a digital product that makes the paper business card and the static LinkedIn profile obsolete. Professionals — founders, photographers, designers, realtors, creative talent — needed a living portfolio they could hand to anyone, in person or remotely, that actually reflected their brand identity rather than a generic form.

The core challenge was not just building a profile page. It was architecting a flexible content system that could serve radically different professional personas, a contact exchange mechanism that worked with and without accounts, and a mobile experience so polished it felt native — all delivered as a progressive web app, with no App Store dependency.

Constraint

The product also needed to launch as an invite-only, curated network — which meant building an access request pipeline, invitation code system, and admin dashboard as first-class features, not afterthoughts.

Estimated Timeline: 8 months
Estimated Team: 6 people
Estimated Budget: $18k – $20k
Platforms: 3

Stack

Next.js 16 App RouterReact 18 + TypeScript 5TanStack Query v5Tailwind CSS v4Framer Motion 12shadcn/ui (55+ components)next-pwa + service workerSupabase PostgreSQL + RLSGoogle Gemini 2.5 FlashApify LinkedIn scraperResend transactional emailpasskit-generatorVercel + Edge Middleware

Delivery story

HAIZEL: a product foundation built for reliable delivery

Challenge

A mobile-first progressive web app that replaces the paper business card with a fully customisable digital identity — built from zero to production by Coralsoft. The main delivery challenge was to give users a maintainable interface and architecture that could absorb new requirements without slowing delivery, while keeping Customisable digital profile, Smart contact exchange, and Business card scanner consistent across the complete journey. We framed the engagement around the smallest production-worthy flow first, then expanded the scope without weakening the underlying component and data model.

How we built it

We began with the page hierarchy, content priorities, and the conversion path, then translated those decisions into reusable layout and style primitives. The team delivered Customisable digital profile, Smart contact exchange, and Business card scanner in reviewable sections, checking responsive behaviour, content editing, forms, and browser edge cases before final polish. The build used Next.js 16 App Router, React 18 + TypeScript 5, TanStack Query v5, and Tailwind CSS v4, with the structure kept simple enough for the client team to maintain after handoff.

Delivery

The delivered scope brought Customisable digital profile, Smart contact exchange, Business card scanner, and Apple Wallet pass into one coherent production-ready product experience. The reusable component and data patterns leave a clear route for the next product iteration. For HAIZEL, the practical result is a product that communicates its value quickly while giving the team a maintainable base for continued delivery in saas & infrastructure.

Challenges

Each constraint, and what we did about it.

Constraint

What we did

All mutations flow through Next.js server actions — components never touch Supabase directly. Data access helpers encapsulate raw queries; React Query hooks wrap server actions to add caching, optimistic updates, and background invalidation. A four-tier middleware routing model enforces auth and onboarding redirects at the edge before any page renders.

Results

Measured outcomes.

Typed profile component types — Hero, Portfolio, Timeline, Press, Quote…

Role-based default stacks so users never start from blank

0→1

Full-stack greenfield build, zero codebase to production launch

Showcase

The screens that carry it.

8 of 9 screens

HAIZEL contact card ready to add to Apple Wallet

Roadmap

Estimated delivery sequence.

8 months

Months 1–2

Discovery & architecture

15 typed content blocks — Hero, Portfolio, Timeline, Press, Quote, Ventures and more — each independently editable, reorderable and toggleable.

Customisable digital profile

Months 3–4

Core build

Three exchange patterns — authenticated mutual, guest one-way (no account required), admin-created — each running through atomic PostgreSQL RPC functions that share fields and upsert vault entries for

Smart contact exchange

Months 5–6

Integrations & data

Gemini 2.5 Flash Vision OCR turns a camera photo or upload into structured contact fields — name, role, email, phone, LinkedIn — in seconds, directly prefilling the vault contact form.

Business card scanner

Month 7

Hardening & QA

An end-to-end .pkpass generation pipeline with Apple certificate signing, served from an authenticated API route.

Apple Wallet pass

Month 8

Launch & handover

A CRM-lite for managing professional contacts.

Contact vault

More in SaaS & Infrastructure.

Matchday media control for amateur rugby clubs

Est. $18k – $20k

ClubPulse

Matchday media control for amateur rugby clubs

webbackendSaaS & Infrastructure

3 metricsDelivered

More work like this.

Every case study covers a product Coralsoft designed, built, and shipped for a client.

Estimate your project Read the reviews