# Claude vs ChatGPT Make Youtube From Scratch

Source: https://www.youtube.com/watch?v=S19pAfdjilk
Recap page: https://rapidrecap.app/video/S19pAfdjilk
Generated: 2025-11-30T15:50:44.652+00:00

---
## Quick Overview

Claude 3.5 Sonnet ultimately outperformed ChatGPT in generating a fully functional, interactive YouTube homepage clone using React and Tailwind CSS, successfully implementing features like tab filtering, notification counters, and responsive design elements, despite initial syntax errors that required iterative prompting to fix.

**Key Points:**
- Claude 3.5 Sonnet was tested against ChatGPT to clone a YouTube homepage interface using React and Tailwind CSS, with Claude producing a working result first (00:35).
- The initial code from ChatGPT contained syntax errors, including missing closing tags and issues with array indexing (01:42, 01:50).
- The user iteratively prompted Claude to fix bugs, such as adding tab filtering based on categories and implementing a notification counter that triggered a popover upon clicking the bell icon (02:26, 04:26, 10:47).
- Claude successfully implemented the requested features, including tab filtering and the notification popover, achieving a functional result that impressed the reviewer (07:39, 11:58).
- The final comparison showed that Claude's generated code was more immediately functional and easier to iterate upon compared to ChatGPT's initial attempts (13:33, 13:50).

![Screenshot at 00:35: Claude successfully generates the initial single-file React component for the YouTube-style homepage, although initial code errors are present, visible in the console.](https://ss.rapidrecap.app/screens/S19pAfdjilk/00-00-35.png)

**Context:** The video is a head-to-head comparison testing the capabilities of two large language models, Claude 3.5 Sonnet and ChatGPT, in a real-time coding challenge: recreating a complex UI mockup of the YouTube homepage using React and Tailwind CSS within a strict 10-minute time limit. The creator used a specialized web environment (Changelog) that allows for live code generation, previewing, and iterative debugging.

## Detailed Analysis

The video documents a live coding challenge where the creator prompts two AI models, Claude 3.5 Sonnet and ChatGPT, to build a clone of the YouTube homepage interface using React and Tailwind CSS, with a 10-minute time limit for each model. The creator started with ChatGPT (00:01), providing a screenshot and requesting a React component. ChatGPT quickly produced code but introduced several errors, including JSX parsing issues and an unexpected token error in the console (01:42). After iterative prompting, ChatGPT managed to fix some errors, but the creator was still unsatisfied with the final state (04:24). The creator then switched to Claude 3.5 Sonnet (06:52) and requested the same output. Claude generated code, which also initially had errors, but Claude was much quicker at resolving them iteratively (04:48). The creator then requested specific interactive features for Claude's output, such as adding tab filtering for video categories and a functional notification bell with a counter and popover (04:50, 10:47). Claude successfully implemented these complex features, producing a visually accurate and interactive result (07:34, 11:58). The creator concluded that Claude was superior in this context, noting that Claude's code was easier to iterate upon and required less manual intervention to fix complex issues compared to ChatGPT's output (13:33, 13:50). The video concluded with the timer running out, but Claude's version was deemed the superior result (13:56).

### Initial Prompt & ChatGPT Attempt

- Prompting ChatGPT to create the YouTube homepage clone
- Initial code generation with syntax errors (00:01)
- ChatGPT fixes initial errors but struggles with complexity (03:33)

### Claude 3.5 Sonnet Attempt

- Providing the same screenshot to Claude
- Claude generates functional code quickly, fixing initial syntax errors (03:36)

### Feature Iteration (Claude)

- Requesting tab filtering functionality for video categories (04:26)
- Requesting a functional notification bell with a counter and popover (10:47)

### Final Results & Verdict

- Claude successfully implements all features, including tab interactivity and notifications (11:58)
- The creator declares Claude the winner for generating a more robust and easier-to-iterate solution (13:44, 13:56)

![Screenshot at 00:00: The creator starts the video, introducing the challenge of recreating the YouTube homepage using AI coding assistants.](https://ss.rapidrecap.app/screens/S19pAfdjilk/00-00-00.png)
![Screenshot at 00:15: The creator switches to the ChatGPT interface to begin the coding challenge.](https://ss.rapidrecap.app/screens/S19pAfdjilk/00-00-15.png)
![Screenshot at 02:22: ChatGPT successfully generates the initial code structure for the YouTube homepage clone.](https://ss.rapidrecap.app/screens/S19pAfdjilk/00-02-22.png)
![Screenshot at 05:55: The final, published version of the YouTube clone generated by Claude \(after iterative fixes\) is displayed, showing functional tabs and content layout.](https://ss.rapidrecap.app/screens/S19pAfdjilk/00-05-55.png)
![Screenshot at 12:14: The notification popover successfully appears after clicking the bell icon on the Claude-generated interface, confirming the successful implementation of the requested feature.](https://ss.rapidrecap.app/screens/S19pAfdjilk/00-12-14.png)