The backend requires an API key, which would be exposed if the client called it directly.
Routed all backend calls through Next.js API routes that add the key on the server.
Case Study
Web
XXXIII
XXXIII is a Next.js web platform that handles account setup, identity, and paid access for the O mobile app. Participants create an account with an immutable coordinate identity, choose a free or member tier, pay securely through Stripe, choose a Direction for their contribution, and are then sent back to the mobile app with a secure session.
Next.js
Tailwind CSS
Framer Motion
Three.js
Challenges & solutions
The technical problems our team solved to ship a reliable, unified web experience.
Moving a signed-in user from the browser to the native app securely.
Implemented OAuth 2.0 with PKCE and a universal-link callback, so tokens are never passed in plain URLs.
The default Stripe Checkout did not match the minimal brand design.
Used the embedded Stripe Payment Element with custom styling, lazily loading Stripe only on the payment step.
The same calm, animated feel had to work in a browser.
Rebuilt the background in Three.js and the hold gesture as a reusable useHoldToEnter hook driven by requestAnimationFrame.
Coordinate identities must be unique and must never change after creation.
Added client-side validation rules plus server-side checks, and locked the coordinate fields after the account is established.
Key features
What users get in the finished, shipped product.
Account Establishment :
- Onboarding : Guides new participants through a streamlined account setup process.
- Registration : Supports splash screen navigation, email entry, and account creation.
- Identity : Assigns a unique coordinate-based identity to each participant.
Passwordless OTP Login :
- Authentication : Enables secure sign-in without requiring a password.
- Verification : Supports email-based OTP requests and verification.
- Sessions : Manages authenticated user sessions securely.
Invitation and Ballot Codes :
- Access Control : Regulates platform access through controlled code-based entry.
- Redemption : Allows participants to redeem invitation codes.
- Validation : Verifies public ballot codes before granting access.
Tiered Access and Entitlements :
- Membership : Supports Free and Member access tiers.
- Usage Limits : Applies daily Return limits according to each membership tier.
- Authorization : Checks user entitlements to enforce tier-specific permissions.
Stripe Payment Integration :
- Payments : Integrates Stripe Payment Element directly into the web experience.
- Methods : Supports card payments and Apple Pay.
- Checkout : Provides tier-based checkout flows for membership access.
Direction Selection (Contribution Flow) :
- Discovery : Displays available directions for participant contributions.
- Selection : Guides participants through the direction selection process.
- Status : Shows the current contribution status for greater transparency.
Mobile App Authorization (OAuth Handoff) :
- Authorization : Enables the web platform to authenticate users into the O mobile application.
- Security : Supports PKCE-based authorization code exchange.
- App Integration : Uses universal links to return users to the mobile application after authorization.
Account, Identity and History :
- Account Management : Provides participants with an overview of their account details.
- Identity : Allows users to edit their identity information.
- History : Displays previous Return activity for reference.
- Data Control : Supports self-service account deletion.
Immersive UI and Hold-to-Enter :
- Visuals : Uses Three.js animated backgrounds to create an immersive interface aligned with the mobile experience.
- Transitions : Implements fade-text animations for smooth visual transitions.
- Interaction : Features a hold-to-enter gesture to initiate the experience.
- Audio : Integrates ambient background sound to enhance immersion.
Secure API Proxy Layer :
- Architecture : Routes authentication and participant requests through Next.js API routes.
- Credential Protection : Keeps sensitive backend credentials out of the browser.
- Security : Injects API keys server-side to protect sensitive configuration and centralize backend communication.
Tech integrations
Third-party SDKs & libraries
4 core integrations powered
Stripe Payments
Core system integration
Email OTP Authentication
Core system integration
OAuth 2.0 Authorization Server
Core system integration
Node.js / Express Backend API
Core system integration
More Case Studies
Related Work
Similar Projects We've Built
Lead CRM Admin – Multi-Tenant SaaS Administration & Back-Office Portal
Lead CRM Admin is an enterprise-grade administration and back-office portal designed for the Lead CRM SaaS ecosystem. It allows Super Admins and Platform Operators to onboard and manage multi-tenant organizations, administer customer and internal staff accounts, configure granular Role-Based Access Control (RBAC), and manage the full billing lifecycle including plans, invoices, and payment receipts. The platform also provides native integrations with third-party lead sources (IndiaMART, Justdial, Meta), client-side PDF document generation.
FlutterGetX+2
View Case Study
CodeX Lead CRM – Enterprise B2B Sales, Lead & Revenue Management Platform
CodeX Lead CRM is a cloud-based sales automation platform and Progressive Web Application (PWA) built for high-velocity sales teams and B2B enterprises. The platform unifies multi-channel lead ingestion (IndiaMART, Justdial, and Meta/Facebook Ads) into a centralized workspace, featuring drag-and-drop pipeline tracking, deal closing, quotation and receipt generation, shared team calendars, and executive business analytics. It features enterprise-grade multi-tenancy, granular role-based access control (RBAC), and security audit tracking.
Next.jsTailwind CSS+2
View Case Study
XXXIII Admin
XXXIII Admin is an internal Next.js dashboard for managing the whole TURN / XXXIII ecosystem. Admins can write and publish Lines, control the sequence and routing logic, manage Directions, pricing and invitation codes, monitor participants and contributions, and track every change through an audit log.
Next.jsCookie-based Session Management
View Case Study
QuickAssist – WhatsApp Service Booking System
QuickAssist is a smart service booking platform that allows customers to book home services directly through WhatsApp without downloading any mobile application. Customers can easily schedule services such as appliance repair, home cleaning, plumbing, salon services, painting, makeup, and more through an automated WhatsApp assistant. All booking requests are managed in real-time through an admin […]
WhatsApp Business PlatformSupabase+4
View Case Study
Have a similar idea? Let's build it together.
From concept to launch, we turn your vision into a world-class product.