Skip to content

Frontend Engineering

Product Engineering

SmoothBook

SmoothBook is a multi-tenant short-let booking platform designed to help property managers and booking agents manage accommodation listings, reservations, availability, and related operations. As a co-founder and frontend engineer, I am developing the platform's frontend architecture across three Next.js applications: a manager portal, an agent portal, and a marketing website. My work includes organization-based authentication and authorization, portfolio-scoped data access, booking workflows, availability management, payment integrations, and reusable frontend infrastructure. The implementation uses Better Auth for organization management, TanStack Query for server-state management, and typed API integrations. Key features include organization switching, multi-step bookings, identity document uploads, date availability restrictions, and price previews reconciled against server calculations. SmoothBook is currently in pre-launch development.

Project details

Project type
Multi-Tenant Booking SaaS
Role
Co-founder & Frontend Engineer
Engagement
Independent · Co-founder
Period
April 2026 – Present
Status
Pre-launch · In development
Technologies
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • TanStack Query
  • Better Auth
  • Eden Treaty
  • REST APIs
  • Paystack
  • Airtable
  • Bun
  • Docker

Context

Project context.

SmoothBook is a short-let booking and property management platform designed around the operational needs of accommodation managers, property owners, and booking agents. The product brings property portfolios, accommodation availability, booking activities, payments, and related account management into a connected system. The frontend consists of three Next.js applications: a manager portal, an agent portal, and a marketing website. The manager portal provides workflows for managing properties, bookings, availability, and operational information. The agent portal supports agents working with accommodation portfolios and reservation activities. Both applications require organization-aware data access, authentication, and interfaces tailored to different user responsibilities. As a co-founder and frontend engineer, I am responsible for developing the frontend architecture and implementing these product experiences. The platform is still in development and has not yet launched publicly.

Project setting

SmoothBook is being developed as a multi-application SaaS product rather than a single website with different dashboard screens. Its architecture must support organization switching, account-level permissions, shared authentication, and consistent data management across applications. The product also includes payment-related features such as payment links, wallets, and commissions, alongside accommodation booking and availability workflows. Because the platform is still in pre-launch development, the focus of this case study is on implemented engineering work and product capabilities rather than unverified adoption or commercial outcomes.

Problem space

  • Property managers need a structured way to manage accommodation listings, reservations, and availability.
  • Booking agents need dedicated workflows for managing bookings and accessing the portfolios relevant to their work.
  • Organizations require separate data contexts and permissions so users interact with the appropriate accounts and properties.
  • Booking interfaces must handle guest information, identity documents, date selection, and price calculations without creating unnecessary complexity.
  • Availability selection must account for already-booked dates to prevent users from choosing conflicting reservations.
  • Pricing information displayed in the frontend must remain consistent with backend calculations.
  • Multiple frontend applications need consistent authentication, API integration, and shared engineering patterns.

Target users

  • Short-let property owners.
  • Property managers and accommodation operators.
  • Booking agents managing reservations and client requests.
  • Teams coordinating property portfolios, bookings, and payments.

Contribution

My contribution.

I am a co-founder and frontend engineer on SmoothBook, responsible for architecting and developing the frontend across its manager portal, agent portal, and marketing website. My work covers multi-application architecture, authentication, organization-aware authorization, data fetching, booking experiences, availability management, payment integrations, and shared frontend infrastructure.

My role combines frontend engineering with product development. Beyond implementing interfaces, I work on how the applications are structured, how users move between organizations, how booking workflows behave, and how frontend data stays consistent with backend services. A major consideration is maintaining clear separation between organizations and user roles while providing a practical experience for managing accommodation bookings.

  1. Multi-Application Frontend Architecture

    Architected three Next.js applications for the manager portal, agent portal, and marketing website. Established shared approaches to API communication, authentication, and frontend development so the applications could support their different responsibilities without unnecessarily duplicating foundational logic.

  2. Organization-Based Authentication and Authorization

    Implemented organization management using Better Auth, including organization switching, cross-subdomain authentication configuration, role-filtered navigation, and portfolio-scoped application views. Developed frontend experiences that account for owner, administrator, and manager responsibilities while ensuring users work within the relevant organizational context.

  3. Organization-Aware Data Management

    Structured TanStack Query data fetching around hierarchical organization-specific query keys. Implemented scoped caching and invalidation patterns to keep data associated with the correct organization and reduce the risk of stale information appearing when users switch organizational contexts or update records.

  4. Multi-Step Booking Experiences

    Built booking workflows that guide users through reservation details, guest information, and associated actions. Implemented modal-based booking interfaces, identity document uploads using presigned URLs, and interactive pricing previews.

  5. Availability and Pricing Workflows

    Developed a custom date-selection experience that restricts already-booked date ranges. Implemented debounced price previews that retrieve backend calculations, helping align displayed booking prices with server-provided results.

  6. API and Payment Integrations

    Integrated frontend applications with backend services using typed API communication patterns, including Eden Treaty. Worked on product workflows involving payments, Paystack, booking operations, and associated account information.

  7. Marketing and Early-Interest Capture

    Developed frontend functionality for the marketing and early-interest experience, including an Airtable-backed waitlist for capturing prospective user information.

