Forem: Carlos Chao(El Frontend)

I Built My Own AI-Powered Video Clipping Tool Because the Paid Ones Were Too Expensive(And the AI can do it for me)

Carlos Chao(El Frontend) — Fri, 13 Feb 2026 04:26:51 +0000

The problem?

Most tools that do this are paid. And not just a little — quite expensive.

Now, I'm not being cheap. But I thought:

"An engineer built this tool. I'm an engineer too. So I can build my own."

And then I reflected:

"Well... not just me. Me + Claude."

And that's how Video Wizard was born — an open-source, AI-powered tool for turning long-form video into short-form content with subtitles, smart cropping, and professional templates.

In this post, I'll walk you through the architecture, the tech decisions, and what I learned building a production-grade video processing pipeline as a side project.

What Does It Do?

Here's the full pipeline:

Upload a video (or paste a YouTube URL)
AI transcribes the audio using OpenAI Whisper
GPT-4o analyzes the transcript and detects the most viral moments (scored 0-100)
Smart cropping with face detection (MediaPipe + OpenCV) reframes for vertical
Edit subtitles in a visual editor — merge, split, clean filler words
Pick a template — 9 professional caption styles built as React components
Render the final video with Remotion
Download — ready for TikTok, Reels, or YouTube Shorts

But it's not just a clip extractor. There's also a standalone Subtitle Generator that skips the AI analysis and goes straight from upload to rendered subtitles, and a Content Intelligence tool for analyzing transcripts without video.

The Architecture: Three Services, One Goal

I chose a microservices monorepo approach with Turborepo. Three independent services, each doing what it does best:

graph TB
    subgraph Frontend["Next.js 16 App — Port 3000"]
        UI["React 19 UI<br/>Tailwind + shadcn/ui"]
        API["API Routes<br/>(thin HTTP layer)"]
        Services["Service Layer<br/>(business logic)"]
        UI --> API
        API --> Services
    end

    subgraph Python["Python Engine — Port 8000"]
        Whisper["OpenAI Whisper<br/>Transcription"]
        Face["MediaPipe<br/>Face Detection"]
        FFmpeg["FFmpeg<br/>Video Processing"]
        YT["yt-dlp<br/>YouTube Download"]
    end

    subgraph Remotion["Remotion Server — Port 3001"]
        Templates["9 React Templates<br/>viral · minimal · hormozi<br/>mrbeast · modern · highlight..."]
        Queue["Job Queue<br/>Async Rendering"]
        Renderer["Remotion Renderer<br/>React → MP4"]
        Templates --> Renderer
        Queue --> Renderer
    end

    subgraph External["External APIs"]
        OpenAI["OpenAI<br/>GPT-4o + Whisper API"]
        YouTube["YouTube"]
    end

    Services -->|"transcribe / upload<br/>face detection"| Python
    Services -->|"render job<br/>poll status"| Remotion
    Services -->|"viral analysis<br/>structured output"| OpenAI
    YT -->|"download"| YouTube

    style Frontend fill:#0a0a0a,stroke:#3b82f6,stroke-width:2px,color:#e2e8f0
    style Python fill:#0a0a0a,stroke:#22c55e,stroke-width:2px,color:#e2e8f0
    style Remotion fill:#0a0a0a,stroke:#a855f7,stroke-width:2px,color:#e2e8f0
    style External fill:#0a0a0a,stroke:#f59e0b,stroke-width:2px,color:#e2e8f0

And here's the full video processing pipeline — from upload to download:

flowchart LR
    A["Upload Video<br/>or YouTube URL"] --> B["Python Engine"]
    B --> C{"Whisper<br/>Transcription"}
    C --> D["Subtitles<br/>(seconds)"]
    D --> E["GPT-4o<br/>Viral Analysis"]
    E --> F["Viral Clips<br/>scored 0-100"]
    D --> G["Subtitle Editor<br/>(milliseconds)"]
    G --> H["Select Template<br/>+ Aspect Ratio"]
    H --> I["Remotion Server"]
    I --> J["React Components<br/>→ Video Frames"]
    J --> K["FFmpeg Encoding<br/>→ MP4"]
    K --> L["Download"]

    style A fill:#1e293b,stroke:#3b82f6,color:#e2e8f0
    style B fill:#1e293b,stroke:#22c55e,color:#e2e8f0
    style C fill:#1e293b,stroke:#22c55e,color:#e2e8f0
    style D fill:#1e293b,stroke:#f59e0b,color:#e2e8f0
    style E fill:#1e293b,stroke:#f59e0b,color:#e2e8f0
    style F fill:#1e293b,stroke:#f59e0b,color:#e2e8f0
    style G fill:#1e293b,stroke:#3b82f6,color:#e2e8f0
    style H fill:#1e293b,stroke:#3b82f6,color:#e2e8f0
    style I fill:#1e293b,stroke:#a855f7,color:#e2e8f0
    style J fill:#1e293b,stroke:#a855f7,color:#e2e8f0
    style K fill:#1e293b,stroke:#a855f7,color:#e2e8f0
    style L fill:#1e293b,stroke:#10b981,color:#e2e8f0

