Client
Biofil
Sector
Product Design · Full-Stack Dev
Industry
B2B SaaS · Operations
Year
2025
Biofil's operations team was running on disconnected spreadsheets — tracking warehouse stock, shop inventory, sales rep orders and shipments with no single source of truth. Biofil Ops replaces all of it with a role-enforced B2B platform built on Next.js 16, Supabase, and TypeScript, where stock integrity is guaranteed at the Postgres database level.
Spreadsheets scale until they don't. When a business outgrows its tools, the solution isn't a better spreadsheet — it's a system built around how the business actually works.
Admin & Sales Rep — different surfaces, enforced at the database level
Admin panel — full control over products, warehouse stock, retail shops, sales reps, all order stages, shipments, and a sales analytics dashboard with monthly trends and annual goal tracking.
Sales rep panel — reps see only their assigned shops, create and submit orders, and track their own shipments and sales history. Postgres RLS enforces this — not just the app layer.
Manual stock. No visibility. Orders by email. Errors compounding daily.
Draft → Confirm (stock deducted from warehouse, added to shop shelf) → Cancel (stock fully restored). Enforced by atomic PostgreSQL stored procedures — no race conditions possible.
Complete in-memory backend for zero-config demos. Every query branches on isDemoMode() — swapping the real Supabase client for a full in-memory store. The UI never knows the difference.
- Next.js 16 (App Router) + React 19
- TypeScript · Supabase · PostgreSQL RLS
- Tailwind CSS v4 · Flowbite React · Recharts
- Zod · Server Actions · xlsx import
Row-Level Security doesn't just restrict the UI — it enforces the rules at the database. Sales reps can't even query data they shouldn't see.
The order lifecycle is enforced by Postgres stored procedures — confirm_order deducts from warehouse and adds to shop shelf in a single atomic transaction; cancel_order fully restores stock. Both run as SECURITY DEFINER functions, preventing any race condition between concurrent orders regardless of network timing.
The dual backend architecture lets the platform run a complete, fully interactive demo without any cloud setup or credentials. A custom proxy.ts edge middleware handles session refresh, demo cookie auth, and role-based redirects before any page renders — keeping auth logic out of components entirely.
Architecture decisions that make the platform reliable at scale — not just functional at launch.
RLS at the Postgres level. Atomic stock RPCs in a single transaction. Edge auth gate before any page renders. Dual backend — real Supabase or full in-memory store. Real catalog scraped from the live Biofil site.
Supabase · PostgreSQL
Row-Level Security
SECURITY DEFINER RPCs
Atomic transactions
Server Actions (no client API calls)
Next.js 16 App Router
React 19
TypeScript
Tailwind CSS v4
Flowbite React · Recharts
83 real Biofil products synced via custom Node.js scraper. Excel/CSV bulk import with downloadable template. Zod validation on all mutations.
UPS, CTT, or rep hand-delivery — full status tracking for every shipment from dispatch to delivery confirmation.
Biofil had a real operational problem. The platform's job was to solve it completely — and make it impossible to reintroduce the same errors through better architecture, not just better habits.
