Overview
Park & Pick is a storefront concept under the tagline "Derisking food chains through technology." It's a fully branded online store, built in about three weeks in late 2022, with a live catalogue, search, wishlists and checkout backed by a headless commerce platform.
Live at packandpick.vercel.app. The engineering behind it — Next.js Commerce's provider abstraction and the Swell backend — is written up separately in Headless Commerce on Next.js Commerce and Swell.
What shoppers get
- Browse and search. A home page leading with the full product grid, plus search pages that filter by category and brand.
- Product pages for each item in the catalogue.
- Wishlist, enabled for this store, to save items for later.
- Cart with live quantity updates, and checkout handed off to the commerce platform's hosted flow.
- Light and dark themes, and localised routing in English (US) and Spanish.
Building the brand
I built Park & Pick on an open-source commerce foundation so the effort could go into the product rather than plumbing. The work, tracked in the repo as a series of rebranding changes, included:
- a new identity: logo, favicon and app icons, hero copy and footer;
- SEO metadata for the store: title, description, site name and social handles;
- a simpler home page that leads with the full product grid;
- trimmed sorting options and home-page sections;
- turning on the wishlist and switching the store from mock data to a live Swell backend.
Lessons
Starting from a mature open-source storefront was the right trade for a concept store: within weeks it had search, cart, wishlist and checkout that would have taken months to build well. The cost is that you inherit someone else's architecture and upgrade cadence. That's acceptable when the commerce backend is swappable behind a provider interface, as it is here.
Built with
- Next.js 12, React 18, TypeScript, Tailwind CSS
- Next.js Commerce, Swell (headless commerce backend)
- Vercel