Scope of ownership

SmoothBook's frontend spans multiple applications and organizational contexts, making consistency between authentication, data access, and user workflows particularly important. My responsibilities include both the foundations shared across these applications and the detailed interactions required by individual features. The project remains in active development, so these contributions represent engineering implementation rather than evidence of a completed public launch.

Implementation

Technical breakdown.

SmoothBook uses Next.js, React, and TypeScript across three applications, with shared frontend infrastructure supporting authentication, API integration, and product workflows. Better Auth handles organization-related authentication functionality, while TanStack Query manages asynchronous application data and cache invalidation. The implementation also includes booking interfaces, availability controls, presigned document uploads, payment integrations, and server-reconciled pricing previews.

  1. Multi-Application Architecture

    • Next.js
    • React
    • TypeScript
    • Tailwind CSS
    • Bun
    • Docker

    Structured the frontend around three separate Next.js applications: the manager portal, agent portal, and marketing website.

    Each application serves a different part of the SmoothBook product, but they share engineering concerns such as authentication, API communication, and reusable development patterns.

    Used TypeScript to maintain typed application code and support consistent interfaces between frontend features and backend services.

    The development environment also uses Bun and Docker.

    • Manager portal.
    • Agent portal.
    • Marketing website.
    • Shared API and authentication infrastructure.
    • Typed frontend application development.
    • Reusable engineering patterns across applications.
  2. Authentication, Organizations, and Access Control

    • Better Auth
    • Next.js
    • TypeScript

    Implemented organization management using Better Auth to support users operating within different business accounts.

    Developed organization-switching functionality and configured authentication behavior across application subdomains.

    The frontend accounts for organization membership and user roles when presenting navigation and portfolio-related views.

    These patterns support different responsibilities across owners, administrators, managers, and other users interacting with the platform.

    • Better Auth organization integration.
    • Organization switching.
    • Cross-subdomain authentication configuration.
    • Role-filtered navigation.
    • Owner, administrator, and manager contexts.
    • Organization-aware portfolio views.
    • Protected frontend experiences.
  3. Organization-Scoped Data Fetching

    • TanStack Query
    • TypeScript
    • Eden Treaty
    • REST APIs

    Implemented application data fetching and mutations using TanStack Query.

    Because SmoothBook supports multiple organizations, cached information must remain associated with the organization that owns it.

    Structured query keys hierarchically using organization-specific identifiers and implemented targeted invalidation when related data changes.

    This approach provides a consistent way to retrieve and update application information while accounting for organization switching and separate user contexts.

    • TanStack Query integration.
    • Hierarchical query keys.
    • Organization-scoped caching.
    • Targeted cache invalidation.
    • Query and mutation handling.
    • Typed backend API communication.
  4. Booking and Guest Information Workflows

    • Next.js
    • React
    • TypeScript
    • TanStack Query
    • REST APIs

    Developed multi-step booking experiences that guide users through the information required to create reservations.

    Implemented modal-based interfaces for collecting and reviewing booking details while maintaining continuity across the booking process.

    Built identity document upload functionality using presigned URLs, allowing the frontend to participate in the document-upload process without transferring files through every application layer.

    These features form part of the manager and agent booking experiences.

    • Multi-step booking interfaces.
    • Modal-based reservation flows.
    • Guest information collection.
    • Booking detail management.
    • Presigned identity document uploads.
    • Backend integration for reservation data.
  5. Availability Management and Date Selection

    • React
    • TypeScript
    • TanStack Query

    Built a custom booking date picker that accounts for existing reservations.

    The date-selection logic restricts booked date ranges, helping users distinguish between available and unavailable accommodation periods.

    This functionality is integrated into the booking experience so availability constraints are presented during date selection rather than only after the user completes the reservation form.

    • Custom date-selection interface.
    • Booked-date range restrictions.
    • Availability-aware user interactions.
    • Integration with booking workflows.
  6. Price Preview and Backend Reconciliation

    • React
    • TypeScript
    • TanStack Query
    • REST APIs

    Implemented interactive booking price previews that respond to changes in reservation details.

    Used debounced requests to avoid making unnecessary backend calls during rapid input changes.

    The displayed pricing is reconciled against server-calculated values rather than relying solely on independent frontend calculations.

    This keeps the pricing experience connected to the application's backend pricing logic.

    • Interactive price previews.
    • Debounced pricing requests.
    • Server-calculated pricing.
    • Frontend price reconciliation.
    • Reservation detail updates.
  7. Payment and Account Workflows

    • Paystack
    • Next.js
    • TypeScript
    • REST APIs

    SmoothBook includes payment-related product functionality alongside its booking operations.

    The frontend work includes integrations involving Paystack and product interfaces associated with payment links, wallets, and commission-related activities.

    These features are part of the broader platform under development and are not presented as evidence of processed production transactions.

    • Paystack integration.
    • Payment-related frontend workflows.
    • Payment-link functionality.
    • Wallet and commission-related interfaces.
    • Backend API integration.
  8. Marketing Website and Waitlist

    • Next.js
    • TypeScript
    • Airtable

    Developed frontend functionality for SmoothBook's marketing presence and early-interest collection.

    Used Airtable to support waitlist submissions, providing a way to capture contact information from prospective users before public launch.

    The marketing website forms part of the same broader product development effort as the manager and agent applications.

    • Marketing website frontend.
    • Early-interest and waitlist experience.
    • Airtable-backed information collection.

