oxabags is an open-source e-commerce template built on the Next.js App Router that sells jute and cotton bags, aimed at manufacturers, wholesalers, and exporters who need a storefront for corporate events and exhibitions. The template produces statically generated product pages, integrates Sanity.io as a headless CMS, and processes payments through Razorpay Invoices, making it a full-featured storefront for a niche product line.
What is oxabags?
oxabags is a complete e-commerce starter project for selling bags, developed with Next.js and TypeScript. It takes product data from Sanity.io, renders it into statically generated product listings and detail pages, and supports a shopping cart with Zustand state management and a checkout flow validated with React Hook Form and Zod. The site is deployed on Cloudflare Pages and uses Shadcn/UI components styled with Tailwind CSS.
Key Features
- Type-safe development — The whole project is written in TypeScript, catching errors at compile time and improving maintainability.
- Statically generated product pages — Next.js App Router generates product pages at build time, improving performance and SEO.
- Shopping cart with Zustand — Client-side cart state is managed through Zustand, allowing persistent selections without server roundtrips.
- Secure checkout with form validation — Checkout forms use React Hook Form and Zod for client-side validation, with payment handled via Razorpay Invoices.
- Headless CMS with Sanity.io — Product content lives in Sanity, enabling non-technical editors to update inventory without touching code.
- Responsive design — The Shadcn/UI components and Tailwind CSS produce layouts that adapt to mobile and desktop viewports.
- Deployment on Cloudflare Pages — The template is ready to deploy on Cloudflare Pages, with environment variables for Sanity and Razorpay.
Who is it for?
- Bag manufacturers and wholesalers — Create an online catalog for their jute and cotton bag collections, with the ability to take orders directly through the site.
- Promotional product distributors — Use the built-in cart and checkout to sell customized bags for corporate events and exhibitions.
- Web developers building e-commerce stores — Fork the repository as a starting point for a Next.js storefront, replacing the product model and payment provider as needed.
What can you do with oxabags?
- Sell bags online — Display a wide selection of jute and cotton bags with product images and details sourced from Sanity, then let customers add items to the cart and check out.
- Run a corporate promo store — Use the cart and Razorpay Invoices to handle bulk or single orders for event merchandise.
- Customize the storefront — Swap the Shadcn/UI components, adjust Tailwind styling, or change the CMS structure to fit a different product line.
How does it work?
To run oxabags locally, clone the repository, install dependencies with npm install, configure environment variables for Sanity and Razorpay, and start the development server with npm run dev. The project builds on Next.js App Router so static pages are generated automatically, and product updates flow through Sanity's content API and are reflected on rebuild.
FAQ
Is oxabags free to use?
oxabags is an open-source project, so the code itself is free to use and modify. You will need your own Sanity.io and Razorpay accounts to provide the CMS and payment processing, which have their own pricing tiers.
What technology stack does oxabags use?
The stack includes Next.js App Router with TypeScript, Shadcn/UI components, Tailwind CSS for styling, Zustand for state, Sanity.io as the CMS, Razorpay for payments, and Cloudflare Pages for hosting.
What do I need to set up before using it?
Create a Sanity project for your product content and a Razorpay account for invoices, then add their API keys to the environment variables. The repository includes an .env.example file to guide you.
Can I use oxabags for products other than bags?
Yes, the product schema is generic enough to adapt, though the default setup is tailored to jute and cotton bags. You would update the Sanity schema and possibly the Razorpay invoice logic to match your product offerings.
