Frontend Engineering
Product Engineering
Braudit
Frontend engineering for a multi-tenant SaaS platform helping organizations manage employee productivity, tasks, goals, and performance.
- React
- TypeScript
- GraphQL
- Apollo Client
- GraphQL Code Generator
Frontend Engineering
Product Engineering
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
Developed frontend functionality for the marketing and early-interest experience, including an Airtable-backed waitlist for capturing prospective user information.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
Outcomes
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.
Deliverable
Architected the frontend across the manager portal, agent portal, and marketing website, with shared approaches to authentication and backend communication.
Measured impact
Manager portal, agent portal, and marketing website.
The applications support different product responsibilities while sharing foundational engineering patterns.
Deliverable
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.
Deliverable
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.
Deliverable
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.
Deliverable
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.
Deliverable
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.
Deliverable
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.
Deliverable
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.