AI Chat SaaS Platform

Earthly Insight

An AI-powered chat platform delivering instant answers to user questions, combining real-time streaming AI responses with subscription-based access tiers and comprehensive admin oversight.

AI ChatReal-Time StreamingSubscription GatingAdmin Analytics
ReactTypeScriptTailwind CSSOpenAI APIGoogle Gemini API

Description

Earthly InsightFrontend Engineer

Earthly Insight is a live AI chat SaaS platform. As the frontend engineer, I architected and delivered the complete user-facing chat experience, subscription management layer, and admin operations dashboard.

Users ask questions and receive real-time, token-by-token AI responses from OpenAI and Google Gemini. The platform gates features by subscription tier, encouraging free users to upgrade without degrading the core experience.

What I Built

User Chat Experience:

  • Real-time AI chat interface with token-by-token response streaming using native Fetch API and Server-Sent Events
  • Markdown rendering for formatted AI responses with one-click copy functionality
  • Per-message feedback collection (thumbs up/down) feeding into admin review pipeline
  • Full chat history with deep-linked conversation navigation and delete functionality
  • Responsive design optimized for both desktop and mobile

Subscription & Gating:

  • Feature gating at the UI and route level preventing unpaid users from accessing premium features
  • Smart upgrade prompts triggered when free users hit message limits, with direct checkout initiation
  • Subscription status indicator in the user profile and chat interface

Admin Dashboard:

  • User management tables with search and filtering
  • Feedback review interface with modal detail inspection
  • KPI dashboards with Recharts visualizations tracking active users, conversions, and usage metrics

Public Presence:

  • Webflow landing page covering product positioning, SEO, responsive design, and CMS content management

Engineering

Integrated Auth0 authentication with JWT token management · Built custom token refresh bridge for out-of-component API calls · Implemented role-based route protection · Responsive design with Framer Motion animations · Form validation using Formik and Yup · Component architecture designed for reusability and scalability.

Proven Results

  • Live product with active user base
  • Real-time chat delivering sub-second response times
  • Subscription tiers driving revenue while maintaining free tier accessibility
  • Admin tools enabling feedback-driven product iteration

Built with

The toolkit behind Earthly Insight

Visit live project
ReactTypeScriptViteTailwind CSSZustandAuth0OpenAI APIGoogle Gemini APIFramer MotionRechartsFormikYupReact RouterWebflow