Vespi is an open-source luxury menswear and womenswear e-commerce template built as a single-page application (SPA) with Next.js, TypeScript, Sanity, Shopify, Stripe, Storybook, Tailwind CSS, Shadcn, React Hook Form, Zod, and Playwright.
What is Vespi?
Vespi is a refined, luxury fashion store and lifestyle journal project that runs as an SPA using Next.js and TypeScript. It takes product data from the Shopify Storefront API and article content from Sanity Studio, then renders a storefront and blog with server-side data fetching through Next.js API routes. Payments are implemented with the Stripe API in demo mode, so no orders are actually fulfilled. The repository is currently under development and was created from Figma templates by Nguyen Le, leader of the Process Masterclass.
Key Features
- TypeScript type safety — The entire codebase is written in TypeScript, providing compile-time checks across the Next.js app.
- Custom 404 page — A designed, developed 404 error page replaces the default Next.js error screen.
- Storybook with accessibility audit — UI components are developed in isolation, and the Storybook a11y add-on runs automated accessibility checks.
- Sanity CMS for blog articles — Blog content is stored in Sanity Studio and retrieved through Grok queries.
- Shopify Storefront API for products — Product data is fetched server-side via Next.js API routes.
- Stripe API in demo mode — Payment processing is wired up but explicitly for demonstration only.
- React Hook Form and Zod validation — Forms use React Hook Form and Zod for input validation.
- Shadcn accessible components — Reusable, accessible components from Shadcn are used throughout the interface.
- Splide.js carousel — An accessible carousel from Splide.js is included.
- Husky pre-commit linting — Husky runs linting before each Git commit.
- Playwright E2E testing — End-to-end tests run across multiple browsers using Playwright.
Who is it for?
- Frontend developers — Use Vespi as a reference for wiring Next.js API routes to Shopify, Sanity, and Stripe in a single SPA.
- E-commerce designers — The repo shows a luxury fashion aesthetic and editorial layout that can be adapted for a store and journal.
- Developers learning testing workflows — Storybook, Playwright, and Husky are preconfigured, making it a practical example of component isolation, E2E testing, and pre-commit hooks.
What can you do with Vespi?
- Build a fashion storefront — List products from Shopify via the Storefront API and display them in a tailor-made, luxury-styled layout.
- Publish a lifestyle journal — Manage editorial articles in Sanity Studio and pull them into the site with Grok queries.
- Prototype Stripe checkout — Use Stripe in demo mode to test the payment flow without charging real cards.
- Audit component accessibility — Run Storybook with the a11y add-on to catch accessibility issues during component development.
FAQ
Is Vespi production-ready?
No. The repository is currently under development, and the Stripe integration runs in demo mode. The project is intended for non-commercial, personal use; no orders will be fulfilled and all trademarks belong to their respective owners.
What stack does Vespi use?
Vespi uses Next.js with TypeScript for the app framework, Tailwind CSS for styling, Shadcn for components, Sanity for blog content, Shopify Storefront API for products, Stripe API for demo payments, Storybook for component development, and Playwright for E2E testing.
Does Vespi include a blog?
Yes. Articles are stored in Sanity Studio and retrieved using Grok queries, which allows the site to serve as a lifestyle journal alongside the fashion store.
