Peptide Atlas
A research-driven directory of 60+ peptides with instant search, live filters, research signals and popularity scores, built in Next.js.
Overview
Peptide Atlas makes a confusing, fast-moving field navigable. It tracks 60+ therapeutic, cosmetic and performance peptides and presents what's known about each, including benefits, risks and research status, in one clean, searchable place.
The challenge
The information is dense and the audience ranges from curious beginners to people reading the studies. The design had to pack in a lot of data without becoming a wall of text.
What I built
- Instant search and filtering. Search by name, benefit or protocol, with results updating live across a dozen filter categories.
- Structured profiles. Benefits, risks, research status and popularity for every peptide.
- Research signals. At-a-glance indicators from preliminary to well-studied.
- Use-case categories. Recovery, longevity, fat loss, skin health, cognition and more.
Design approach
Every card shows the essentials at a glance: popularity score, research status and primary benefits. Deeper detail is one click away for those who want it. The goal is high information density that still reads calmly.
Under the hood
- Next.js with server-side rendering for SEO
- TypeScript end to end
- Tailwind CSS for a consistent design system
- Vercel edge deployment
(A closer look) Scroll to explore the full page
Open live site ↗
