Northwind Goods - React Ecommerce Storefront Template

Northwind Goods is a complete, modern storefront front end for React. It gives you ten finished pages, a persistent cart and wishlist, a validated checkout and an accessible product quick-view modal, so you can start from a real shop instead of a blank project.

Want to try it first? Open the live demo and add something to the cart, use quick view, or place a test order.

What you get

• Ten pages covering the whole shopping journey, from the home page to order confirmation.
• Product quick view that opens any product in a dialog without leaving the page.
• Cart, wishlist, sign-in and order history kept in one small store and saved in the browser.
• Shop filters: search, category, maximum price, rating and an on-sale switch, with five sort orders and a filter drawer on phones.
• Validated checkout with delivery options, promo codes and a clear order summary.
• Design tokens for colour, fonts and spacing defined once in the Tailwind theme.

The ten pages

Product quick view

The quick-view dialog is a real React component, mounted once and opened from anywhere with openQuickView(product). It is built to be used with a keyboard and a screen reader.

• Photo gallery with thumbnails, arrow keys and pointer zoom
• Colour and size pickers, quantity stepper and live total
• Add to cart with a confirmation state, plus wishlist
• Focus is trapped inside the dialog, Escape closes it, and focus returns to where you were
• The page behind is locked from scrolling and hidden from assistive technology while it is open

Built with

• React 19 and React Router 7
• Vite 7 for fast development and small production builds
• Tailwind CSS v4
• No UI framework lock-in and no runtime dependencies beyond React and the router

Get started

1. Unzip the download and open the folder in a terminal (Node.js 20.19 or newer).
2. Install the packages with npm install.
3. Start the dev server with npm run dev.
4. Create the production files with npm run build and upload the dist folder to any static host.

Hosting in a sub-folder? Build with VITE_BASE=/my-store/ npm run build. If your host cannot send unknown paths to index.html, build with VITE_HASH_ROUTER=true to use #/ URLs instead. A ready-made .htaccess example is included.

Customise it

• Brand and colours: edit the theme block in src/index.css.
• Products: edit src/data/products.js or load products from your own API.
• Images: one img() helper builds every image URL, so you can point it at your own files or CDN.
• Shipping and tax: three constants in src/lib/format.js.

Connect your backend

The demo has no server. All state lives in src/context/StoreContext.jsx, so that is the one place to plug in your API for products, orders and authentication. The payment fields in the checkout are layout only and never leave the page: use your payment provider's hosted fields or checkout page before taking real payments.

What is included

• Full React source code for all ten pages and the shared components
• Vite and Tailwind configuration with a lockfile for repeatable installs
• A README with setup, customisation and hosting notes
• A host rewrite example (.htaccess) for clean URLs

Photos and fonts

Demo photography loads from Unsplash under the free Unsplash License. Replace it with your own before launch. The fonts, Inter and Fraunces, come from Google Fonts under the SIL Open Font License.

See the license terms for what the Regular and Extended licenses cover.