Iyola Oyabiyi logo

iyoolaoyabiyi

Iyola Oyabiyi O.

Team Project

Onboarding Tour App

A reusable onboarding system for web products with configurable tours and analytics.

Role

Frontend Engineer and SDK Developer

Stack

React JavaScript Firebase
Demo Repo

Team project (3 developers): Core ownership: Embeddable Widget, Dashboard Implementation, Firebase Setup

Overview

Onboarding Tour App (OTA) is a guided onboarding platform and product-adoption system that lets teams create, deploy, and measure in-app step-by-step tours. It is composed of three integrated surfaces: marketing web pages, a React-based admin dashboard for configuring tours, and a framework-agnostic embeddable widget that delivers those tours inside any website.

My role and ownership

I led the architecture and implementation of the embeddable widget, building a lightweight vanilla JavaScript SDK that runs safely on arbitrary websites and modern SPAs. Implemented the dashboard UI in React based on designs provided by a teammate, translating product requirements into reusable components and clean data flows. I als set up and structured the Firebase backend, including Authentication, Firestore data models, and Cloud Functions, establishing the shared foundation used by both the dashboard and the widget.

I also defined the analytics event schema and ensured consistent event emission from the widget and ingestion on the backend for reliable reporting.

Key features

  • Dashboard-driven tour creation, editing, previewing, and publishing.
  • Configurable tour steps using DOM selectors, triggers, and placement rules.
  • Lightweight embeddable widget installed via a single script tag.
  • SPA-safe execution with retry logic, route awareness, and graceful degradation.
  • Built-in analytics for tour starts, step views, skips, completions, and drop-off rates.

Skills demonstrated

  • Frontend engineering: Building a React-based dashboard with reusable components, predictable state management, and clean data flows. Developing a framework-agnostic embeddable widget that safely interacts with arbitrary DOM structures and SPA routing.
  • Backend and platform engineering: Using Firebase (Authentication, Firestore, and Cloud Functions) to implement multi-tenant data models, secure access rules, and serverless APIs without managing infrastructure.
  • Product engineering: Translating onboarding requirements into configurable systems, designing intuitive builder workflows, and enabling non-technical users to ship product tours independently.
  • System design: Separating concerns between dashboard, widget, and analytics while maintaining a cohesive data model and deployment strategy.
  • Analytics and data modeling: Designing event schemas, collecting high-volume interaction events, and aggregating them into meaningful completion and drop-off metrics.
  • Collaboration: Working in a small team with explicit ownership boundaries and shared data contracts.

Tech stack

  • React, Typescript, HTML, CSS
  • Firebase (Authentication, Firestore, Cloud Functions)
  • Lightweight vanilla JavaScript SDK for the embeddable widget

Project type

  • Full-stack SaaS-style product
  • Admin dashboard + embeddable client SDK + analytics pipeline