CreatoorAI
Overview
CreatoorAI is an AI-powered platform that enables users to create personalized videos using AI avatars. I was part of the frontend team that built the complete frontend, consisting of a marketing landing page and a user dashboard application.
The platform serves content creators, marketers, and businesses by simplifying video production through AI-driven script generation, avatar selection, and automated video assembly.
The Challenge
- Real-time User Experience: Video generation takes several minutes, requiring seamless progress tracking without user frustration
- Payment Integration: Credit-based system with complex error handling for insufficient funds and failed transactions
- Performance Optimization: Landing page with multiple video demos needed to load efficiently across devices
- Complex State Management: Coordinating video generation states, user data, and real-time updates across components
Solution
Architecture Decisions:
- Next.js for both landing page and main app for optimal performance and SEO
- Redux Toolkit for managing complex application state
- WebSocket integration for real-time progress updates
- Component-based architecture with reusable UI elements
Key Technical Implementations:
- WebSocket connection management with auto-reconnection
- Global payment modal system with error handling
- Lazy loading and video optimization for performance
- Responsive design using Tailwind CSS
Key Features
Video Generation Flow:
- Script input and AI-powered script generation
- Avatar selection with custom and stock options
- Real-time progress tracking through WebSocket
- Final video preview and download
Landing Page:
- Interactive hero section with hover-to-play video demos
- Optimized video loading (only one plays at a time)
- Responsive design for mobile and desktop
Dashboard:
- Video management and history
- Credit tracking and payment integration
- Avatar creation and customization tools
Results
- User Experience: Eliminated loading frustrations with real-time progress updates
- Performance: Fast loading times with optimized video handling
- Conversion: Improved user engagement through interactive landing page
- Reliability: Robust payment system with clear error messaging
Estu
Architected and developed a suite of interconnected CRM applications powering Estu, a Boston-based fintech app that elevates student life.
Poetryy
Developed the backend system of Poetryy, an all-in-one finance app offering payment transfers alongside secure card management.