10. Custom App - Walkthrough
Note: The video covers material not in the guide below — please watch in full.
Action Step
Complete this before moving on.
Watch the full video — this is a walkthrough, not a follow-along exercise. Yasin demos how the Academy Site is built from a repo, how Claude Code can add courses and modify the codebase live, and how changes get pushed to GitHub and auto-deployed through Netlify. The goal is to understand the architecture: code lives locally in a repo, gets compiled and previewed on localhost, then pushed to the cloud where Netlify picks it up and deploys it. In the next training, you'll build your own app from scratch.
Training Guide
This training is the setup for what Yasin calls the pinnacle of the entire AI course — building a custom app using Claude Code and deploying it live. This walkthrough is about understanding the architecture. The activity is where you actually build.
Talking to Claude Like a Thought Partner
Yasin starts by opening Claude Code and just... talking. No polished prompt, no template. He explains what he's thinking — he has a kickoff prep doc and Salesforce metadata for a client called BrightLoop, and he wants to explore whether Claude can help build an app from that data and deploy it through Netlify.
He asks Claude to think with him: Can you build an app inside a subfolder of a repo? Can you connect to Netlify via CLI or API? Would changes to the code auto-deploy? He's spitballing — and that's the point. This is how power users actually work with Claude Code day to day.
The Academy Site Is a Repo
Here's the reveal: the entire Academy Site — every course, every lesson, every animation, every copy button — is just a repo with code in it. Yasin didn't write any of that code. He prompted Claude Code using WisprFlow and it built the whole thing.
He opens the repo in VS Code and walks through the file structure. The courses, the sidebar, the lesson files — it's all right there. Every SaaS app you've ever used is fundamentally the same thing: a repo with a bunch of code.
Live Demo: Adding a Course
To show how this works, Yasin tells Claude Code to add a demo course to the Academy Site. One prompt: "Add an ENE App Demo Course alongside the other courses, populate it with dummy lessons." Claude reads the codebase, understands the structure, creates the course files, adds sidebar entries, and builds it out.
He catches a typo in his name (the joys of WisprFlow), corrects it, and Claude fixes every instance across the codebase. Then he asks Claude to make the sidebar sections non-collapsible — and it figures out the code change on its own, even identifying that the issue was in the auto-generated folder structure, not the explicit config.
Localhost: Previewing Before You Push
Before pushing anything live, Yasin has Claude render the site locally using localhost. This is what developers have always done — compile the code on your machine first to make sure it works before pushing to the cloud.
Claude opens the browser, loads localhost, and the demo course appears. It created a thumbnail, populated lessons with dummy content, and the whole thing is functional. All from a single prompt.
Push to Netlify: Going Live
Once it looks right locally, Yasin tells Claude to commit and push. Behind the scenes, Netlify is connected to the GitHub repo. Whenever a new commit lands on the main branch, Netlify automatically picks it up and redeploys the site.
He switches to Netlify's dashboard and shows the deploy log — the commit appears, the build triggers, and within moments the demo course is live on academy.leanscale.team. Then he tells Claude to revert the changes, push again, and the course disappears from the live site. The full cycle — build, deploy, revert — in minutes.
What's Coming in the Activity
Claude already scoped out what the BrightLoop app could be: an Engagement Command Center with a health assessment dashboard, pipeline visibility, a stakeholder map, a risk tracker, and a quick wins scorecard. It would be a React app styled with Tailwind CSS — fully static, no backend needed, with data baked in from the kickoff doc and Salesforce metadata.
In the next training, Yasin walks you through setting all of this up from scratch — your own GitHub repo, your own Netlify account (free tier), and your own deployed app. You're about to become a SaaS builder.
Comment in Slack
Post your answer in your onboarding channel.
What was your biggest takeaway(s) from this training?