Why three services?

Python has the best video/ML libraries (FFmpeg, MediaPipe, Whisper). There's no good alternative in the JS ecosystem for face detection + smart cropping.
Remotion needs its own server because it bundles React components into video frames — it's resource-intensive and benefits from isolated rendering.
Next.js handles the UI, API routing, and orchestration. It's the glue.

The Key Insight: Video as React Components

This was the "aha" moment for me.

I chose Remotion because it lets you treat video like a UI. Components, props, composition — but applied to audiovisual content.

Here's what a caption template looks like. It's just a React component:

export function HormoziTemplate({ currentSegment, isActive, brandKit }: CaptionTemplateProps) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  if (!isActive || !currentSegment) return null;

  const words = currentSegment.text.split(' ');

  return (
    <AbsoluteFill style={{ justifyContent: 'flex-end', alignItems: 'center' }}>
      <div style={{ display: 'flex', gap: 12 }}>
        {words.map((word, i) => {
          const wordDelay = i * 4;
          const scale = interpolate(frame, [wordDelay, wordDelay + 8], [0.5, 1.15]);
          const translateY = interpolate(frame, [wordDelay, wordDelay + 8], [40, 0]);

          return (
            <span key={i} style={{
              transform: `translateY(${translateY}px) scale(${scale})`,
              color: brandKit?.textColor ?? '#FFFFFF',
              fontFamily: brandKit?.fontFamily ?? 'Montserrat',
            }}>
              {word}
            </span>
          );
        })}
      </div>
    </AbsoluteFill>
  );
}

Every frame is a function of time. useCurrentFrame() gives you the current frame number, and interpolate() maps it to any CSS property. No imperative video APIs, no timelines — just declarative React.

I built 9 templates this way: from clean minimal to high-energy mrbeast style, each with different animations, typography, and color schemes. Switching templates is just changing a prop.

Here's how the Remotion composition layers work:

graph TB
    subgraph Remotion["Remotion Render Pipeline"]
        Frame["useCurrentFrame()<br/>frame = 450, fps = 30"]
        Time["currentTime = frame / fps<br/>= 15.0 seconds"]
        Frame --> Time

        subgraph Layers["AbsoluteFill Layers"]
            L1["Layer 1: OffthreadVideo<br/>Source video stream"]
            L2["Layer 2: CaptionOverlay<br/>Template + active subtitle"]
            L3["Layer 3: Brand Logo<br/>(optional)"]
        end

        Time --> L2

        subgraph Hook["useActiveSubtitle Hook"]
            Find["Find segment where<br/>start ≤ time < end"]
            Offset["Apply 200ms offset"]
            Word["Return active word<br/>+ segment"]
            Find --> Offset --> Word
        end

        L2 --> Hook

        subgraph Switch["Template Router"]
            T1["viral"]
            T2["minimal"]
            T3["hormozi"]
            T4["mrbeast"]
            T5["+ 5 more..."]
        end

        Word --> Switch
    end

    style Remotion fill:#0a0a0a,stroke:#a855f7,stroke-width:2px,color:#e2e8f0
    style Layers fill:#1a1a2e,stroke:#6366f1,color:#e2e8f0
    style Hook fill:#1a1a2e,stroke:#f59e0b,color:#e2e8f0
    style Switch fill:#1a1a2e,stroke:#ec4899,color:#e2e8f0

Smart Face Tracking: The Python Side

The most interesting algorithmic challenge was the smart cropping. When you convert a 16:9 video to 9:16, you need to decide where to crop — and ideally, you follow the speaker's face.

The processing engine uses MediaPipe's BlazeFace model for detection, then applies a weighted scoring algorithm when multiple faces appear:

score = (size_score * 0.5) + (center_distance * 0.3) + (confidence * 0.2)

50% weight on face size — the speaker is usually closest to camera
30% on center proximity — main subjects tend to be centered
20% on detection confidence — trust the model

After selecting the face per frame, a moving average smoothing filter eliminates jitter:

smoothed_positions = np.convolve(
    raw_positions,
    np.ones(window_size) / window_size,
    mode='same'
)

flowchart LR
    A["Input Video<br/>16:9"] --> B{"Aspect ratio<br/>matches target?"}
    B -->|Yes| C["Skip detection<br/>Center crop"]
    B -->|No| D["MediaPipe<br/>BlazeFace"]
    D --> E["Score faces<br/>size 50% + center 30%<br/>+ confidence 20%"]
    E --> F["Select best face<br/>per frame"]
    F --> G["Moving average<br/>smoothing filter"]
    G --> H["FFmpeg crop<br/>with tracking data"]
    C --> I["Output Video<br/>9:16 / 1:1 / 4:5"]
    H --> I

    style A fill:#1e293b,stroke:#22c55e,color:#e2e8f0
    style D fill:#1e293b,stroke:#22c55e,color:#e2e8f0
    style E fill:#1e293b,stroke:#f59e0b,color:#e2e8f0
    style G fill:#1e293b,stroke:#a855f7,color:#e2e8f0
    style I fill:#1e293b,stroke:#10b981,color:#e2e8f0

