Bitpan: a storefront that already works
Bitpan is an ecommerce template for skincare, fashion and modest-wear shops, in two versions in one download: a Next.js 16 app with React 19 and Tailwind CSS v4, and the same pages as plain HTML5 with Tailwind CSS, Alpine.js and Vite. One codebase ships three complete storefronts, each with its own heroes, sections and product range. Start from whichever is closest to your shop and keep the other two as reference.
In the Next.js version every control does something. Add to cart carries the colour, size and quantity you picked into the bag, the cart page and checkout, the heart saves a product to a wishlist, the filters narrow the list, and the search actually searches. Nothing is a button that waits for a backend you have not written yet.
AI ready
- DESIGN.md in the Next.js version holds the design language as values and rules, so an AI coding agent builds new pages in the same style.
- AGENTS.md is the short guide an agent reads first. It sits in both versions: in
template/it covers the conventions and the demo data, inhtml/it covers how the pages, partials, scripts and data fit together. - build-page adds a page, section or component in the template’s design.
- restyle changes the fonts, corners, motion and colours.
- review-design checks changed files against DESIGN.md.
Two versions, one download
template/ is the Next.js version. html/ is the same pages as plain HTML5 with Tailwind CSS 4, Alpine.js 3 and Vite 7: 23 pages, captured from the Next.js build, so the markup, copy and look match. The finished site in html/dist/ opens from a folder and needs no server. Editing it needs Node.js 20.19 or newer. A product, a collection, a blog post and an order are each one sample page, and every card and link that leads to one of them opens the sample, so the sample is the page to restyle. The package holds a guide to each version, documentation/index.html and documentation/html.html. The live preview shows the Next.js version.
Pages
- Three home pages: skincare, fashion and hijab, each with its own hero and section arrangement.
- Collection pages in two layouts, with a filter drawer, a sort dropdown and pagination.
- Product pages in three layouts (sticky gallery, stacked gallery and carousel gallery) with colour and size swatches, a quantity stepper, a lightbox, reviews, FAQs and related products.
- Search over product name, brand and tag, with a shareable URL.
- Wishlist page for the products a shopper saved.
- Cart, as a page and as a slide-over from the header.
- Checkout: contact, delivery address, delivery method and payment, then an order confirmation.
- Order history and a single-order page.
- Account settings with address and email preferences.
- Journal index and article pages.
- About and Contact, plus sign-in, register and forgot-password screens.
- A designed 404 and error page, in the template’s own type and colour rather than the framework default.
What is built in
- One cart from product to confirmation: Add to cart on the product page, on a card and on a past order fills the same bag. Quantity and Remove work in the drawer, on the cart page and at checkout, and the confirmation shows the order that was placed.
- Checkout that checks: inline errors on contact, address and card, and express delivery changes the total.
- Filters, sort and pages in the URL: category, brand, colour and sort, with a Clear button and an empty state.
- Wishlist, share and reviews: a heart on every product card, the device’s share sheet on products and posts, and a write-a-review dialog.
- Search that works: filters the catalogue by name, brand or tag and survives a refresh.
- A phone action bar on product pages that keeps the price and Add to cart in reach.
- Size guide dialog on the fashion and hijab storefronts.
- Product options: colour swatches and size selection, operable by keyboard and announced to screen readers.
- SEO done properly: sitemap, robots, per-page canonical URLs, Open Graph and Twitter cards, and Organization, Product and BreadcrumbList structured data. Account and checkout pages are marked noindex, where they belong.
- A social card drawn for every product, article and collection, generated at build time.
- Blur-up images, a web app manifest and a full icon set.
- A link check:
npm run checkbuilds, type-checks, lints and scans every built page for links that go nowhere.
In the HTML version the same pages carry the in-page behaviour: menus, drawers, the gallery and its dialog, carousels, tabs, accordions, quantity steppers, validation messages and toasts.
Built to stay fast
All 148 pages of the Next.js version are built at deploy time. Exactly one image is preloaded per route. Source images are sized to how they actually render, and AVIF is enabled at serving time. The data layer never reaches the browser bundle.
Stack
- Next.js 16.3 with the App Router and Turbopack
- React 19.2
- Tailwind CSS v4.1, configured in CSS with no
tailwind.config.js - TypeScript 5.9
- Headless UI 2.2, Heroicons 2.2, Hugeicons 1.2, Embla Carousel 8.6
- DM Sans and Playfair Display, self-hosted at build time
- HTML version: HTML5, Tailwind CSS 4, Alpine.js 3, Vite 7, Handlebars partials
What is not included
- No backend. Products, collections, posts and orders are literal values in one file. The cart and wishlist live in the browser’s memory, so a reload starts the demo over. There is no database, no API key and no service to sign up for.
- The HTML version leaves the backend to you. Saved choices (the bag, hearts, orders), filtering and sorting of lists, and search results are as captured, because they need a server of your own. The guide lists each difference.
- Six blog images are loaded from images.unsplash.com rather than shipped. The HTML version links the same photographs.
- The demo photography is for the demo. Replace it with your own before you launch. The licence file says which is which.
- The HTML version ships no sitemap or robots file, and says how to add them.
- Dark mode is deliberately switched off, and the documentation says how to turn it back on.