The tools we will use
You will use three free tools in this course. Each one handles a different step in putting your app on the internet.
The Complete Journey
Google AI Studio
Google AI Studio is your primary workspace for creating applications with AI. Think of it as a powerful, specialized chat interface. Instead of just answering questions like ChatGPT, it is designed to write, run, and preview code in real-time.
Why we use it
When you describe an app idea to AI Studio, it doesn't just give you raw code. It builds the app and shows you a live preview right in your browser.
You can test it, see how it looks, and then ask the AI to make changes — like "make the buttons bigger" or "add a score counter."
The Workflow
- You write a prompt describing your app.
- AI Studio generates the code.
- You preview the live app in the right-hand panel.
- You refine it by asking for changes.
GitHub
GitHub is where your app's code lives permanently. If Google AI Studio is your workshop where you build and test the app, GitHub is the storage unit where you keep the final blueprints.
The "Repo"
In GitHub, every project is stored in a "repository" (or "repo" for short). Think of a repo as a dedicated folder for your app.
When you are happy with your app in Google AI Studio, you will use a built-in feature to "Publish to GitHub." This automatically creates a repo and saves all your code there.
Why do we need it?
GitHub acts as the bridge between your workspace (AI Studio) and the public internet. Our hosting provider (Vercel) will look at your GitHub repo to know what to put on the web.
Vercel
Vercel is the engine that puts your app on the internet for anyone to use. Right now, your app only exists in your private AI Studio workspace, or as code files stored in your GitHub repository. Vercel takes those files and turns them into a live, public website with a real URL.
The Magic Connection
Vercel connects directly to your GitHub account. When you tell Vercel to deploy a specific repository, it grabs the code and publishes it.
The best part: Every time you update your code in GitHub, Vercel automatically updates your live website. You don't have to do anything manually.