The result? Cinematic-quality camera movement that tracks the speaker without the "security camera" feel. And it's smart enough to skip face detection entirely when the source video already matches the target aspect ratio.

Subtitle Synchronization: The Hard Part Nobody Talks About

Getting subtitles to sync properly across three services with different time formats was the trickiest part:

Stage	Format	Example
Whisper output	Seconds	`{ start: 0.5, end: 2.3 }`
Frontend editor	Milliseconds	`{ start: 500, end: 2300 }`
Remotion renderer	Seconds	`{ start: 0.5, end: 2.3 }`

One early bug had 60-second videos rendering as 0.06 seconds because the times were getting divided by 1000 twice. Fun times.

I also added a configurable 200ms subtitle offset to account for the perceptual delay between hearing a word and reading it:

const SUBTITLE_OFFSET = 0.2; // seconds
const adjustedTime = currentTime - SUBTITLE_OFFSET;

Small detail, but it makes the subtitles feel perfectly synced.

The Subtitle Cleanup Toolkit

Beyond basic editing, I built automated detection for common subtitle issues:

Silence detection — gaps > 1 second between segments
Filler word detection — "um", "uh", "like", "you know" (13 defaults)
Short segment detection — segments under 300ms (usually noise)

These are pure functions — no side effects, easily testable:

const result = detectIssues(subtitles, config);
const cleaned = removeDetectedIssues(subtitles, result.issues);

One click and your subtitles go from raw Whisper output to clean, professional captions.

Architecture Decisions I'm Proud Of

Screaming Architecture

The folder structure tells you what the app does before you read a single line of code:

features/
└── video/
    ├── components/     # "I render video UI!"
    ├── hooks/          # "I manage video state!"
    ├── containers/     # "I orchestrate video workflows!"
    ├── types/          # "I define video data shapes!"
    └── lib/            # "I provide video utilities!"

Strict Separation of Concerns

API routes are thin — they only handle HTTP and delegate to services:

// API route: ~5 lines of logic
export async function POST(request: NextRequest) {
  const body = await request.json();
  const data = await subtitleGenerationService.generateSubtitles(body);
  return NextResponse.json({ success: true, data });
}

All business logic lives in service classes — reusable, testable, no HTTP concerns:

// Service: all the real work
export class SubtitleGenerationService {
  async generateSubtitles(input) {
    // 1. Call Python transcription
    // 2. Convert time formats
    // 3. Structure response
  }

  async renderWithSubtitles(input) {
    // 1. Send job to Remotion
    // 2. Poll until complete
    // 3. Return video URL
  }
}

Zod Everywhere

Every external boundary is validated with Zod. Types are inferred, not duplicated:

