Overview

Subfeed Cloud is a full-stack SaaS platform where users can create and customize AI agents — each with its own model configuration, personality, knowledge base, and connected tools. The platform handles the entire lifecycle: from agent creation with a visual editor, to real-time streaming chat, to usage tracking and subscription billing.

Key capabilities of the platform:

• Entity Builder — Visual editor for creating AI agents with model selection, system prompts, generation parameters, and personality presets
• RAG (Retrieval-Augmented Generation) — Attach knowledge bases powered by Pinecone vector search (hybrid dense + sparse vectors, reranking, chunk expansion)
• MCP (Model Context Protocol) — Connect external tools (Slack, GitHub, custom servers) that agents can invoke during conversations
• Built-in Actions — Web search, web scraping, structured data extraction, HTTP requests, and vector search as callable tools
• Real-time Streaming Chat — SSE-based streaming with Time-to-First-Token monitoring, offline queue, and optimistic updates
• Tier-based Billing — 5 subscription tiers with progressive feature unlocks, weighted token usage tracking, and Lemon Squeezy integration
• Developer API — Encrypted API keys for serverless access, enabling developers to embed Subfeed agents into their own applications
• Launchpad — 6 ready-to-deploy starter app templates (chat, research, social post generator, URL summarizer, etc.)

My Role

Frontend Developer & Maintainer

As the primary frontend engineer, I am responsible for:

• Architecture & Development — Designed and built the entire Next.js 15 frontend from scratch, including 22+ route segments, 56+ component directories, 23 Zustand stores, and 36+ custom hooks
• Real-time Chat System — Implemented SSE streaming chat with @microsoft/fetch-event-source, supporting authenticated and guest sessions, message reactions, retry logic, and performance monitoring (TTFT tracking)
• Complex UI Systems — Built rich interactive features including drag-and-drop (dnd-kit), virtualized lists (TanStack Virtual), data tables (TanStack Table), rich text editor (Tiptap with 15+ custom extensions), and animated transitions (Framer Motion)
• State Management — Designed the client-side architecture using Zustand with persistence middleware, React Query for server state, and React Context for scoped feature state
• Authentication Flow — Integrated Supabase Auth with SSR middleware, cookie-based JWT management, and multi-flow auth (email, password reset, guest sessions)
• RAG & MCP Management UI — Built the interfaces for managing knowledge bases (upload, chunk preview, connection management) and MCP tool connections
• Agent Page Editor — Created a visual page builder for customizing agent landing pages with theme support, color pickers, and live preview
• Email Campaign Builder — Developed a block-based email editor with Tiptap, CSS inlining (Juice), and template management
• Performance & Monitoring — Integrated Sentry for error tracking, PostHog for product analytics, and GA4 for traffic analytics
• Code Quality — Maintained codebase with TypeScript strict mode, ESLint, Prettier, and established git workflow (feature branches, PR reviews)
• Deployment & CI/CD — Managed production deployments on Render with GitHub Actions pipelines

Key Features

1. AI Entity Builder

A comprehensive visual editor for creating and configuring AI agents. Users can select LLM models, craft system prompts, tune generation parameters (temperature, top-p, max tokens), and set personality presets — all with real-time preview.

2. Streaming Chat Interface

Real-time conversational UI powered by Server-Sent Events (SSE). Features include:

• Token-by-token streaming with typewriter effect
• Infinite scroll message history with virtualization
• Message reactions (client-side, localStorage-based)
• Offline message queue with automatic retry
• Guest/visitor session support
• Performance monitoring (Time-to-First-Token, total stream time)

3. RAG Knowledge Management

Upload and manage knowledge bases that agents can reference during conversations. Supports document upload, chunk visualization, and connection management. Backend uses Pinecone hybrid search (semantic + keyword) with cross-encoder reranking.

4. MCP Tool Connections

Connect external tools via Model Context Protocol. Agents can dynamically invoke tools from connected MCP servers (Slack, GitHub, custom servers) during conversations. The UI provides connection management, tool discovery, and execution monitoring.

5. Built-in Actions (Addons)

Pre-built capabilities that agents can use: web_search, web_scrape, web_extract, web_map, http_request, vector_search. Each action has usage tracking and tier-based monthly limits.

6. Tier-based Subscription & Billing

5-tier subscription system (Nano to Large) with progressive feature unlocks. Includes weighted token usage tracking (different model multipliers), monthly usage resets, and Lemon Squeezy payment integration.

7. Developer API & Launchpad

Encrypted API keys (AES-256-GCM) for serverless access, plus 6 starter app templates that developers can deploy with one click to embed Subfeed agents in their own products.

8. Agent Page Builder

Visual editor for customizing agent landing pages with theme support, custom colors, layout configuration, and live preview. Includes a block-based email campaign builder with Tiptap rich text editing.

Tech Stack

Frontend (My Primary Focus)

| Category | Technology | | ---------------- | ------------------------------------------------ | | Framework | Next.js 15 (App Router, Turbopack) | | Language | TypeScript 5 | | UI Library | React 19 | | Styling | Tailwind CSS 4 | | Components | Radix UI + shadcn/ui (46+ components) | | State Management | Zustand 5 (with persist/devtools middleware) | | Server State | TanStack React Query 5 | | Forms | React Hook Form 7 + Zod validation | | Rich Text Editor | Tiptap 2 (15+ custom extensions) | | Streaming | @microsoft/fetch-event-source (SSE) | | Tables | TanStack React Table 8 | | Virtualization | TanStack React Virtual 3 | | Drag & Drop | dnd-kit | | Animations | Framer Motion 12 | | Charts | Recharts 2 | | Auth | Supabase Auth (JWT, SSR middleware) | | Icons | Tabler Icons + Lucide React | | Error Tracking | Sentry 10 | | Analytics | PostHog + Google Analytics 4 | | Markdown | React Markdown + remark-gfm + Syntax Highlighter | | Deployment | Render (auto-deploy from GitHub) |

