Ongage is a large-scale, multi-tenant email marketing SaaS platform. I built and maintained the React frontend that gives marketers control over the full lifecycle of an email program — from subscriber acquisition and list management to campaign execution and post-campaign analysis.

The product supports the entire email marketing workflow:

• importing, segmenting, and exporting subscriber lists,
• managing contact statuses and field-level data across millions of records,
• creating, scheduling, and A/B testing email and SMS campaigns,
• tracking real-time send statistics,
• building automated journeys such as welcome series and re-engagement flows through a node-based drag-and-drop workflow editor,
• configuring and switching between multiple ESP and SMTP delivery providers through a unified vendor management interface,
• running bulk email validation against a third-party service with status tracking and downloadable results,
• analyzing campaign performance through dashboards with overview charts, aggregate tables, and deliverability metrics.

AI features

AI is integrated across the platform in three distinct layers:

• AI Analytics — users can ask questions in plain English, such as “Which campaigns had the highest open rate last month?”, and receive structured results rendered as interactive charts alongside a conversational answer. A thumbs-up / thumbs-down feedback loop helps improve accuracy over time.
• AI Email Template Generator — guides users through a short brief covering tone, audience, goal, language, and email type, then generates a fully styled HTML template that can be previewed and saved as a new message.
• CopilotKit AI assistant — a persistent in-app chat sidebar that understands the current page context, can navigate across the application, and can create, update, or delete entities such as campaigns, segments, automations, and vendor connections on the user’s behalf. Relevant UI caches are refreshed automatically after each action through MCP (Model Context Protocol).

Engineering architecture

The frontend followed a strict modular feature architecture, where each domain owned its own API clients, Zustand stores, TanStack Query hooks, and UI components. This kept pages thin and business logic co-located.

Key implementation details included:

• a three-variant TanStack Table setup for server-paginated, client-paginated, and context-free tables,
• persistent column visibility and column ordering,
• Firebase authentication with token-refresh interceptors wired into all API and AI requests,
• strict TypeScript across the codebase,
• ESLint with exhaustive-deps enforced as an error,
• Prettier formatting,
• Husky pre-commit hooks to keep the codebase consistent across a large team.

The main challenges were the scale of the data model, the complexity of multi-tenant UX flows, and keeping the frontend architecture maintainable while supporting a growing number of features and AI-driven interactions.

Agency Roster is a full-stack platform that connects marketing brands with creative and media agencies. Marketers can submit a search brief, receive an AI-generated shortlist of matched agencies ranked by compatibility, schedule introductory calls with selected candidates, and track the entire process through a unified dashboard. Agencies on the other side manage their profile, respond to incoming invitations, and submit proposals — all within the same application.

The frontend is a single-page application built with React 19 and TypeScript, bundled with Vite and styled using a combination of Tailwind CSS utility classes and CSS Modules written in SCSS syntax. Routing is handled by React Router v7, and all server state is managed through TanStack Query v5 paired with Axios, which provides consistent caching, background refetching, and optimistic update patterns across the entire data layer. Data tables throughout the admin and marketer interfaces are powered by TanStack Table v8, offering column-level filtering, pagination, and sortable headers without sacrificing control over rendering.

Authentication is delegated to Stytch, whose React SDK handles session management, magic links, and password flows. The resulting session token is stored in a React context and consumed by a shared hook throughout the component tree, enabling granular role-based rendering for the three distinct user roles: admin, marketer, and agency. Form handling relies on Formik with Yup schemas for validation, including a shared configuration layer that enforces consistent field constraints across the application.

AI-powered agency matching

The core feature of the platform accepts a marketer's brief — optionally with attached documents sent as multipart form data — and returns a scored list of agencies, each accompanied by a capability map visualised as a radar chart using Recharts. Each agency result includes:

• a compatibility score across dimensions such as capabilities, expertise, collaboration, and cultural values
• an AI-generated summary and consultant review
• a "top recommendation" designation that admins can assign before publishing the report

The same charting library drives the analytics dashboards, which surface engagement metrics and historical search data. Completed AI search reports can be exported to PDF through an html2canvas and jsPDF pipeline that applies a separate stylesheet to the document during capture, isolating print-specific layout from the interactive view.

Chemistry meetings and RFPs

The chemistry meeting workflow lets marketers select agencies from an AI report, propose available time slots with timezone-aware date handling via date-fns, and send invitations in bulk. Agencies receive those invitations as RFPs and can:

• accept or decline the invitation
• upload supporting files through a dedicated dropzone modal
• request alternative time slots if none of the proposed ones work
• submit a final proposal once a time is confirmed

The entire notification layer uses a server-sent events stream, with unread counts and real-time updates surfaced through a slide-in drawer.

Accessibility and code quality

Accessibility is a first-class concern: interactive components such as modals, dropdowns, select fields, and date pickers are built on top of React Aria Components, which provides ARIA attribute management, keyboard navigation, and focus trapping out of the box. Loading states use react-loading-skeleton to maintain layout stability during data fetches, and toast notifications via react-hot-toast give users consistent feedback for mutations.

Code quality is enforced through ESLint, Prettier, and Husky pre-commit hooks with lint-staged, ensuring TypeScript, formatting, and linting checks all pass before any commit lands.

This project started as a performance-focused rebuild of an existing website. The original implementation was based on Handlebars and Webpack 4, and the initial goal was to improve both UI responsiveness and build/load performance. As the requirements evolved, the project was upgraded to Webpack 5 and later fully rebuilt with Next.js and TypeScript to modernize the architecture and improve long-term maintainability.

Rebuilding with Next.js introduced a more scalable React-based structure and enabled performance optimizations such as:

• faster page loads,
• improved rendering behavior,
• better overall user experience,
• a more maintainable frontend architecture.

Adding TypeScript improved type safety, reduced the risk of runtime issues, and made the codebase easier to evolve as the project grew.

To simplify content updates, we integrated Netlify CMS, a headless CMS that allowed editors to manage site content without developer intervention. This reduced the dependency on engineering for routine updates and made the workflow more efficient for both technical and non-technical contributors.

The result was a website that combined:

• better performance,
• cleaner architecture,
• improved developer experience,
• editor-friendly content management.

The main value of the rewrite was not only the technical migration itself, but the shift toward a more modern, maintainable, and scalable platform.

Artviva School is a full-stack web platform built to support the school’s online presence and core administrative workflows. The frontend was implemented with React and Bootstrap, while the backend was built with Node.js and deployed on Heroku.

The platform combines several key capabilities:

• secure tuition payment processing through LiqPay,
• online application submission for prospective students,
• informational pages such as About, Team, and Contacts,
• a responsive UI designed to work smoothly across devices.

From an engineering perspective, the project focused on delivering a practical, maintainable system that streamlined communication between students and the school. Payment handling and application submission were integrated into the backend to keep the user experience simple while maintaining a clean separation between frontend presentation and server-side logic.

To support continuous improvement, the website was instrumented with Google Analytics. This made it possible to track traffic patterns, user behavior, and engagement metrics, and to use that data to refine content, navigation, and overall site structure.

The result was a reliable school platform that combined:

• student-facing functionality,
• secure payment integration,
• content-driven pages,
• analytics-based decision making,
• a responsive React UI.

The main value of the project was building a centralized, user-friendly system that handled both informational and transactional workflows in one place.