Build gamification with Bricqs
The complete build guide for engineers and technical PMs shipping points, tiers, badges, challenges, contests, streaks, leaderboards, rewards, and referrals. Pick an integration path, learn the underlying model, copy a working pattern, push to production. Headless React SDK for React/Next.js apps, REST API for everything else — same engine behind both.
Key takeaways
Quick read- Two integration paths today: headless React SDK (11 typed hooks for React/Next.js apps) and REST API (every state and mutation, callable from any HTTP-capable stack).
- Server-side scoring is non-negotiable. Client state is gamed within hours of release. Points, contests, and rewards always reconcile against the canonical ledger.
- Idempotency keys on every write. Retries must never double-credit — points, contest entries, and reward claims all enforce uniqueness at the database level.
- API keys are tenant-scoped, with separate participant and admin scopes. Mint short-lived participant tokens server-side; never ship admin keys to the browser.
- Webhooks deliver outbound events with HMAC-SHA256 signing and exponential-backoff retry. Verify the signature header before acting on any webhook body.
Integration paths
Three ways to ship gamification
Pick the path that matches the surface you are integrating into. Most production builds combine the SDK and the REST API, while technical PMs often start in the concept guides before choosing an implementation path. SDK for member-facing React UI, REST API for server-side scoring, admin tooling, and any non-React stack. iframe an engagement page when speed beats UI control.
Headless React SDK
11 typed React hooks for points, tier, badges, streaks, challenges, leaderboards, rewards, referrals, engagement components. Zero JSX, you own the UI. Best when your design team controls the surface.
REST API
Every state and mutation exposed as one HTTP call. /gamify for participant + admin, /ingest for events, /challenges, /contests, /referrals, /webhooks. Idempotent writes, append-only ledger, anti-fraud built in. The only path for non-React stacks (Vue, Svelte, server-rendered, native mobile, partner platforms).
iframe an engagement page
Drop a Bricqs-hosted engagement page (quiz, spin, scratch, challenge surface) into your site via iframe. UI is rendered by the Bricqs runtime; you pass the participant id. Best for marketing-led drops where the team wants to ship without engineering.
End-to-end example
See every primitive compose into one product
Reading a single SDK or API page tells you how one hook works. The example below shows how nine mechanics compose — onboarding coins, daily activity, streaks, follower milestones, weekly leaderboards, badges, season rewards, webhooks, and referrals — wired end-to-end on a real product surface. If your stack maps to this page, the engine will handle it.
Esports social network on Bricqs
A complete walkthrough for “Qlan.gg” — a hypothetical gamer social network. Onboarding coins, daily activity loop, login streak with freezes, follower milestones, weekly Valorant/Apex/BGMI leaderboards, badge catalog, season-tier rewards driven by webhook fulfilment, weekly challenges, and squad referrals. Every API call, every SDK hook, every UI component shown.
Read the walkthrough →Coins
Streaks
Badges
Leaderboards
Challenges
Milestones
Rewards
Webhooks
Referrals
Compare the paths
SDK vs REST API vs iframe
A side-by-side comparison so you can pick the right path the first time.
| Capability | Headless SDK | REST API | iframe page |
|---|---|---|---|
| Stack | React 18+, Next.js, Vite, Remix, Astro islands | Any HTTP-capable backend, mobile, or non-React frontend | Any page that can host an iframe |
| UI control | Full — you render everything in your own components | Full — you render everything in your own components | Bricqs renders the engagement |
| Best for | Member-facing UI inside a React app | Server-to-server, mobile, partner platforms, Vue/Svelte/server-rendered | Marketing campaigns, microsites, partner placements |
| Auth model | Short-lived participant tokens minted server-side | API key (participant or admin) + optional participant token | Participant id passed via URL or postMessage |
| Real-time updates | Built-in revalidation channel | Poll the read endpoints at the cadence you need | Handled inside the iframe |
| Engineering effort | Medium | Medium | Low |
By stack
Starting points by stack
Stack-specific entry points so you skip the setup decisions and go straight to the first hook or endpoint.
React + Next.js (App Router)
Install @bricqs/headless-react. Mint participant tokens in a Route Handler. Wrap the app in BricqsProvider once. usePoints, useTier, useChallenge render in any Client Component. SSR-safe via passed-in token prop.
Vite, Remix, Astro
Same package. The Provider lives at the root of the client island. Use the same hook surface; the SDK does not depend on Next.js APIs.
Vue, Svelte, or server-rendered
Skip the SDK; call /api/v1/gamify directly with fetch or your HTTP client of choice. Every state in the SDK is exposed as one GET, including the one-call /participants/{id}/state.
Node, Python, Go, any backend
POST events from your backend, claim rewards, run admin operations. One Authorization header, deterministic Idempotency-Key on every write. No client library required.
Native mobile (iOS / Android)
REST API via your platform's HTTP client (URLSession, Retrofit, OkHttp). No native SDK ships today; the REST surface is fully sufficient. Mint participant tokens on your backend and pass them to the app.
Server-to-server / partner
Webhooks for outbound; REST API for inbound. HMAC-SHA256 signing on every webhook. Exponential backoff with up to 12 retries over 24 hours.
The library
Every developer guide, in one place
The cluster below mirrors the marketing IA. Every strategy guide should hand off cleanly into a technical concept, an implementation pattern, or the API reference — pick by goal, by primitive, or by surface.
Guide cluster
Start here
Architecture overview
Data model, event flow, where each Bricqs primitive lives. Read first.
Read the guideGetting started
SDK or REST API. Pick the right path for your stack.
Read the guideTechnical concepts library
The bridge between strategy and implementation. Best starting point for technical PMs and martech teams.
Read the guideImplementation patterns
End-to-end flows that compose multiple primitives into one shipped experience.
Read the guideGuide cluster
End-to-end examples
Guide cluster
Headless SDK
Setup
Install @bricqs/headless-react, BricqsProvider, participant tokens, environments, SSR.
Read the guidePoints and tiers
usePoints, useTier, useBadges. Award flows, multipliers, expiry.
Read the guideChallenges
useChallenge, objective progress, completion handoff, multi-step flows.
Read the guideStreaks
useStreak with grace periods and freeze tokens.
Read the guideLeaderboards
Global, bracketed, and segmented leaderboards in your UI.
Read the guideEngagement
Quizzes, spin wheels, scratch cards, predictions — engagement components.
Read the guideRewards
useRewards, claim flow, redemption codes, expiry windows.
Read the guideReferrals
useReferral, share links, attribution, double-sided rewards.
Read the guideGuide cluster
Concepts
Progression concepts
Points, badges, tiers, streaks, and leaderboards as one technical cluster.
Read the guideEngagement concepts
Challenges and contests for technical PMs and engineers planning journey-based mechanics.
Read the guidePoints
How a points engine works: ledger model, idempotent grants, balance vs lifetime, expiry policies.
Read the guideBadges
Definitions vs awards, idempotent awards, three trigger patterns, locked-state rendering.
Read the guideTier
Tier evaluation on points changes, manual override, next-tier progress, downgrade patterns.
Read the guideStreak
Period keys, grace credits, idempotent ticks, timezone handling, at-risk detection.
Read the guideLeaderboard
Computed-on-read with cache, individual rank lookup, period rollover, segment scoping.
Read the guideRewards
Code inventory, idempotent claims, one-step points deduction, fulfillment patterns.
Read the guideChallenges
Enrolment, objective evaluators, milestone payouts, per-cohort leaderboards. Long-form journeys.
Read the guideContests
Lifecycle states, scoring rules, fraud detection, prize allocation, budget caps.
Read the guideGuide cluster
REST API
Auth and keys
Key models, scopes, rate limits, rotation, participant token minting.
Read the guideEvents ingestion
POST /events, batch, custom event types, idempotency, retries.
Read the guideWebhooks
HMAC-SHA256 signing, retry policy, full event-type catalog, signature verification.
Read the guideGuide cluster
Patterns
Onboarding flow
End-to-end activation challenge using SDK + API. Working code, no hand-waving.
Read the guideStreak with freeze
Daily streak with grace periods and forgiveness tokens. Production-ready.
Read the guideSpin campaign
10-day spin sale with email gate, daily fairness, anti-fraud, spend ceiling.
Read the guideSports prediction
Pre-match prediction across a tournament. Scoring, tie-breakers, sponsorship hooks.
Read the guideLoyalty tier engine
Points + tiers + perks wired end to end. Earn rules, tier qualification, perk evaluation.
Read the guideReferral loop
Double-sided referral with attribution tracking and milestone bonuses.
Read the guideGuide cluster
What the engine guarantees
What you get from the engine
Production guarantees, not just an API
What Bricqs handles so you do not have to.
Idempotency on every write
Send an Idempotency-Key on any write — points awards, contest entries, reward claims, events — and retries are guaranteed safe. Same key, same response, no double-credit.
Append-only ledger
Every points award, deduction, contest score, and reward claim is a row in an append-only ledger. Reconcile, rebuild, and audit without ever mutating history.
Server-side anti-fraud
Velocity caps per participant. Suspicious rank-jump detection on contests. Reward inventory locked atomically so two parallel claims can never collide. Auto-disqualification before prizes are allocated.
Rate limits and back-pressure
Per-API-key and per-tenant rate limits prevent any one client from starving others. Spikes are buffered so a sponsored stream or a championship final does not drop events.
Tenant isolation
Every row, every key, every ledger entry is tenant-scoped. Multi-tenant safe by default — your tenant never sees another tenant's data and vice versa.
Observable end-to-end
Every event you POST is traceable through the engine. Failed webhooks, dropped facts, and rate-limit hits are surfaced in the dashboard so support can answer 'where did my points go?' in one query.
Developer FAQ
Common questions when integrating gamification with Bricqs.
Ready to ship?
Build with Bricqs
Headless SDK for React UIs. REST API for any backend, mobile, or non-React frontend. Same engine, two paths.
