Day 2 of Claude Code: Building & Deploying Your First Website

Описание: From empty folder to live website -- Claude Code handles the entire workflow. Day 2 of the 30 Days of Claude Code workshop series.

We walk through the full modern web dev stack: ShadCN components, Next.js framework, and Vercel deployment. Claude Code scaffolds the project, installs component registries, pushes to GitHub, and deploys to production -- all through natural language prompts in the terminal.

-- TIMESTAMPS --
00:01:15 - Welcome and recap of Day 1
00:04:39 - Session overview: building and deploying a website
00:08:53 - Setup checklist walkthrough
00:10:01 - Claude Desktop connectors (File System MCP, Windows MCP)
00:18:59 - Creating the project folder in VS Code
00:19:59 - Vibe coding mindset and frameworks intro
00:20:47 - ShadCN components explained
00:22:15 - Next.js + Vercel ecosystem breakdown
00:32:06 - MCPs and the ShadCN registry for Claude Code
00:36:22 - VS Code vs Windsurf vs Cursor discussion
00:47:18 - Component registries deep dive (Aura, AI Elements, AI Gateway)
00:54:00 - First look at the generated website
01:08:24 - Chrome MCP for visual debugging
01:11:44 - Creating an agent team for UI fixes
01:12:54 - Supabase component library walkthrough
01:27:52 - Server restart and build commands
01:32:58 - Pushing to GitHub with Claude Code
01:48:58 - Vercel deployment with CLI
01:52:23 - Deployment workflow diagram discussion
02:17:55 - Environment setup video discussion
02:30:36 - Wrap-up and preview (Gamma, self-hosting)

-- TOOLS & RESOURCES --
ShadCN: https://ui.shadcn.com
Next.js: https://nextjs.org
Vercel: https://vercel.com
Claude Code CLI: https://docs.anthropic.com/en/docs/cl...
GitHub: https://github.com

-- ABOUT THIS SERIES --
30 Days of Claude Code is a daily live workshop where we build real projects using Claude Code -- Anthropic's AI-powered CLI for developers. No fluff, just live builds.

#ClaudeCode #NextJS #ShadCN #Vercel #WebDev #30DayChallenge