Перейти к содержимому

I let an AI coding agent build my Angular app (I wrote zero code)

Elite Tech Club

0:00 / 0:00

I let an AI coding agent build my Angular app (I wrote zero code)

117 просмотров · 4 недели назад
Elite Tech Club
100 подписчиков
117 просмотров · 4 недели назад
I typed prompts. Claude Code wrote the code, ran the commands, and deployed the app. I didn't write a single line myself — and at one point, it made a decision I never asked for. In this video I build a full Angular habit tracker from scratch using Claude Code, an AI coding agent — not a chatbot. You'll see the real difference: it edits files directly, runs terminal commands, checks its own work, and sometimes surprises you. 🔗 LINKS ▶ Live app (Vercel): https://habit-tracker-hazel-chi.verce... ▶ Full source code (GitHub): https://github.com/Saeid1992/habit-tr... 🧩 THE EXACT PROMPTS I USED 1. Scaffolding: "Create a new Angular app called habit-tracker using standalone components and Angular signals for state. Use plain CSS, no UI library. Set up a HabitService that will hold habit data in memory for now." 2. Core feature: "In HabitService, add functions to add a habit, mark it complete for today, and track a streak count. Build a HabitListComponent that displays all habits with a checkbox for today and the current streak next to each one. Persist everything to localStorage." 3. Polish pass: "Style this with a clean, modern look — card-based layout, subtle shadows, a progress indicator for today's completion rate. Keep it in plain CSS." 4. Deployment: "Prepare this app for production deployment on Vercel — build config, environment settings, and a production build. Then run the deploy." 🔧 WHAT WE BUILD A habit tracker app (add habits, track streaks, persist data) Built with Angular 22 — standalone components + signals (now the framework default) Deployed live on Vercel ⏱️ TIMESTAMPS 00:00 Intro: The claim (and the receipts) 00:34 Quick recap for newcomers 01:07 Chatbot vs. agent — what you're actually watching 03:06 Today's build plan 03:43 Live build: Scaffolding the app 07:46 Live build: The core feature 13:52 Live Build: Polish pass 15:51 Deploying live 17:59 What this actually taught us 18.42 Wrap up 🛠️ TOOLS USED Claude Code (AI coding agent) Angular + TypeScript Vercel (deployment) 🧠 This is Episode 1 of a new playlist: AI in Programming — using AI agents in a real frontend workflow, not just asking a chatbot for snippets. 💬 Comment one word: what would YOU build with Claude Code in 15 minutes? I'm picking 3 comments to build in a future video. 👍 If this saved you from a boring "AI wrote my code" video, subscribe — the next episode is the opposite experiment: I give it the worst possible prompt on purpose. #ClaudeCode #Angular #AICoding #WebDevelopment #TypeScript #Angular22