03 // PROJECTS / SARAI
CASE STUDY / SYSTEM DESIGN

SARAI

System for Analysis & Response AI — Turn Data Into Decisions

A unified AI marketing data platform consolidating data from 600+ sources (Google Ads, Meta Ads, GA4, CRM, e-commerce, etc.) into actionable business insights and automated decisions powered by AI.

Role:Full-Stack Developer (Internship)
Type:Fullstack Web Platform
Timeline:3 Months (13 Weeks)
Status: Completed
Unified Executive Analytics View
PREVIEW // Unified Executive Analytics ViewSARAI PLATFORM v2.0
CORE CONTRIBUTION // MY ROLE

Full-Stack Developer (Internship)

I joined this project as a Full-Stack Developer Intern, implementing features according to the high-level architecture and scope defined by leadership. During development, I ended up taking hands-on ownership of the vast majority of end-to-end technical execution:

Building the frontend and backend components according to specified product requirements
Implementing the majority of API integrations independently—stepping in to rebuild integrations originally allocated to other team resources who failed to deliver
Working with a relational database schema (41+ tables) and query/blend engine based on established design specifications
Executing a structured 8-phase roadmap from core foundation to production-ready deployment
[ PROJECT SCALE METRICS ]
600+
Data Connectors
Airbyte Cloud Sync
41+
Database Tables
Dynamic Relational Schema
50+
API Endpoints
NestJS Modular Controllers
46+
Frontend Pages
Next.js Dashboard & UI
8
Dev Phases
Structured Deliverables
01 // THE CHALLENGE & CONTEXT

The Problem

Marketing teams typically operate with fragmented data—each platform (Google Ads, Meta Ads, GA4, CRM) maintains its own dashboard, isolated format, and disconnected ecosystem. Consolidating this data into unified weekly reports required hours of manual spreadsheet manipulation, making real-time insight extraction or anomaly detection nearly impossible.

Core Technical Challenge: How to engineer a single unified platform capable of connecting to hundreds of external data sources simultaneously without building hundreds of custom integrations from scratch.
02 // TECHNICAL EXECUTION & PROBLEM-SOLVING

The Approach & Engineering Execution

How technical challenges were solved and executed hands-on during development.

EXECUTION 01

Airbyte Connector Configuration

Using Airbyte Cloud as the data integration layer was set in the project scope. However, configuring each connector, handling OAuth flows, and debugging unexpected API responses fell directly on my hands.

⚡ Impact: Managed 120+ connector setups + built-in OAuth & refresh token troubleshooting in the field.
EXECUTION 02

Covering Failed Team API Scope

Several API integrations initially allocated to other team resources were not completed. To keep the project on schedule, I took over, rebuilt, and delivered those API integrations independently.

⚡ Impact: Prevented project bottlenecks by taking full ownership of backend API delivery.
EXECUTION 03

Layered Architecture Integration

I implemented each layer according to design specs: Frontend (Next.js) → Backend API (NestJS) → Query & Blend Engine → Data Layer (PostgreSQL + Airbyte) → AI Layer (Claude API).

⚡ Impact: Ensured seamless cross-layer communication and data integrity across all 5 modules.
03 // END-TO-END DATA FLOW

System Architecture Diagram

Real-time data flow from 600+ ingestion sources to interactive visual dashboards and export engines.

600+ Data Sources
Ads, GA4, CRM, E-comm
Sync Pipeline
Airbyte Cloud
Automated Integration Engine
PostgreSQL Warehouse
41+ Relational Schema Tables
Raw Queries
Query & Blend Engine
NestJS Custom Join Logic
AI Layer (Claude API)
Natural Language Insights
Render & Export
Dashboard & Exports
Sheets, Excel, Looker, Power BI
04 // CAPABILITIES

Key Features

8 core modules forming the comprehensive functionality of the SARAI platform.

1. Connect

600+ data connectors (ads, analytics, CRM, e-commerce, databases).

2. Query

Visual query builder supporting custom metrics, dimensions, filters, & scheduling.

3. Blend

Cross-source data join engine supporting custom mathematical formulas.

4. Visualize

Interactive dashboard featuring 8 widget types, drag-and-drop layout, & public links.

5. Analyze

Real-time AI chat companion for trend analysis, anomaly detection, & forecasting.

6. Export

Automated scheduled push to Google Sheets, Excel, Looker Studio, & Power BI.

7. Manage

Multi-tenant team workspace with 4 security role access levels (RBAC).

8. Scale

Subscription & billing infrastructure with active usage tracking.

05 // SYSTEM INFRASTRUCTURE

Tech Stack

Modern tech choices engineered for high throughput, data integrity, and modular scalability.

Frontend
Next.js 14 (App Router)
TypeScript
Tailwind CSS & shadcn/ui
Recharts Visualization
Backend
Node.js Runtime
NestJS Modular Framework
Prisma ORM
Database & Queue
PostgreSQL (Primary DB)
Redis In-Memory Cache
BullMQ Background Jobs
Integration & AI
Airbyte Cloud Sync Engine
Claude API (Anthropic)
Infrastructure & Services
Docker Containers
GitHub Actions CI/CD
Stripe Subscription
06 // ROADMAP & EXECUTION

Process Timeline

Breakdown of the 8 execution phases from zero to a complete, production-ready deliverable.

Phase 01Foundation & Core Infrastructure
Auth, PostgreSQL relational database schema, & CI/CD pipeline setup.
Phase 02Data Source Engine
Airbyte Cloud engine integration & testing 600+ live data connectors.
Phase 03Query Engine & Data Processing
Visual query builder, dynamic filters, & data blending engine.
Phase 04Data Management
Data transfer logic, warehousing setup, & schema migrations.
Phase 05Visualization & Dashboard
8 dashboard widget types, drag-and-drop UI, & public sharing links.
Phase 06AI Features & Integrations
Claude AI chat integration, prompt engineering, & anomaly detection.
Phase 07Business Features & Frontend
Usage billing logic, multi-tenant RBAC, & 46+ frontend pages.
Phase 08Testing, QA & Deployment
End-to-end testing, security review, & production environment setup.
07 // IMPACT & DELIVERABLES

Outcome & Project Status

SARAI was successfully completed. As a Full-Stack Developer Intern, I initially joined to work on specific features defined in the project overview. However, when certain integration parts planned for other resources stalled, I took ownership of the vast majority of end-to-end technical execution—from building critical APIs to ensuring every system layer (frontend, backend, data, and AI) connected seamlessly and functioned according to design specifications.

End-to-End Technical Execution Delivered
Stepped Up to Cover Stalled API Scope
© 2026 Arif Bagus Wibowo. All rights reserved.
Frontend Engineering // Web Development