Jonathan Ndakola | UX/UI Designer & Software Engineer

Summary

WakalaOS is a multi-tenant SaaS platform designed for marketing and creative agencies. It provides a suite of AI-powered tools for client management, content generation, and prospect finding. This project outlines the full-stack architecture, technology choices, and scalability principles for building the platform.

Gallery

Objectives

Design a scalable and secure multi-tenant architecture.
Define a clear project structure using the Next.js App Router.
Integrate Genkit for modular AI-driven features.
Establish cost-efficient principles for infrastructure and AI usage.
Create a clear roadmap for development and feature prioritization.

Technical Challenges & Solutions

Multi-Tenant Data Isolation

"Ensuring that data from one agency is strictly isolated from another is critical for security and privacy."

Solution: Firestore Security Rules & Document Structure

firestore.rules

// Agency documents can only be read/written by members of that agency
match /agencies/{agencyId}/{document=**} {
  allow read, write: if request.auth.token.agencyId == agencyId;
}

Results:

Achieved robust data isolation at the database level.
Simplified client-side queries by leveraging user authentication tokens.

Scalable AI Feature Integration

"The platform needed a way to manage multiple, independent AI tools without creating a monolithic backend."

Solution: Modular Genkit Flows

src/ai/flows/generate-content.ts

import { ai } from '@/ai/genkit';
import { z } from 'zod';

// Define input/output schemas for the flow
const contentInput = z.object({ topic: z.string() });
const contentOutput = z.object({ content: z.string() });

// Define and export the flow
export const generateContentFlow = ai.defineFlow(
  {
    name: 'generateContentFlow',
    inputSchema: contentInput,
    outputSchema: contentOutput,
  },
  async ({ topic }) => {
    // AI prompt logic goes here...
    return { content: '...' };
  }
);

Results:

Each AI tool is a self-contained, testable, and deployable module.
Simplified the process of adding new AI features to the marketplace.

Tools & Techniques

Next.js

Frontend and server-side rendering

React

UI component model

TypeScript

Type safety across the stack

Tailwind CSS

Utility-first styling

shadcn/ui

Core component library

Genkit

AI flow orchestration and tool definition

Firebase

Authentication, Firestore, Hosting, Functions

Stripe

Billing and subscription management

Key Outcomes

A comprehensive and scalable blueprint for a modern SaaS application.
Clear separation of concerns between the UI, AI logic, and data layers.
A defined path to production with cost-efficiency in mind.

Reflection

Architecting WakalaOS from the ground up was a valuable exercise in system design. It forced a holistic view of the product, from the user interface down to the cost of a single AI API call. This project serves as the foundation for a robust and scalable platform ready for development.