const BrandKitSchema = z.object({
  logoUrl: z.string().optional(),
  logoPosition: z.enum(['top-left', 'top-right', 'bottom-left', 'bottom-right']),
  logoScale: z.number().min(0.1).max(2),
  primaryColor: z.string().regex(/^#[0-9A-Fa-f]{6}$/).optional(),
});

type BrandKit = z.infer<typeof BrandKitSchema>; // Types from schemas, not the other way around

The Tech Stack

Layer	Technology	Why
Frontend	Next.js 16 + React 19	App Router, server components, API routes
Styling	Tailwind + shadcn/ui	Fast, accessible, consistent
AI Analysis	Vercel AI SDK + GPT-4o	Structured output for viral clip detection
Transcription	OpenAI Whisper	Best multilingual accuracy
Face Detection	MediaPipe (BlazeFace)	Lightweight, real-time, no GPU required
Video Processing	FFmpeg + OpenCV	Industry standard, battle-tested
Video Rendering	Remotion	React-based, programmatic, template-friendly
Validation	Zod	Runtime + TypeScript safety
Monorepo	Turborepo + pnpm	Fast builds, shared packages

What I Learned

1. Engineer + AI = Multiplied Output

This project would have taken me months working solo. With Claude as a pair programmer, I went from idea to working prototype significantly faster. Not because the AI wrote everything — but because it accelerated the tedious parts (boilerplate, FFmpeg flags, Remotion configuration) so I could focus on architecture and product decisions.

2. Build Your Own Tools

We increasingly depend on external SaaS for everything. Sometimes the best way to learn is to build the tool yourself. You'll understand video processing, ML pipelines, and rendering engines at a depth that no tutorial can give you.

3. Microservices Aren't Just for Big Teams

Even for a solo project, separating Python (video/ML), Remotion (rendering), and Next.js (UI/orchestration) kept each piece simple and focused. When I needed to change the face detection algorithm, I didn't touch a single line of frontend code.

4. Time Formats Will Haunt You

If you're building anything with subtitles: pick one time format (seconds or milliseconds) and stick with it. Document your conversions. Test the boundaries. Your future self will thank you.

What's Next

This is still a personal project, but with features that are already quite powerful:

9 professional caption templates
Multi-aspect ratio support (9:16, 1:1, 4:5, 16:9)
Brand kit customization (logo, colors, fonts)
Silence and filler word auto-cleanup
SRT/VTT subtitle export
YouTube URL support
Multi-language transcription

Some ideas on the roadmap:

Batch processing for multiple clips
Custom template builder (visual editor)
Cloud deployment with render queue scaling
Speaker diarization (who said what)

I'd love your feedback:

What feature would you want to see?
Would you use this for your own content?
What would you improve?

PRs, issues, and stars are all welcome.

GitHub: github.com/el-frontend/video-wizard

Built with Next.js, Python, Remotion, and a lot of help from Claude.

From Stack Overflow to AI Agents: Why I Stopped Fighting and Started Orchestrating in 2025

Carlos Chao(El Frontend) — Sun, 11 Jan 2026 18:06:01 +0000

In my journey as a web developer, I always felt comfortable studying, practicing, and coding. It was a familiar cycle: get frustrated with documentation, struggle with code that didn't work, and try to find the solution in the official docs or through our best friend, Stack Overflow.

But all of that changed for me in 2025. And if you are reading this, you probably know why.

We no longer need to be stuck in that endless loop, and it's all thanks to AI. When ChatGPT exploded onto the scene in 2022, we all started seeing this tool as something that would change the way we work. And boy, has it changed it.

Right now, such a dependency on Artificial Intelligence Models has been created that many of us don't see ourselves working or doing our day-to-day tasks without them. Honestly, we shouldn't even consider stopping.

But why do I say everything changed for me in 2025?
AI models have evolved in such a way that, right now, they possibly code 5x better than I do. They know more languages and more syntax, and they have seen more code than I will see in 10 lifetimes.

Simply put, instead of worrying about whether AI is going to take my job, what I have been doing is adopting it into my development and creation process.

At first, like many others, I thought AI was going to replace us—many CEOs of big companies have said so. But the reality, in my opinion, is different: if we don't adopt these tools, we WILL be left without a job.

Starting in 2026, the bar to measure our efficiency as developers is different. It is much higher, and this is all thanks to AI Agents.

The Rise of Agents and MCP
The most prominent case right now is Claude Code, a terminal tool that allows you to integrate with Anthropic's AI models. You can not only develop with it but also perform any type of task and automate it. Agents take AI models to the next level, allowing for orchestration and well-planned work.

Another interesting element—which I've discussed before on my YouTube channel—is the MCP (Model Context Protocol). These are essentially tools that allow us to access functionalities that AI models cannot reach due to their closed design. For example, having access to a Database or a document in the cloud. The examples of what can be done with MCP are infinite; think of them as "plugins" for AI Models.

Add to this the ability for agents to specialize: you can have agents for different types of tasks that understand how to outline plans and implement them.

My Current Stack
Currently, I am using paid tools that have saved me countless hours in my creative and productive process:

✅ ChatGPT Pro

✅ Eleven Labs (for audio/content creation)

✅ Github Copilot Pro

So far, I must say that I don't feel like I'm leveraging the full potential of AI. I feel like I'm only at 20-40% of what AI can actually do for me. My goal for 2026 is to change the way I use it.

The Hardest Question
With all this in mind, how realistic is it for us to delegate the development process to AI? Many questions arise here, but the hardest one for me to answer—and one I haven't been clear on until now—is:

What percentage of the development process should we delegate to AI?

Many reading this might feel they can answer that question. But right now, I don't think we have all the arguments to do so.

Two years ago, I said the AI usage process should just be "you writing and AI autocompleting." That was a total fantasy that lasted only a few months until AI could plan for itself, code generation models improved massively, and the famous "Vibe Coding" emerged.

The moment Agents came into action with all these capabilities, my ideal regarding AI usage collapsed. I realized what AI could do and how wrong I was.

I don't feel capable yet of telling you exactly what our day-to-day life as programmers should look like. However, I do believe that AI is not going to replace us for the moment. And I say "for the moment" because, just as I thought one thing 2 years ago, we don't know what will happen in the next 2.

We'll see how we fare in 2028.

How to Fetch Data in React: 5 Methods Compared

Carlos Chao(El Frontend) — Mon, 21 Jul 2025 16:10:16 +0000

Difficulty: Beginner

Reading time: ~8 minutes

Example API: https://rickandmortyapi.com

Fetching data is one of the first challenges every React developer faces.

In this article we’ll explore five different approaches—ranging from native browser features to full‑blown data‑fetching libraries—all with the same public API so you can compare them apples‑to‑apples.

Fetch API with useEffect
Axios with useEffect
A Reusable useFetch Hook
React Query (TanStack Query)
SWR (stale‑while‑revalidate)
Choosing the Right Tool
Wrapping Up

1. Fetch API with `useEffect`

The fastest way to pull data is the browser‑native fetch wrapped in a useEffect hook:

import React, { useState, useEffect } from "react";

function CharacterListFetch() {
  const [characters, setCharacters] = useState([]);

  useEffect(() => {
    fetch("https://rickandmortyapi.com/api/character")
      .then((res) => res.json())
      .then((data) => setCharacters(data.results))
      .catch((err) => console.error("Error:", err));
  }, []);

  return (
    <>
      <h2>Characters (Fetch API)</h2>
      <ul>
        {characters.map((c) => (
          <li key={c.id}>{c.name}</li>
        ))}
      </ul>
    </>
  );
}

Pros & Cons

✅ Pros	⚠️ Cons
Zero dependencies	Manual parsing (`res.json()`)
Perfect for tiny demos	Must handle caching, retries, etc. yourself

2. Axios with `useEffect`

Axios offers a nicer API and extra features (interceptors, cancellation…).

import React, { useState, useEffect } from "react";
import axios from "axios";

function CharacterListAxios() {
  const [characters, setCharacters] = useState([]);

  useEffect(() => {
    axios
      .get("https://rickandmortyapi.com/api/character")
      .then((res) => setCharacters(res.data.results)) // already JSON
      .catch((err) => console.error("Error:", err));
  }, []);

  return (
    <>
      <h2>Characters (Axios)</h2>
      <ul>
        {characters.map((c) => (
          <li key={c.id}>{c.name}</li>
        ))}
      </ul>
    </>
  );
}

3. A Reusable `useFetch` Hook

When you start duplicating fetch logic, extract it into a custom hook.

// useFetch.js
import { useState, useEffect } from "react";

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    setError(null);

    fetch(url)
      .then((res) => res.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

Usage:

import { useFetch } from "./useFetch";

function CharacterListHook() {
  const { data, loading, error } = useFetch(
    "https://rickandmortyapi.com/api/character"
  );

  if (loading) return <p>Loading…</p>;
  if (error)   return <p>Error loading data</p>;

  return (
    <>
      <h2>Characters (Custom Hook)</h2>
      <ul>
        {data.results.map((c) => (
          <li key={c.id}>{c.name}</li>
        ))}
      </ul>
    </>
  );
}

4. React Query (TanStack Query)

For production apps with complex data flows, React Query is a powerhouse.

npm install @tanstack/react-query

import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <CharacterListReactQuery />
    </QueryClientProvider>
  );
}

