Network Value Creator
Fast list-detail dashboard for browsing imported LinkedIn connections. Security-hardened.
TL;DR
- List-detail dashboard tuned for scanning thousands of connections fast.
- React + Vite front end over a FastAPI + PostgreSQL backend.
- Security-hardened: input validation and authorization as a first-class concern.
- Core flows covered by Playwright end-to-end tests.
- Sibling to Network Intelligence OS — the browsing layer to its Q&A layer.
Architecture
A React/Vite list-detail client over a FastAPI backend and PostgreSQL. Validation and authorization sit in the API path, not bolted on after.
Problem
An imported LinkedIn network is thousands of connections deep, and the useful question is usually 'let me scan these fast and open the ones that matter'. A dashboard that stutters as you scroll, or that trusts imported data it shouldn't, fails at exactly the moment the dataset gets big enough to be worth having. The browsing layer has to stay fast and stay safe as the list grows.
Approach
A list-detail dashboard: a React + Vite front end over a FastAPI backend backed by PostgreSQL, built for quick scanning of a large connection list with a detail view for any one person. Security is treated as a first-class concern rather than a later pass — input validation on everything that comes in, authorization on everything that goes out — and the flows are covered by Playwright end-to-end tests. It's the fast browsing/dashboard layer that sits alongside Network Intelligence OS (the AI natural-language Q&A layer over the same kind of data); this project is the one you reach for when you just want to move through the list.
Deep dive
List-detail at scale
The interaction is the classic list-detail one, but the constraint is size: thousands of imported connections have to scroll without stutter, and opening any one of them has to feel instant. The front end pages and keeps per-row work minimal so the list stays smooth as it grows, and the detail view fetches a single record on demand rather than loading everything up front. It's deliberately the lean counterpart to Network Intelligence OS — that project answers natural-language questions about the network; this one is the fast way to just move through it.
Security hardening
Imported personal data with a single owner is exactly the kind of thing you harden from the start, not after an incident. Input is validated at the FastAPI boundary so malformed or hostile payloads never reach the query layer, and every response path is authorization-checked so the API can't be coaxed into returning data it shouldn't. Treating validation and authz as part of the API's definition — rather than a middleware afterthought — keeps the surface small while the feature set grows.
Tested with Playwright
The flows that matter — browse the list, filter it, open a connection, come back — are covered by Playwright end-to-end tests that drive a real browser against the running stack. For a dashboard whose whole value is smooth, correct navigation over a large dataset, exercising the actual user path catches the regressions that unit tests on either half would miss.
Outcome
Beta (2025), personal. A fast list-detail dashboard for browsing imported LinkedIn connections, security-hardened, with the core flows under Playwright. React + FastAPI + PostgreSQL + Vite. Sibling to Network Intelligence OS: that one answers questions about the network, this one is the fast, safe way to browse it.
Related
