BuffByte AI

Problem Statement

Creators publish into a black box. They don't know whether a caption will land, whether a script's hook is strong enough to survive the first three seconds, or how to deliver it cleanly on camera. The feedback loop is "post and pray." BuffByte replaces guesswork with an AI second opinion before you hit publish.

Proposed Solution

BuffByte gives creators three interconnected tools in one app:

1. Content Analysis — paste any post/caption/article and get scored across 14 AI dimensions (virality potential, sentiment, brand voice, readability, platform fit, and more).
2. Script Analysis — upload a video/podcast script and get hook-strength scoring, pacing analysis, and retention prediction, with a one-click handoff to the teleprompter.
3. AI Teleprompter — variable-speed auto-scroll with real-time WPM control for on-camera delivery.

The three tools chain together: analyze a script → fix the hook → read it on camera.

Full Solution Details

• Trial-based freemium — 5 free analyses per day, enforced by trial-limit tracking and rate limiting.
• Dashboard intelligence — AI-generated trend analysis with web-search capability and real-time business insights.
• Auth — JWT with refresh tokens and role-based access (user/admin/moderator).
• Animated landing — a 12-section animated marketing page (Framer Motion + GSAP).

Technical Documentation

Frontend — React 19 + TypeScript + Vite 8, React Router v7 with lazy-loaded screens and a dedicated app.lazy.ts for code splitting. TanStack Query v5 for server state; Axios with auth/error interceptors; Framer Motion v12 + GSAP 3 for animation; Tailwind v3 + CSS custom-property design tokens; the author's own Meemaw utility library. Strict Feature-Sliced Design: each feature (entrypoint, dashboard, content-analysis, script-analysis, teleprompter, ui-kit) owns screen/ (composer + parts/), api/ (Query hooks), providers/, and helpers/. Path aliases (@app, @features, @shared, @ui) keep imports clean. shared/ holds the api-client, query-client, AuthProvider, route guards (AuthGuard/GuestGuard), the AppLayout widget, and the design-system ui/.

Backend — Node + TypeScript + Express on MongoDB, integrating Anthropic Claude for analysis. Highlights: configurable system/user prompts via env (CONTENT_SYSTEM_PROMPT, {{CONTENT}} interpolation), a mock-data toggle for cheap local dev, multi-level caching (1-hour in-memory + 10-hour persistent) with intelligent invalidation to control API spend, JWT auth with refresh tokens, RBAC, and per-user trial-limit enforcement.

Tech Stack

React 19, TypeScript, Vite 8, React Router v7, TanStack Query v5, Axios, Framer Motion, GSAP, Tailwind CSS, Meemaw (frontend); Node.js, Express, TypeScript, MongoDB, Anthropic Claude, JWT (backend); Netlify deployment.

System Design

Creator ─► React 19 SPA (FSD, lazy routes)
               │  Axios + interceptors, TanStack Query
               ▼
         Express API (JWT + RBAC, trial limits, rate limit)
               │
      ┌────────┴───────────┐
      ▼                    ▼
  Multi-level cache    Anthropic Claude
  mem 1h / db 10h  ◄── prompt (env-configurable, {{CONTENT}})
      │                    │ 14-dimension scores / hook / pacing
      ▼                    ▼
   MongoDB (users, analyses, trials)

Smart Architectural Decisions

• Three tools that compose. Content → Script → Teleprompter isn't three apps bolted together; the script analyzer hands off directly into the teleprompter, creating a genuine create-to-camera workflow.
• Cost-aware AI caching. A two-tier cache (1h memory + 10h persistence) plus trial limits and rate limiting directly attack the biggest risk of an LLM product — runaway API cost — while keeping responses fast.
• Prompt-as-config. System/user prompts and a mock-data flag live in env, so prompts can be tuned and dev can run without burning tokens.
• Bleeding-edge but disciplined. React 19 / Vite 8 / Router v7 with lazy code-splitting, FSD, path aliases, and route guards — modern stack used cleanly, not chaotically.

Impacts

Used by 100+ creators, with reported 25–40% engagement improvement. Turns pre-publish guesswork into measurable, AI-scored feedback across writing, scripting, and on-camera delivery.

Demonstrated Skills

LLM product engineering (prompt design, structured multi-dimension scoring); cost control via multi-level caching + rate/trial limits; React 19 + FSD at scale; modern data layer (TanStack Query, Axios interceptors); auth with refresh tokens + RBAC; rich motion design (Framer Motion + GSAP); end-to-end product thinking (composed tool workflow).