function CharacterListReactQuery() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["characters"],
    queryFn: async () =>
      (await fetch("https://rickandmortyapi.com/api/character")).json(),
  });

  if (isLoading) return <p>Loading…</p>;
  if (error)     return <p>Error loading data</p>;

  return (
    <>
      <h2>Characters (React Query)</h2>
      <ul>
        {data.results.map((c) => (
          <li key={c.id}>{c.name}</li>
        ))}
      </ul>
    </>
  );
}

Highlights

Built‑in caching & background refetch
Stale‑time tuning, pagination, mutations
Devtools for debugging

5. SWR (stale‑while‑revalidate)

Vercel’s SWR is minimal but mighty, ideal for Next.js projects.

npm install swr

import useSWR from "swr";

const fetcher = (url) => fetch(url).then((res) => res.json());

function CharacterListSWR() {
  const { data, error, isLoading } = useSWR(
    "https://rickandmortyapi.com/api/character",
    fetcher
  );

  if (isLoading) return <p>Loading…</p>;
  if (error)     return <p>Error loading data</p>;

  return (
    <>
      <h2>Characters (SWR)</h2>
      <ul>
        {data.results.map((c) => (
          <li key={c.id}>{c.name}</li>
        ))}
      </ul>
    </>
  );
}

6. Choosing the Right Tool

Scenario	Recommended Approach
Small tutorial, no extra deps	Fetch API
Need features like interceptors	Axios
Reusing simple fetch logic	Custom hook
Large‑scale app, mutations, caching	React Query
Lightweight cache, Next.js	SWR

Tip: You can mix & match—e.g., use Fetch for one‑offs and React Query for critical data.

7. Wrapping Up

That’s it! You now have five practical patterns for fetching data in React:

Fetch API
Axios
Custom hook
React Query
SWR

Pick the one that suits your project’s complexity and your team’s preferences.

Questions or feedback? Drop a comment below—let’s chat!

If this post helped you, please ❤️ like, 🦄 unicorn, or 📣 share it with your fellow devs.

Happy coding!

AI Is Collapsing the Front‑End / Back‑End Divide

Carlos Chao(El Frontend) — Fri, 04 Jul 2025 00:21:16 +0000

AI Is Collapsing the Front‑End / Back‑End Divide

(One‑prompt UIs, many‑layer responsibilities)

Software is crossing a new threshold: AI can now write most of the UI layer for us. Tools like v0.dev generate React + Tailwind from a single prompt, while Bolt.new scaffolds a full app in minutes. The result? “Front‑end” roles are migrating toward full‑stack ownership.

1. Why Front‑End Devs Should Think Full‑Stack

AI already covers layout, components, and even micro‑animations, freeing developers to tackle deeper engineering tasks—data, auth, business logic. Job descriptions are catching up: companies increasingly look for React plus SQL and queue expertise in a single profile.

2. AI Is the Bridge

