What it is
Every community event ends the same way: a group chat full of people who never quite meet. The Connection Wall gives an organiser one link to share. Anyone who opens it adds their name, their LinkedIn and one line about themselves, and immediately becomes a circular tile on a shared wall that everyone else can click straight through.
No accounts, no install, no admin. The first room was built for Coletivo Delas, a women-in-tech collective, and it runs live today.
How it works
- 01
Name the room
The organiser names the room and picks the platform its members will link — LinkedIn today, with Instagram, X and the rest already in the picker.
- 02
Share one link
Members open it and fill three fields. Validation is immediate and human: “Use a full LinkedIn URL”, not “invalid input”. The description caps at 280 characters, with the counter running live.
- 03
The wall fills in
Each person lands as a circle carrying their initials, name and one line. Hovering lifts the tile; clicking opens their profile page, and from there, their LinkedIn.
Inside the build
Validation
One schema, both sides
The Zod shape that checks the form in the browser is the same shape the server parses before anything reaches the database. Rules live in one place, so the client can’t drift from the server.
src/lib/profiles.functions.tsData access
Reads are public, writes are not
The browser reads the wall through the public Supabase client. Inserts run inside a TanStack Start server function using the admin client, so the form is the only way onto the wall.
supabase/migrationsSharing
Every profile has an address
Profiles render server-side at their own route with their own title and Open Graph tags, so a member can paste her tile into a group chat and have it unfurl properly.
src/routes/profiles.$profileId.tsxDesign system
Tokens, not stylesheets
Colour is a set of oklch tokens defined once. The tile lift, the surface shadow and the letter-spaced eyebrow are Tailwind v4 @utility rules — the wall’s behaviour is described in one file, not repeated across components.
src/styles.cssBuilt with
- React 19
- TypeScript
- TanStack Start
- TanStack Router
- TanStack Query
- Tailwind v4
- shadcn/ui
- Radix
- Supabase
- Zod
- Vite 8
- Bun
Server-rendered with file-based routing and typed server functions, so the wall is readable before JavaScript loads and shareable links resolve on the server.
What’s next
Rooms are the piece still being built. The landing page collects a room name and a platform today and routes to the Coletivo Delas wall; the room record, its slug and per-room queries come next — followed by opening the profile link up to the other platforms already in the picker.