DopeShoe is an open-source shoes e-commerce template built with Next.js, TypeScript, Stripe, and Hygraph, designed to handle product browsing, cart management, Stripe checkout, and order history in one storefront.
What is DopeShoe?
DopeShoe is a full-stack e-commerce template for shoes, built with Next.js and TypeScript, that integrates Stripe for payments and Hygraph as a headless CMS. It takes product data from Hygraph via GraphQL and outputs a responsive storefront with search, filters, a shopping cart, Stripe checkout, and a user profile showing past orders. The template is published by GitHub user ViniSCode and has a live preview hosted on Vercel.
Key Features
- Next.js + TypeScript — built on the React framework with TypeScript for type safety across components and API routes.
- Stripe Checkout integration — handles card payments, product validation at checkout time, and Stripe webhooks to keep order records in sync; test card data (4242 4242 4242 4242, 12/30, CVC 123) lets users complete a trial purchase.
- Hygraph headless CMS — products are retrieved from Hygraph using GraphQL, and completed customer orders are written back to Hygraph after webhook confirmation.
- GraphQL + URQL + Codegen — API requests are managed with URQL client and GraphQL Codegen generates typed hooks and types from the schema.
- Next Auth with Google login — authentication is handled by Next Auth with Google as the provider, so users can sign in before checkout.
- Shopping cart and product pages — a cart supports adding items from product detail pages; the live preview includes a product page with buy button and add-to-cart action.
- Search and filters — customers can search shoes by name and sort by lower/higher price or newest items through filter controls.
- Profile page and order history — signed-in users can view their previously placed orders, which are stored in Hygraph after checkout.
Who is it for?
- Developers building a Stripe-powered store — use this template as a working reference for wiring Next.js to Stripe Checkout, webhooks, and a headless CMS.
- E-commerce learners — the codebase demonstrates a complete purchase flow (browse → cart → checkout → webhook → order save) and is documented with a step-by-step ToDo checklist.
- Shoe store owners — the live preview can be tested for real purchasing behavior; product content is managed via Hygraph, so inventory can be updated without code changes.
What can you do with DopeShoe?
- Students learning payment integration: follow the repo's ToDo process to see how Stripe payment intents and webhooks are implemented in a real Next.js app.
- Developers prototyping a storefront: clone the repository, connect your own Hygraph project and Stripe keys, and get a functional storefront with Google login and order storage.
- Anyone evaluating Hygraph: this template shows how to query products and persist orders through GraphQL mutations in a Next.js environment.
FAQ
How do I make a test purchase on the live preview?
Use the card number 4242 4242 4242 4242 with any future expiration date and CVC (the README suggests 12/30 and 123). These are Stripe test credentials and will not charge a real card.
What CMS does DopeShoe use?
DopeShoe uses Hygraph, a headless CMS, for product data and order records. Products are fetched through GraphQL queries, and orders are saved with GraphQL mutations after Stripe webhook confirmation.
Does it support local development?
Yes, because it is a Next.js project it can be run locally with standard Next.js commands, provided you configure your own Hygraph content model and Stripe account keys.