Studies show AI coding assistants lift completed tasks by ~26 %. In‑house agents reclaim hundreds of thousands of engineer‑hours each year by automating boilerplate. This productivity surplus levels the playing field for small teams and solo devs, accelerating the push toward versatile full‑stack profiles.

3. Generative UI Tools Have Your Front‑End Covered

Tool	What It Gives You	Where You Still Add Value
v0.dev	React + Tailwind + shadcn/ui components from a natural‑language prompt	Domain modelling, API integration, state management, accessibility polish
Bolt.new	End‑to‑end project scaffold (editor, live preview, deploy) in a single chat session	Secure auth, data layer, performance budgets, testing harnesses
Agentic coders (Amp, Replit Ghostwriter, Claude Code, Gemini CLI)	Multi‑file refactors, test writing, infra boilerplate	Architectural decisions, enforcing team conventions

4. The New Full‑Stack Skill Stack

Data fluency – SQL + an operational store (Postgres/Supabase, Mongo) remain table‑stakes.
API & architecture – serverless patterns, GraphQL/REST, queues, auth flows.
Algorithmic thinking – AI writes code, but you still design complexity‑aware solutions.
AI Ops – prompt‑engineering, evaluating LLM output, securing generated code.
DevEx best practices – automated testing, CI/CD, observability.

5 | 90-Day Action Plan (enhanced version)

Days 0-30 – Full-stack foundations

Complete a crash course on databases (SQL + schema design).
Ship a simple REST endpoint in your current stack (Node/Next.js, etc.).
Automate basic unit tests with Vitest or Jest.

Days 31-60 – AI-guided project

Use v0.dev to generate the UI layer and Bolt.new to scaffold the repo.
Hook everything to Supabase or managed Postgres for full CRUD + auth.
Bring in an AI assistant (Copilot, Ghostwriter) to write tests and refactors—then manually review every PR.

Days 61-90 – Production & best practices

Deploy to Vercel or Netlify with CI/CD; set up linting and auto-formatting.
Add lightweight observability (structured logs and basic metrics).
Run a security audit (Snyk / OWASP) and fix any findings.
Write a post-mortem of the whole journey and share the lessons with your team or community.

Result: In three months you’ll have a mini-SaaS running in production—covered by tests, CI/CD, monitoring, and security reviews—giving you the full-stack skill set, powered by AI.

💬 Join the conversation: Have you already merged auto‑generated UI into production? What surprised you when you stepped into the database layer? Share your lessons—or your worries—below. Let’s help each other level‑up for the AI‑powered full‑stack era. 🚀

Getting Started with Building AI Apps Using Vercel AI SDK

Carlos Chao(El Frontend) — Mon, 09 Jun 2025 02:52:51 +0000

Building an AI‑powered app with Vercel AI SDK is mostly about wiring three things together:

A streaming API route
Strongly‑typed helpers (tools, MCP, or structured objects)
A lightweight UI hook that keeps the chat flow reactive

In this quick primer you’ll cover the bare‑bones essentials: install the Vercel AI SDK, set up a Next.js API route that streams tokens in real time, and get a taste of key capabilities like streaming text and objects, function‑calling tools, and the Model Context Protocol.

Goal

Ship a tiny but functional AI chatbot that streams responses in real‑time.

You only need three moving parts:

API route → talks to the LLM

Helpers (Tools / MCP / typed objects) → give the LLM super‑powers

UI hook → shows messages as they arrive

1. Core Ideas (read this first)

Concept	Why it matters	One‑liner
Streaming Text	Users see words appear instantly, not after a long pause.	`streamText()` returns tokens as an async iterator.
Streaming Objects	Need JSON, not prose? Ask the model to emit objects that match a Zod schema.	`streamObject()`
Multi‑modal	Send images, audio or PDFs along with text.	Works out‑of‑the‑box with GPT‑4o & Gemini.
AI Tools	Let the model call your code (DB queries, weather, etc.).	Define a `tool()` with `execute()`.
MCP	Open standard so any LLM can discover your tools automatically.	Experimental client ships with the SDK.

Keep these in the back of your mind; the rest of the guide shows them in action.

2. Project Setup (2 commands)

# ① Install SDK + OpenAI provider
pnpm add ai @ai-sdk/openai

# ② Create (or use) a Next.js app
npx create-next-app my-ai-app --ts

The SDK works everywhere TypeScript runs—Next.js, SvelteKit, Expo, plain Node, you name it.

3. Back‑end: Create a Streaming Route

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const { textStream } = await streamText({
    model: openai('gpt-4o'),
    prompt: messages,
  });

  // Sends proper headers so the client receives a stream
  return textStream.toDataStreamResponse();
}

What’s happening?

streamText() talks to GPT‑4o, then pipes tokens straight back to the browser.

4. Front‑end: Drop‑in `useChat()`

'use client';

