KOMPI / BUILD STORY

How Kompi was
built.

Smart links, QR experiences, K-Cards and analytics — designed as one calm, connected product by Wall & Fifth.

Kompi BlogTechnical case study

THE SHORT VERSION

Kompi is a custom production application built on Next.js and React, with PostgreSQL, Prisma, NextAuth, Stripe and first-party event data underneath it.

One account. Multiple ways to share. One analytics layer.

01 / PRODUCT

Make sharing measurable

A short link looks simple from the outside. A production link platform is not. It has to create and manage destinations, redirect quickly, preserve campaign context, record useful events, separate data between workspaces, protect authenticated areas and turn activity into something a person can actually understand.

Kompi was built around that broader product problem. Links are one layer; the application also connects KR Codes, K-Cards, analytics, QR experiences and workspace-level tools.

02 / ARCHITECTURE

A product system, not a pile of features

The current Kompi codebase is a custom Next.js 16 application running React 19. TypeScript and the Next.js App Router handle the public marketing site, authenticated product routes and API endpoints, while PostgreSQL and Prisma provide the persistent application layer.

Application

01

Next.js 16, React 19, TypeScript, Tailwind CSS, Radix UI and Framer Motion.

Data

02

PostgreSQL as the primary database, modelled and accessed through Prisma.

Identity

03

NextAuth with Google sign-in and email/password credentials, protected by route middleware.

Commercial layer

04

Stripe for billing and subscriptions, with PostHog plus Kompi's own event models for analytics.

03 / DATA MODEL

Everything starts with a workspace

Kompi's main product objects share a workspace model. A workspace can own links, bio pages, KR codes, forms, subscriber lists, engagement events and additional tools. The account is the centre of the product instead of each feature living in its own silo.

The schema also models K-Cards, QR menus, contact submissions, courses, loyalty activity, builder sites and Kompi Chat. Features can expand without having to reinvent authentication, ownership or account structure every time.

04 / ANALYTICS

The redirect is part of the product

Each Kompi link stores its destination, short code, status, workspace relationship and aggregate click count. Individual click events can capture UTM source, medium, campaign, content and term, plus referrer and geographic context.

Public redirects are handled differently from protected dashboard traffic. At the edge, Kompi can read Vercel-provided country, region and city headers and pass that context into the redirect request. The result is infrastructure designed for measurement as well as speed.

WHY IT MATTERS

Different placements can use different links or campaign parameters while still feeding one coherent analytics view.

05 / PHYSICAL + DIGITAL

QR, KR Codes and K-Cards share the same foundation

Kompi's QR functionality is not a separate image generator bolted onto a website. KR Code records can hold a destination, style information and workspace ownership. K-Cards have public slugs and structured data, while click and message events can be associated back to the relevant card or workspace.

A physical scan, a digital profile card and a short link can all return to the same account, analytics and growth workflow.

06 / PUBLIC WEB

The marketing site and the SaaS live together

Kompi has a substantial public content layer: product pages, customer pages, free tools, QR guides and a structured blog. The same Next.js application therefore serves two jobs — a crawlable public website and a protected SaaS dashboard.

Public pages use canonical metadata, index/follow directives and structured data where appropriate, while the sitemap covers core routes, tools and programmatic SEO pages. Product and acquisition work can share the same components and deployment pipeline.

BUILT BY WALL & FIFTH

Product design through to
production software.

Wall & Fifth's work on Kompi covered interface design, product structure, authenticated dashboard flows, database-backed features, link infrastructure, QR experiences, analytics, billing integration and the public web application.

Visit Wall & Fifth

07 / STACK

The stack at a glance

Application
Next.js 16 + React 19 + TypeScript
Database
PostgreSQL
ORM
Prisma 6
Authentication
NextAuth with Google and credentials
Billing
Stripe
Product analytics
PostHog + first-party event models
Charts
Recharts
QR
QR generation and styling libraries + Kompi KR Code models
Deployment
Vercel-compatible Next.js architecture

FAQ

Questions about the build.

Who built Kompi?

Kompi was designed and built by Wall & Fifth as a custom production software platform combining smart links, QR experiences, digital profile cards, analytics and growth tools.

What technology is Kompi built with?

The current Kompi application uses Next.js 16 and React 19, with PostgreSQL accessed through Prisma. Authentication is handled with NextAuth, billing uses Stripe, and product analytics includes PostHog alongside Kompi's own event data.

Is Kompi just a URL shortener?

No. Short links are one part of the product. The codebase also supports QR and KR codes, K-Cards, workspaces, analytics, bio-style pages, QR menus, contact and subscriber tools, and other connected growth features.

How does Kompi track link performance?

Kompi stores click events against links and can record campaign parameters, referrer information and geographic context. Public redirect requests are also enriched with edge-provided location headers before the request reaches the redirect logic.

Was Kompi built from a template or no-code platform?

No. Kompi is a custom Next.js application with its own application routes, database schema, authentication, billing, redirect infrastructure, analytics models and product interfaces.

EXPLORE KOMPI

See the product in action.

Technical details in this case study reflect the Kompi production codebase as reviewed on 8 September 2026.