A legacy store that was holding the business back
Real Peptides came to us with a legacy platform that had served them well early on but was now holding the business back.
- 01Slow page loadsProduct pages were slow to become interactive on mobile, and a growing catalogue with heavy imagery made it worse.
- 02Poor search visibilityThin, template-driven product pages struggled to rank against larger competitors for high-intent queries.
- 03Third-party dependencyCore commerce logic lived inside a hosted platform, limiting customisation and adding recurring cost.
- 04No room to growThe team wanted customer accounts, wholesale pricing tiers, and a research library — none of which fit the existing platform cleanly.
Four reasons that mapped directly to the client’s goals
- 01
Full-stack in one codebase
Next.js API routes let us build the commerce backend — catalogue, cart, orders, pricing — alongside the front end in a single TypeScript project. No separate service to deploy, no schema drift between client and server.
- 02
Server-side rendering for SEO
Every product, category, and content page is rendered on the server with complete HTML, so crawlers see fully populated pages. The Metadata API, sitemap generation, and structured data gave us full control over indexing.
- 03
Performance by default
Automatic image and font optimisation, route-based code splitting, and React Server Components meant far less JavaScript shipped to the browser.
- 04
Cloud-native deployment
Next.js runs cleanly on AWS, letting us pair it with Cognito for authentication and the wider AWS ecosystem for storage, delivery, and observability.
Two-week sprints, a staging build at the end of each
Development ran in two-week sprints with a staging deployment on AWS shared at the end of each.
- 01API-first buildThe Route Handlers were built and tested before UI work began, giving the front-end team a stable, typed contract from day one.
- 02Design system in codeTailwind tokens for colour, spacing, and type were generated directly from Figma variables, keeping design and code in lockstep.
- 03Streaming SSRProduct pages render the shell immediately and stream in sections waiting on API data, so users see meaningful content well before the full page resolves.
- 04Custom cart and checkoutBuilt with Server Actions against the internal API — no third-party cart script, no layout shift, optimistic UI updates.
Built for speed, search and scale
Front end
- Next.js (App Router)Routing, server-side rendering, and data fetching
- ReactServer Components for data-heavy pages, Client Components only where interactivity is needed
- TypeScriptEnd-to-end type safety shared between API routes and UI
- Tailwind CSSUtility-first styling with a custom design token system
- Framer MotionSubtle, performance-conscious micro-interactions
API & commerce layer
- Route HandlersA custom REST API for products, categories, cart, orders, pricing tiers, and certificates of analysis
- Server-side renderingEvery product page arrives fully populated with pricing, stock, and purity data
- Server ActionsCart mutations and checkout steps without client-side API plumbing
- Amazon RDS (PostgreSQL)Product catalogue, orders, and customer records
- Payment gatewaysPCI-compliant payment processing
A storefront built as a credibility signal
From research to launch
- 01
Discovery & Research
We studied the brand, target audience, product categories, and competitor experiences to establish the foundation for the platform.
- 02
UX Strategy & UI Design
We mapped key user journeys and created wireframes before developing a clean, research-focused visual interface.
- 03
Product Experience
We structured product pages to clearly communicate specifications, purity, formats, and other relevant information.
- 04
Development & Integration
The platform was developed with a scalable architecture and integrated with essential product, account, and commerce functionality.
- 05
Testing & Optimization
We tested the experience across different screen sizes and optimized navigation, usability, and overall performance.
- 06
Launch & Support
The final platform was prepared for launch with a scalable foundation for future products, features, and improvements.
A partnership that keeps growing
We continue to partner with Real Peptides on a phased roadmap — all built on the same Next.js and AWS foundation.
- Subscription ordering
- A peer-reviewed research hub
- International storefronts
- Subscription ordering
- A peer-reviewed research hub
- International storefronts
