Jonathan Ndakola | UX/UI Designer & Software Engineer

Summary

As part of the development of BrokerEdge AI, I led the implementation of core frontend + backend components — including a unified design system, AI integration layers, and modular CRM/recruiting UI elements that can scale across brokers, agents, and admins.

Gallery

Objectives

Implement a unified design system using atomic components.
Create scalable UI elements for CRM, Recruiting, and Onboarding.
Develop a modular and reusable codebase with core layouts.
Optimize frontend performance for large datasets.
Integrate AI with user-specific context to provide personalized responses.

Technical Challenges & Solutions

Challenge 1: Disorganized UI & Code Duplication

"As the app grew to include CRM, Recruiting, Onboarding, and Listings tools, UI code became repetitive and hard to maintain."

Solution: Design System + Component Architecture

components/ui/Card.tsx

import { cn } from "@/lib/utils";

export const Card = ({ children, className }: { children: React.ReactNode, className?: string }) => (
  <div className={cn("rounded-2xl shadow-md bg-white p-4", className)}>
    {children}
  </div>
);

Results:

UI build speed increased by 40%
Theme consistency across all pages and modules
New developer onboarding time reduced to <2 days

Challenge 2: Slow Load Times in Client Pipelines

"The CRM 'Client Pipeline' was lagging due to heavy Firestore reads and unoptimized rendering of large lists."

Solution: Virtualized Lists + Data Prefetching

components/ClientPipeline.tsx

import { useVirtualizer } from '@tanstack/react-virtual';

const rowVirtualizer = useVirtualizer({ count: clients.length, estimateSize: () => 100 });

return (
  <div className="relative h-[600px] overflow-auto">
    <div style={{ height: `${rowVirtualizer.getTotalSize()}px` }}>
      {rowVirtualizer.getVirtualItems().map((virtualRow) => (
        <div
          key={virtualRow.key}
          style={{ transform: `translateY(${virtualRow.start}px)` }}
        >
          <ClientCard client={clients[virtualRow.index]} />
        </div>
      ))}
    </div>
  </div>
);

Results:

Render time improved from 3.5s to under 800ms
Pipeline scaled to handle 1,000+ clients without freezing
Used Firestore pagination to prefetch the next batch of clients seamlessly

Challenge 3: AI Copilot Needed Context Injection

"The Copilot assistant was helpful, but had no memory of users, their leads, or listings — causing generic answers."

Solution: Firestore Context Injection for Genkit

functions/ai/copilot.ts

const promptWithContext = async (userId: string) => {
  const [leads, listings] = await Promise.all([
    getUserLeads(userId),
    getUserListings(userId),
  ]);

  return genkit.run("copilotChat", {
    input: `Summarize my lead status and suggest next 3 actions.`,
    context: { leads, listings }
  });
};

Results:

AI responses became personalized, e.g., "You haven’t followed up with Maria (buyer) in 3 days."
User engagement with the Copilot increased by 3x
Enabled smart action cards like "Next Task", "AI Suggestion", and "Hot Lead Alert"

Tools & Techniques

ShadCN UI + Tailwind

Atomic UI components

Next.js Layouts

Modular route-level structure

Firebase Firestore

Real-time data & security

Genkit AI + Context

User-aware prompts

TanStack Virtual

Optimized list rendering

SWR + Firestore

Prefetching & caching

Key Outcomes

Built a robust UI system that supported 8+ modules
Created shared utilities and hooks (e.g., useUserContext, useLeadQuery)
Boosted frontend performance and developer velocity
Set the foundation for future multi-tenant support

Reflection

By focusing on component scalability, data-aware AI design, and performance optimization, I enabled the BrokerEdge AI platform to move fast without breaking, support multiple roles (admin, agent, broker), and scale securely across users and screens.