import { useChat } from '@ai-sdk/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-xl mx-auto">
      <div className="border rounded p-4 h-64 overflow-y-auto">
        {messages.map(m => (
          <p key={m.id} className="mb-2">
            <strong>{m.role}:</strong> {m.content}
          </p>
        ))}
      </div>

      <input
        value={input}
        onChange={handleInputChange}
        className="border p-2 w-full"
        placeholder="Ask me anything…"
      />
    </form>
  );
}

That’s it—your chat UI now streams messages as fast as the model returns them.

5. Bonus: Add a Weather Tool (Function Calling)

import { z } from 'zod';
import { tool, generateText } from 'ai';

const weatherTool = tool({
  description: 'Get the weather in a location',
  parameters: z.object({
    location: z.string().describe('City or place'),
  }),
  execute: async ({ location }) => ({
    location,
    temperature: 68 + Math.floor(Math.random() * 11) - 5, // fake data
  }),
});

const result = await generateText({
  model: openai('gpt-4o'),
  tools: { weather: weatherTool },
  prompt: 'What’s the weather in San Francisco?',
});

Now the LLM can call your function, get the result, and include it in its answer—no extra API round‑trips.

6. Ship It

Route → streamText or streamObject
UI → useChat() (text) or experimental_useObject() (JSON)
Enhance → Add tools, expose them via MCP
Deploy → Push to Vercel; streaming just works

Next Steps

Use Vercel templates like Pinecone‑RAG (vector search) or Supabase‑starter (file storage).
Turn on tracing (AI SDK v3.3) with Langfuse or OpenTelemetry.
Watch for v5 alpha—better multi‑modal, more hooks.

With these basics you can ship a real‑time AI feature this weekend. Happy hacking!

12 Advanced TypeScript Tricks Every Developer Should Know

Carlos Chao(El Frontend) — Mon, 02 Jun 2025 19:52:09 +0000

TypeScript isn't just about typing your code—it's a powerful tool that helps you write safer, more expressive, and maintainable software.

Here are 12 advanced techniques to get the most out of it:

1. `infer`: Extract types without repeating logic

The infer keyword lets you capture types dynamically within conditional types—perfect for inferring function return types without duplicating logic.

type GetParserResult<T> = T extends
  | (() => infer TResult)
  | { parse: () => infer TResult }
  | { extract: () => infer TResult }
  ? TResult
  : never;

2. Literal types with template strings

Template literal types allow you to combine values declaratively.

type Bread = "croissant" | "baguette";
type Filling = "cheese" | "ham";
type Option = `${Filling} ${Bread}`;
// "cheese croissant" | "ham baguette" | ...

You can even customize with emojis:

type Fruit = "apple" | "banana";
type FruitEmoji = {
  [K in Fruit]: `${K} 🍎`;
};
// { apple: "apple 🍎", banana: "banana 🍎" }

3. Enable `noUncheckedIndexedAccess` in `tsconfig.json`

A lesser-known but powerful flag that forces you to handle missing keys or indexes:

{
  "compilerOptions": {
    "noUncheckedIndexedAccess": true
  }
}

It makes object and array access safer.

4. Reusable generic functions

Generic functions preserve type precision no matter the value passed:

function identity<T>(value: T): T {
  return value;
}

5. Use `Record` to map keys to values

Great for defining configurations or permissions per role:

type UserRoles = "admin" | "user";
type Permissions = Record<UserRoles, string[]>;
// { admin: string[]; user: string[] }

6. Handy utility types: `Partial`, `Required`, `Readonly`, `Pick`

Powerful type transformers:

Partial<T> → Makes all properties optional
Required<T> → Makes all properties required
Readonly<T> → Prevents modification
Pick<T, K> → Selects a subset of properties

7. Custom type guards

Let you refine types at runtime and unlock autocompletion:

function isString(value: unknown): value is string {
  return typeof value === "string";
}

8. Properly configure `tsconfig.json` for your environment

For Node.js

{
  "compilerOptions": {
    "module": "NodeNext",
    "target": "ES2022"
  }
}

For Web Apps

{
  "compilerOptions": {
    "lib": ["ES2022", "DOM"]
  }
}

9. `keyof` + `typeof` for dynamic types

Generate types from real objects:

const colors = {
  primary: "#000",
  secondary: "#FFF"
};

type ColorKeys = keyof typeof colors;
// "primary" | "secondary"

10. Distributive conditional types

TypeScript distributes conditional types over unions automatically:

type Fruit = "apple" | "banana" | "orange";
type IsCitrus<T> = T extends "orange" ? true : false;

type Result = IsCitrus<Fruit>;
// true | false | false

11. Extend the global scope with `declare global`

Add custom properties to window or other global objects:

declare global {
  interface Window {
    myCustomProperty: string;
  }
}

12. Generic functions with key safety

Use keyof and typeof to access properties safely:

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

✨ Final Thoughts

These tricks don't just save you time—they make your code more expressive and less error-prone. TypeScript is a design tool: the better you master it, the better you communicate with your team... and the compiler.

Did you already use any of these? Which one was new to you?

Based on the learnings from Total TypeScript by Matt Pocock

Trunk-Based Development (TBD)

Carlos Chao(El Frontend) — Sun, 01 Jun 2025 02:06:35 +0000

