OpenB2B Web is the frontend application of OpenB2B — an open-source, multi-tenant ordering and invoicing platform. This repository contains the React + TypeScript single-page app responsible for the user interface: product browsing, ordering, invoice viewing, and organization-level role interactions.
It’s ideal for building B2B storefronts for small wholesalers such as book distributors, restaurant supply vendors, event merchandise suppliers, and generic B2B product distributors. OpenB2B Web focuses on a polished, accessible UI, accurate order totals, and seamless integration with the backend API.
- ✅ Order Management UI — Create and view orders, order details, and statuses.
- 📦 Product Catalog — Browse, search, filter, and view product details including images and SKUs.
- 🧾 Invoice Viewer — View and download invoices generated by the backend.
- 🔒 Auth & Multi-Tenancy — Organization-based access with Owner, Admin, Sales, and Viewer roles.
- 📊 Dashboards & Reports — Basic sales and order summaries for the current organization.
- 🔁 Offline-friendly UX — Optimistic UI updates and client-side caching where applicable.
The frontend communicates with the OpenB2B backend API. Detailed API reference and interactive Swagger UI are maintained in the backend docs. See ./docs/api.md or the backend repository's documentation for API endpoints, request/response shapes, and authentication webhooks.
- Framework: React + TypeScript
- Build Tool: Vite
- Styling: TailwindCSS
- Routing: React Router
- State Management: React Context API (and local hooks)
- Authentication (frontend): Clerk (handles sign-in flows, OAuth, and session bootstrap)
- Bundler / Dev Server: Vite
- Testing: Vitest (recommended)
- Form Handling: React Hook Form
- Data Fetching: Tanstack Query
- Node.js (v22.0.0 or higher; recommended v22.11.0)
- pnpm (recommended) or npm / yarn
- Git
OpenB2B Web is configured to use Clerk for authentication and session management. Clerk handles UI flows (signup, login, OAuth). The backend is responsible for mapping Clerk users to organizations and roles (via webhooks or custom claims).
For frontend setup details see docs/authentication.md (or the auth section in this repo). Make sure you have the appropriate Clerk keys configured as environment variables (see below).
git clone https://github.com/deveasyclick/openb2b-web.git
cd openb2b-webUsing pnpm (recommended):
pnpm installOr using npm:
npm installOr using yarn:
yarnCreate a .env file in the project root (Vite requires env vars to start with VITE_):
# URL of the backend API (e.g. https://api.openb2b.example.com)
VITE_API_URL=https://api.example.com
# Clerk publishable key (or other frontend keys required by Clerk)
VITE_CLERK_PUBLISHABLE_KEY=clerk_publishable_keypnpm dev
# or
npm run dev
# or
yarn devThis starts the Vite dev server (hot module replacement, fast refresh). The app will call VITE_API_URL for API requests.
# build for production
pnpm build
# preview the production build locally
pnpm preview
# run tests
pnpm test
# run unit tests in watch mode
pnpm test:watch
# run lint
pnpm lint
# format code
pnpm formatpnpm buildThe production-ready static files are generated in the dist/ directory (Vite default). You can serve them with a static server or deploy to any static hosting provider.
pnpm previewThis serves the built dist/ locally so you can verify the production build.
Quick way to serve dist/ locally using serve:
pnpm build
npx serve -s distWe welcome contributions! Suggested workflow:
- Fork the repo.
- Create a feature branch:
git checkout -b feat/your-feature. - Run the dev server and add tests where applicable.
- Open a pull request with a clear description and screenshots (if UI changes).
Please follow the repo's code style, run linters, and include tests for new behavior.
For support, feature requests, or feedback, contact:
- Email: support@openb2b.com
- Phone: +234-8067177670
- Website: https://openb2b.com/support