Halatap

Role: Front-end and feature engineer (multi-developer team)Timeline: 2025-2026Type: Full-stack web app

Next.js 16

React 19

TypeScript

Convex

Tailwind CSS 4

Radix UI

Resend

Halatap hero image

Halatap replaces the paper business card with a digital one you can actually keep up to date. Each user gets a dashboard to build cards from a set of templates, then shares them however the moment calls for: a public link, a QR code, an email, a downloadable contact file, or a pass saved straight into Apple Wallet. It's a full-stack app built on Next.js and Convex, with secure accounts, real-time data, and support for both English and Arabic.

Paper cards have aged badly. The information goes stale the moment a job title or phone number changes, they're easy to lose, and they only exist in one physical format. Sharing digitally is no better in practice, because it ends up fragmented across links, PDFs, QR codes, and messaging apps with no single source of truth. On top of that, international users need cards in more than one language, and teams need a way to create many cards at once instead of one at a time. Halatap set out to fold all of that into one system.

This was a team project, and I contributed across the front end and several end-to-end features alongside other developers. The work spanned the card-building and dashboard experience, the sharing flows, and the integrations that make a card useful outside the app: wallet passes, vCard export, and email delivery. The approach throughout was to keep the product modular. One template system feeds both the editor preview and the public card, and one card schema serves both single-card creation and bulk import, so features reused the same foundations instead of branching.

FrameworkNext.js 16 (App Router) with React 19 and TypeScript

BackendConvex for the real-time database, queries, and mutations

Styling / UITailwind CSS 4 with Radix UI primitives

Authcustom email/password plus Google OAuth

EmailResend, through the Convex integration

Wallet passespasskit-generator with node-forge for certificate signing

ExtrasJotai for local state, Framer Motion for transitions, react-qr-code, Sonner for notifications

Template-based card buildermultiple templates where the preview and the final public card render from the same components, so what you design is exactly what you share.

Multi-card dashboardcreate, edit, duplicate, delete, and share any number of cards from one place.

Public and private sharingpublic cards open from a link; private cards are restricted to specific recipient emails, enforced in the backend.

Email sharingsend a card invitation through Resend with the link and context attached.

Apple Wallet passesgenerate a signed PKPass with card-specific colours, a QR barcode for the public link, and localised fields.

vCard exportdownload contact data that drops straight into a phone's address book.

Bulk CSV uploadimport many cards at once, mapping identity fields, social links, and per-row images.

Bilingual supportEnglish and Arabic versions of key fields, resolved through both the UI and the generated passes.

Halatap screen 1

Halatap screen 2

Authentication was built rather than fully outsourced, which meant doing it carefully. Passwords are hashed with salted PBKDF2 through the Web Crypto API instead of being stored raw, and reset tokens are time-bound and marked used once spent. The most involved feature was Apple Wallet pass generation. It requires certificate-based signing, the right bundled assets, an embedded QR payload, and formatted localised fields, all produced on demand and returned with the correct content type. Supporting both single users and teams came down to reusing one card schema across a normal creation flow and a separate CSV import path.

All projects Next projectMLZ-Advanced

Overview

TheProblem

MyRole&Approach

TechStack

KeyFeatures

Gallery

Challenges&Solutions

Outcome