Wefootwear Store is a full-stack Next.js e-commerce template for footwear shops, built on Tailwind CSS, Strapi CMS, MongoDB, and Stripe payments.
What is Wefootwear Store?
Wefootwear Store is an example online shop built with Next.js, the React framework, and deployed on Vercel. It uses Strapi CMS to serve product data, MongoDB for storage, and Stripe in test mode for checkout. The storefront includes authentication, live product search, a shopping basket, a wishlist, and an order confirmation page. The project is maintained on GitHub by user mudzikalfahri, with the repository description "next js footwear store e-commerce."
What makes Wefootwear Store stand out?
The template combines a JAMstack architecture with headless commerce features, including Incremental Static Regeneration (ISR) on product pages so content updates without a full rebuild. Its tech stack is Next.js, React, Tailwind CSS, Strapi CMS, MongoDB, Stripe, and Redux Toolkit — with Vercel as the deployment target. Key capabilities from the project's README are:
- Authentication — sign up and sign in for customers, backed by the Strapi user system.
- Incremental Static Regeneration — product pages are statically generated and updated at runtime.
- Basket and wishlist — add or remove products from either list using Redux Toolkit state management.
- Category search — filter products by category, plus live search as you type.
- Stripe payments — process test-mode checkouts with card number 4242 4242 4242 4242 to complete a payment.
- Order page — displays a successful order after checkout.
- Environment-based configuration — setup requires a .env.local file with NEXT_PUBLIC_APIURL, STRIPE_SIGNING_SECRET, HOST, STRIPE_SECRET_KEY, and STRIPE_PUBLIC_KEY values.
Who should use Wefootwear Store?
Developers who want a working Next.js e-commerce starter for a footwear or fashion brand will find this template useful because it already wires together Strapi, MongoDB, and Stripe. Business owners exploring a headless commerce setup can use it as a reference for how product content, cart state, and payment flows connect in a real project. Students learning full-stack JavaScript can study its folder structure, API routes, and the integration between the storefront and CMS.
Use cases
- Footwear retailers: launch a storefront with product catalog, live search, and Stripe checkout without building the integration from scratch.
- Agencies demoing Next.js: use the template as a portfolio piece that shows headless CMS and payment handling.
- Hobbyist developers: extend the example by adding a product detail page improvement, customizing the Tailwind theme, or switching Strapi for another CMS.
How does Wefootwear Store work?
The project is structured as a Next.js client application that pulls content from Strapi CMS and stores data in MongoDB. After cloning the repository, you add a .env.local file with five environment variables to connect your own Strapi API and Stripe keys, then run the dev server. Product pages use Incremental Static Regeneration, and the checkout flow posts to Stripe in test mode to return an order confirmation.
FAQ
What Stripe card can I use to test payments?
Use the Stripe test card number 4242 4242 4242 4242 with any future expiration date and any CVC. Payments are processed in test mode, so no real money moves.
Does this template include a basket and wishlist?
Yes, both exist. Items can be added or removed from the basket or wishlist, and the state is managed with Redux Toolkit.
What environment variables are required?
The .env.local file must contain NEXT_PUBLIC_APIURL, STRIPE_SIGNING_SECRET, HOST, STRIPE_SECRET_KEY, and STRIPE_PUBLIC_KEY. Without these, the storefront cannot reach the Strapi CMS or Stripe.
Is Wefootwear Store free to use?
The source code is publicly available on GitHub, and the repository shows a demo on Vercel, so you can clone and deploy it for your own project.
