Customers
Discover offers, compare deals, manage purchases and wallet activity, save favorites, and complete checkout flows designed for trust and clarity.
One-liner
OffBon is a discount and coupon marketplace connecting local businesses with customers, with merchant tooling, payments, wallet and rewards mechanics, and platform administration—delivered as a modern web application with an optional native mobile shell for field use (camera, location).
Product scope
What each audience gets in the product.
Merchants
Onboard businesses, manage listings and campaigns, operate within usage and subscription constraints, and use workflows suited to staff-operated stores (separate operational surfaces where relevant).
Platform operators
Run moderation, catalog and homepage merchandising, user support workflows, and configuration of business rules (e.g. which advanced deal types are enabled globally).
Interface showcase
Real product surfaces across consumer, merchant, admin, and mobile experiences.
Consumer deal discovery
Browse offers by city/category with clear claim actions and comparison-friendly cards.
Trust-first checkout surface
Deal details, verification cues, and purchase flow designed for confidence and clarity.
Merchant operations dashboard
Performance metrics and campaign signals for store teams managing active deals.
Admin governance panel
Moderation, status controls, and operational oversight to protect marketplace quality.
Wallet and rewards
Mobile-first wallet experience with balance, points, and transaction visibility.
Mobile app shell
Same product system packaged for mobile usage with field-ready interactions.
Marketplace landing
Entry point balancing business discovery, category navigation, and quick search.
Dual commercial model
Product complexity: two modes, one consistent experience.
- Two complementary modes: a classic paid-coupon (“discount purchase”) model and a vendor-funded incentive (“reward / budget”) model—economics differ in who pays, who receives value, and how platform margin is implied.
- The UX and data model stay consistent while branching validation, pricing, and reporting—domain-driven UI with strict server-side enforcement so the client cannot “negotiate” business rules.
Tech stack
Tools and platform choices—capabilities, not file names.
React + TypeScriptVite build pipelineAccessible UI (Radix-style primitives)Utility-first stylingSupabase (PostgreSQL, Auth, storage, edge functions, RPC)Stripe (checkout & subscription-related server paths)TanStack Queryi18next (multi-locale, fallback policy)Capacitor (Android, camera, geolocation)
Engineering techniques
How it was built—not repository layout.
- Single Page Application with client-side routing for fast transitions and rich interactivity.
- Strong typing end-to-end on the client as the domain grew (deals, merchants, wallet, admin).
- Form-heavy workflows with schema validation for merchant onboarding and deal creation across languages.
- Composable UI (design system mindset): dialogs, tables, filters, toasts, responsive layouts—especially for admin and merchant dashboards.
- Progressive enhancement for operations: QR scanning and verification flows tuned for in-store usage.
Security & trust
Approach to data, auth, media, and payments.
- Row Level Security and database policies as the primary guardrail; privileged operations through controlled server paths (edge functions / RPC), not “trust the client.”
- Authentication with email flows and federated sign-in where enabled; sensitive actions tied to authenticated sessions.
- Media via managed storage with controlled upload paths (merchant-scoped folders where applicable) to reduce abuse and accidental data mixing.
- Payment safety: client handles intent/UI; secrets and confirmation follow server-side patterns consistent with Stripe’s model.
Reliability, performance & DX
Shipping behavior teams and operators can rely on.
- Explicit async boundaries: toasts and loading states for long operations (uploads, verification, purchases).
- Caching discipline for catalog-like reads while keeping mutations predictable.
- Build tooling tuned for iteration (fast dev server, typed checks in CI-friendly workflows).
Challenges we solved
Founding-engineer story beats—constraints, decisions, outcomes.
SPA hosting vs deep navigation
Direct reloads on nested app URLs fail on naive static hosts; fixed with host-level rewrites so every path serves the app shell, then the client router takes over.
Multi-audience product
Same codebase serves consumer browsing, merchant operations, and admin—clear separation of layout, permissions, and mental models to avoid accidental coupling.
Bilingual product reality
Persian-first audience with English/French expansion demands RTL/LTR discipline (logical spacing/direction) and translation hygiene (no hardcoded UI strings in business flows).
Two deal economics in one schema
Prevent invalid combinations with validation at creation time and database constraints / functions where atomicity matters (wallet, redemption, usage counters).
Operational trust
Merchant verification hooks and moderation-friendly admin tooling so marketplace quality does not degrade as volume grows.
Outcome
End-to-end ownership: product shaping, full-stack implementation, payments, security-minded data modeling, multi-language UX, merchant and admin complexity, and shipping a real marketplace-style system—not a toy demo.
Portfolio summary
“OffBon is a multilingual discount marketplace with merchant dashboards, wallet mechanics, Stripe payments, and Supabase-backed security (RLS + server functions). Engineering leadership across customer, merchant, and admin surfaces—including dual deal models (classic coupons vs vendor-funded incentives), mobile packaging, and production hosting concerns like SPA routing correctness.”