Phase boundaries
Give each stage a clear input, output, and visible status to make failures diagnosable.
An internal production system that turns unstructured creator footage into ranked, ready-to-shoot Hinglish Instagram scripts.
01 / System
Content analysis was not a single prompt. It required intake, source scraping, evaluation, ranking, script generation, and human review. I structured the product around these phases so the system could be inspected and improved rather than treated as one opaque AI response.
02 / Decisions
The interface needed to help an internal team understand why content was ranked a certain way, find weak stages, and move from analysis to an actionable script without exposing unnecessary technical detail.
Give each stage a clear input, output, and visible status to make failures diagnosable.
Separate content judgment from generation so the team could evaluate signals first.
Treat model usage and analysis cost as a first-class operational constraint.
03 / Reflection
Owning the product and implementation meant interface decisions could respond directly to real pipeline behavior. This draft will later include the production interface, failure states, ranking model, and examples of how generated scripts changed through iteration.
04 / Implementation evidence
ContentOS is private, so this related Fobet frontend implementation is used as public engineering evidence rather than presented as ContentOS source. It shows the same design-engineering approach: typed component contracts, explicit media states, browser failure handling, and performance-aware loading.
interface ReelProps {
data: {
id: number;
username: string;
videoSrc: string;
};
isActive: boolean;
}
useEffect(() => {
if (isActive && videoRef.current) {
videoRef.current.play()
.then(() => setIsPlaying(true))
.catch(() => setIsPlaying(false));
} else {
videoRef.current?.pause();
}
}, [isActive]);The media component defines its input and active state in TypeScript rather than accepting unstructured data.
The interface handles both resolved and rejected browser playback promises instead of assuming autoplay succeeds.
Active media uses eager preload; inactive media is paused and configured not to preload.
Ephemeral playback stays local while shared modal, toast, and selection state lives in a typed Zustand store.
Public evidence currently does not include an automated test suite or production API-contract layer, so those are intentionally not claimed here.
Next case study
Naksha Studio