Backend

| Category | Technology | | --------------- | ---------------------------------------- | | Runtime | Node.js + Fastify 5 | | Language | TypeScript (via tsx) | | Database | PostgreSQL (Supabase) | | ORM | Drizzle ORM (60+ tables) | | Auth | Supabase Auth (JWT) + Encrypted API Keys | | LLM Inference | OpenRouter (multi-model) + Anthropic SDK | | Vector Database | Pinecone (hybrid search) | | Embeddings | OpenAI | | Background Jobs | BullMQ + Redis | | Code Execution | E2B Sandboxes (Python) | | Billing | Lemon Squeezy | | Web Search | Tavily API | | Integrations | Composio | | API Docs | Swagger (Fastify plugin) | | Testing | Jest | | Build | esbuild | | Deployment | Render |

Infrastructure & DevOps

| Category | Technology | | --------------- | ----------------------------- | | Hosting | Render (BE + FE) | | Database | Supabase (managed Postgres) | | Cache / Queue | Upstash Redis | | Vector DB | Pinecone | | CI/CD | GitHub Actions → Render | | Monitoring | Sentry + PostHog | | Version Control | Git (feature branch workflow) |

Challenges & Solutions

1. Real-time Streaming with Robust Error Handling

Challenge: Implementing token-by-token streaming chat over SSE while handling network interruptions, rate limits, AI capacity limits, and guest session restrictions — all without degrading UX.

Solution: Built a layered streaming architecture using @microsoft/fetch-event-source with custom FatalError classification to distinguish retryable vs. terminal errors. Implemented an offline message queue in Zustand (persisted to localStorage) that automatically retries when connectivity is restored. Added specific error code handling (RATE_LIMIT, AI_LIMIT, AI_CAPACITY, COOLDOWN_ACTIVE) with user-friendly feedback. Tracked Time-to-First-Token (TTFT) metrics to monitor streaming performance.

2. Complex State Management Across Features

Challenge: Managing state for 22+ routes with interdependent features — chat sessions, agent configurations, RAG connections, MCP tools, billing state — while keeping the app responsive and data consistent.

Solution: Adopted a hybrid state strategy: Zustand stores (23 stores) for client-side UI state with persistence middleware for critical data (chat messages survive page refresh), TanStack React Query for server state with automatic cache invalidation, and React Context for scoped feature state (chat styling, agent editor). This separation ensures each layer handles what it does best without state conflicts.

3. Building a Production-grade Rich Text Editor

Challenge: The email campaign builder and agent configuration required a rich text editor with custom block types (buttons, dividers, styled containers), inline CSS generation for email compatibility, and a block-based editing experience.

Solution: Extended Tiptap 2 with 15+ custom extensions including custom node types (ButtonNode, DivNode, DividerNode), block-level formatting (alignment, highlighting), and a custom bubble menu system. Integrated Juice for CSS inlining to ensure email HTML renders correctly across email clients. Built custom hooks (useTiptapActions, useBlockFinder, useBubbleMenuVisibility) to abstract editor interactions.

4. Performance at Scale with Large Data Sets

Challenge: Chat histories, contact lists, and data tables could contain thousands of items, causing rendering bottlenecks and memory issues in the browser.

Solution: Implemented virtualization using TanStack React Virtual for chat message lists (infinite scroll with bidirectional loading) and TanStack React Table for data grids. Combined with lodash.debounce and lodash.throttle for input handling, and Immer for efficient immutable state updates in high-frequency streaming scenarios.

5. Authentication with SSR and Multiple Access Modes

Challenge: Supporting three authentication modes — Supabase JWT for platform users, encrypted API keys for developers, and guest/visitor sessions — all working seamlessly with Next.js 15 App Router SSR and middleware.

Solution: Implemented a middleware layer that intercepts all requests, validates Supabase sessions server-side, and manages auth cookies. Created a whitelist system for public routes. On the client side, the AuthProvider listens to onAuthStateChange events and synchronizes state across stores. Logout triggers a coordinated cleanup: Supabase session, localStorage tokens, Zustand stores, sessionStorage, and custom events to notify other components.

6. Drag-and-Drop with Sortable and Accessible UX

Challenge: Multiple features required drag-and-drop: reordering agent configurations, sorting knowledge base items, and arranging email blocks — each with different data models and interaction patterns.

Solution: Standardized on dnd-kit ecosystem (@dnd-kit/core, @dnd-kit/sortable, @dnd-kit/modifiers) which provides accessibility-first DnD with keyboard support out of the box. Created reusable sortable wrapper patterns that handle optimistic reordering with rollback on API failure.

7. Maintaining Code Quality in a Fast-moving Product

Challenge: Rapid feature development across a large codebase (56+ component directories, 36+ hooks) while maintaining type safety, consistent patterns, and preventing regressions.

Solution: Enforced TypeScript strict mode across the entire frontend, configured ESLint with Next.js and Prettier plugins for consistent formatting, and established a git workflow with feature branches and PR reviews. Used Zod schemas for runtime validation at API boundaries, and structured the codebase with clear separation: components by feature domain, hooks by data domain, stores by state scope.

Screen Shot