PROJECT TITLE
TWIQ - AI CONTENT COPILOT
My Role
I led the end-to-end design, development, and deployment of the TWIQ AI Content Agent platform.
My responsibilities included product design, full-stack engineering, and software architecture. I implemented intelligent features such as real-time AI prompting, assistant model switching, collaborative editing, and structured content workflows.
I also handled backend infrastructure, API development, and database modeling to ensure performance and scalability. Additionally, I integrated Stripe for seamless subscription billing, credit-based usage, and account-level payment management. I built out secure account settings and user preferences to complete the self-serve SaaS experience.
What is TWIQ AI
TWIQ is an AI-powered content assistant designed to help creators, marketers, and businesses rapidly generate high-quality content.
It features intelligent agents tailored to specific content formats—such as carousel posts, video scripts, headlines, captions, and more—allowing users to ideate, structure, and refine content effortlessly.
The platform includes built-in subscription and credit-based billing through Stripe, along with a robust user account system that supports profile management, usage tracking, and billing control—delivering a complete, self-service creative workspace.
1. The Problem
Content creators and marketers often struggle with inconsistent writing workflows, lack of inspiration, and repetitive tasks when generating content across platforms. <br/><br/> Despite the rise of AI, there’s a lack of intuitive, purpose-built tools that streamline the entire content ideation and production pipeline.
a. User Challenges: Content creators and social marketers often face creative block, difficulty switching between content formats, and the burden of managing multiple drafts or AI tools manually.
b. Business Challenges: The need for a subscription-based SaaS product that delivers fast AI responses, flexible credit-based usage, and smooth billing workflows. Existing solutions lack personalization, structured writing flow, and integrated project management.
Content Creator Persona
Maya, a social media strategist managing multiple brand accounts, needs a fast, reliable way to generate captions, carousel ideas, and video scripts while keeping tone and format consistent.
Freelance Writer Persona
James, a freelance writer working with agencies, wants an AI tool that helps structure content briefs quickly and fits into his client-based workflow.
Frontend
Built with Next.js and Tailwind CSS for a responsive, fast, and SEO-optimized web experience.
Backend
Node.js with Express, hosted on Render and cPanel, powering API routes, authentication logic, and real-time generation pipelines.
Database
Supabase was used for PostgreSQL-backed user management, content drafts, token tracking, and agent sessions.
AI Integration
Integrated with OpenAI’s API to support structured content generation via prompt templates and multi-agent workflows.
Streaming
Used Server-Sent Events (SSE) to stream AI responses in real-time, improving interactivity and feedback speed.
Billing
Stripe was integrated for handling annual subscriptions, credit-based purchases, and customer portal access with webhook-based updates.
Deployment
Frontend deployed on Vercel for instant CI/CD and edge performance. Backend services deployed via Render and cPanel for flexibility across environments.
a. Intelligent Assistant Framework
- Created modular AI agents tailored for different content types (e.g. carousel, captions, video scripts) using OpenAI APIs.
- Designed reusable prompt templates for consistency and context-driven outputs.
b. User Projects and Draft System
- Implemented project-based content storage using Supabase for organized draft management.
- Enabled edit history and real-time content autosave.
c. Stripe Subscription + Credit Integration
- Integrated Stripe for both annual subscriptions and usage-based credit purchases.
- Implemented secure customer portal and dynamic billing logic with webhooks.
d. Account Settings & Usage Tracking
- Built account settings page for profile management, subscription info, and usage stats.
- Tracked token usage (input/output/cached) per user and reset monthly.
- Streamed API responses for faster perceived generation time using server-sent events.
- Used React + Zustand to manage client state efficiently without over-fetching.
- Debounced input changes and autosave to limit database and API overhead.
- Lazy-loaded large agent modules and animations to reduce initial bundle size.