Outcomes

What the work delivered.

SmoothBook remains in pre-launch development, so its outcomes are primarily engineering deliverables and implemented product capabilities. My work has established the frontend foundations for three connected applications and delivered functionality across organization management, data access, booking, availability, pricing, and payment-related workflows. The implementation provides the frontend structure needed for continued product development. No public adoption, booking volume, revenue, or performance improvement metrics are claimed.

  1. Deliverable

    Three-Application Frontend Architecture

    Architected the frontend across the manager portal, agent portal, and marketing website, with shared approaches to authentication and backend communication.

    Measured impact

    Frontend applications
    3

    Manager portal, agent portal, and marketing website.

    The applications support different product responsibilities while sharing foundational engineering patterns.

  2. Deliverable

    Multi-Tenant Organization Management

    Implemented Better Auth organization functionality, organization switching, cross-subdomain authentication configuration, and role-aware frontend experiences.

    The implementation supports organization-based application contexts and scoped portfolio interfaces for different user responsibilities.

  3. Deliverable

    Organization-Aware Server State

    Established TanStack Query patterns for hierarchical organization-specific cache keys and targeted invalidation.

    These patterns support consistent data fetching and mutation behavior within a multi-organization application.

  4. Deliverable

    Booking and Document Upload Workflows

    Developed multi-step booking interfaces with guest information handling and presigned identity document uploads.

    These workflows form part of the reservation experiences being developed for SmoothBook's manager and agent applications.

  5. Deliverable

    Availability-Aware Date Selection

    Built a custom date picker that restricts already-booked date ranges during reservation selection.

    The date-selection experience incorporates existing booking information into the user interface.

  6. Deliverable

    Server-Reconciled Pricing

    Implemented debounced booking price previews that use backend-calculated values.

    The frontend requests and displays pricing information derived from backend calculations, rather than relying exclusively on local pricing logic.

  7. Deliverable

    Payment-Related Integrations

    Contributed frontend integrations and workflows involving Paystack and payment-related platform functionality.

    SmoothBook is still in development; no claims are made about live transaction volume or commercial payment outcomes.

  8. Deliverable

    Early-Interest Collection

    Implemented an Airtable-backed waitlist experience for collecting prospective user information ahead of the product's public launch.

    The waitlist supports early-interest collection as part of the marketing website.