🌳 Trunk-Based Development (TBD)

Trunk-Based Development (TBD) is a version control management practice where developers integrate small and frequent changes into a main branch, known as the "trunk" or "main." This strategy supports continuous integration and enhances software delivery performance.

❓ What is Trunk-Based Development?

In TBD, developers work on small updates that are regularly merged into the main branch. Unlike models such as Gitflow, which rely on long-lived feature branches, TBD encourages short-lived branches or direct integration into the trunk. This reduces merge complexity and minimizes conflicts.

✅ Advantages of Trunk-Based Development

Improved Continuous Integration: Small, frequent merges help catch bugs early and keep the codebase stable.
Faster Deployments: Simplified branch management leads to shorter development cycles and more efficient continuous delivery.
Reduced Merge Conflicts: By avoiding long-lived branches, code conflicts are minimized, making team collaboration smoother.

🔀 Comparison: Trunk-Based Development vs. Gitflow

While Gitflow uses multiple primary branches and long-lived feature branches, TBD focuses on a single main branch with frequent integrations.

Gitflow can be beneficial for teams needing strict version control, but it often introduces additional complexity in managing branches and merges.

🛠️ Implementing Trunk-Based Development

To adopt TBD, consider these steps:

Frequent Integrations: Encourage developers to merge changes into the main branch at least once a day.
Automated Testing: Set up a strong suite of automated tests to ensure integrations don’t introduce bugs.
Feature Toggles: Use feature flags to manage in-progress features without needing extra branches.
Code Reviews: Establish code reviews to maintain quality and foster knowledge sharing across the team.

Forem: Carlos Chao(El Frontend)

I Built My Own AI-Powered Video Clipping Tool Because the Paid Ones Were Too Expensive(And the AI can do it for me)

What Does It Do?

The Architecture: Three Services, One Goal

The Key Insight: Video as React Components

Smart Face Tracking: The Python Side

Subtitle Synchronization: The Hard Part Nobody Talks About

The Subtitle Cleanup Toolkit

Architecture Decisions I'm Proud Of

Screaming Architecture

Strict Separation of Concerns

Zod Everywhere

The Tech Stack

What I Learned

1. Engineer + AI = Multiplied Output

2. Build Your Own Tools

3. Microservices Aren't Just for Big Teams

4. Time Formats Will Haunt You

What's Next

From Stack Overflow to AI Agents: Why I Stopped Fighting and Started Orchestrating in 2025

How to Fetch Data in React: 5 Methods Compared

Table of Contents

1. Fetch API with useEffect

Pros & Cons

2. Axios with useEffect

3. A Reusable useFetch Hook

4. React Query (TanStack Query)

5. SWR (stale‑while‑revalidate)

6. Choosing the Right Tool

7. Wrapping Up

AI Is Collapsing the Front‑End / Back‑End Divide

AI Is Collapsing the Front‑End / Back‑End Divide

1. Why Front‑End Devs Should Think Full‑Stack

2. AI Is the Bridge

3. Generative UI Tools Have Your Front‑End Covered

4. The New Full‑Stack Skill Stack

5 | 90-Day Action Plan (enhanced version)

Getting Started with Building AI Apps Using Vercel AI SDK

1. Core Ideas (read this first)

2. Project Setup (2 commands)

3. Back‑end: Create a Streaming Route

4. Front‑end: Drop‑in useChat()

5. Bonus: Add a Weather Tool (Function Calling)

6. Ship It

Next Steps

12 Advanced TypeScript Tricks Every Developer Should Know

1. infer: Extract types without repeating logic

2. Literal types with template strings

3. Enable noUncheckedIndexedAccess in tsconfig.json

4. Reusable generic functions

5. Use Record to map keys to values

6. Handy utility types: Partial, Required, Readonly, Pick

7. Custom type guards

8. Properly configure tsconfig.json for your environment

For Node.js

For Web Apps

9. keyof + typeof for dynamic types

10. Distributive conditional types

11. Extend the global scope with declare global

12. Generic functions with key safety

✨ Final Thoughts

Trunk-Based Development (TBD)

🌳 Trunk-Based Development (TBD)

❓ What is Trunk-Based Development?

✅ Advantages of Trunk-Based Development

🔀 Comparison: Trunk-Based Development vs. Gitflow

🛠️ Implementing Trunk-Based Development

1. Fetch API with `useEffect`

2. Axios with `useEffect`

3. A Reusable `useFetch` Hook

AI Is Collapsing the Front‑End / Back‑End Divide

AI Is Collapsing the Front‑End / Back‑End Divide

4. Front‑end: Drop‑in `useChat()`

1. `infer`: Extract types without repeating logic

3. Enable `noUncheckedIndexedAccess` in `tsconfig.json`

5. Use `Record` to map keys to values

6. Handy utility types: `Partial`, `Required`, `Readonly`, `Pick`

8. Properly configure `tsconfig.json` for your environment

9. `keyof` + `typeof` for dynamic types

11. Extend the global scope with `declare global`