mirror of
https://github.com/tiennm99/ai-coding-workflow-labs.git
synced 2026-09-18 02:18:58 +00:00
tiennm99
18f054e7ff
Replace placeholder README with comprehensive course guide covering Module 1 & 2 structure, the Basecamp Coffee scenario, folder layout, and reference links. Also adds all course material directories and supporting files.
132 lines
4.8 KiB
Markdown
132 lines
4.8 KiB
Markdown
# 2.1 Setup
|
|
|
|
Welcome to Module 2. Now we BUILD.
|
|
|
|
In Module 1, you learned to work WITH files - analyzing, synthesizing, extracting insights. In Module 2, you're going to CREATE something from scratch.
|
|
|
|
STOP: Excited?
|
|
|
|
USER: Yes
|
|
|
|
---
|
|
|
|
Let me give you the backstory. In Module 1, you played the role of a manager at Basecamp Coffee. You analyzed their struggling loyalty program and discovered what it really needed: personality.
|
|
|
|
The solution? A "What's Your Coffee Personality?" quiz.
|
|
|
|
Here's what it actually does: customers answer some fun questions, and at the end they get a personality AND a drink recommendation. Like "You're a Bold Adventurer - try our Double Espresso!"
|
|
|
|
It's a drink recommendation engine dressed up as a personality quiz. Fun AND useful.
|
|
|
|
That's what we're building in this module.
|
|
|
|
This is a guided experience - I'll walk you through every step so you succeed. But the skills you're learning transfer to building whatever YOU want afterward. Landing pages, tools, apps, anything.
|
|
|
|
By the end, you'll have a real website with a real link you can send to your friends. Not a fake demo. A real, working thing on the internet. Almost no other vibecoding courses teach you how to make it live.
|
|
|
|
STOP: Sound good?
|
|
|
|
USER: Yes
|
|
|
|
---
|
|
|
|
Here's the mindset shift for this module: You're the product manager, I'm the engineer.
|
|
|
|
You describe what you want. I write the code. You don't need to understand the code. You just need to know what you want.
|
|
|
|
Your job is to be clear about requirements, agree on the plan, review what I build, and tell me what to change.
|
|
|
|
STOP: This is how non-technical people work with developers. You're about to learn that skill. Make sense?
|
|
|
|
USER: Yes
|
|
|
|
---
|
|
|
|
Here's what we'll do across these lessons:
|
|
|
|
- First, we figure out exactly what your quiz should be - the **requirements**
|
|
- Then I **build** it while you watch
|
|
- Then you **iterate** - tell me what to change until you love it
|
|
- Then we **save** it to GitHub (like Google Drive for code)
|
|
- Finally, we put it on the internet so anyone can visit it - developers call this **deploying**
|
|
|
|
Requirements → Build → Iterate → Save → Deploy. That's the loop.
|
|
|
|
STOP: Ready to learn it?
|
|
|
|
USER: Yes
|
|
|
|
---
|
|
|
|
Let's talk about the tech. The code I write will be in JavaScript - the most popular programming language for websites. I'll also use something called Next.js, which is a popular framework - basically a pre-built structure that makes JavaScript websites easier to build and deploy.
|
|
|
|
You don't need to understand any of this. I handle all the code. I'm just mentioning it so you're familiar with the terms.
|
|
|
|
This module has 5 lessons and takes about 1.5-2 hours total. You don't need to do it all in one sitting.
|
|
|
|
STOP: Ready to get started?
|
|
|
|
USER: Yes
|
|
|
|
---
|
|
|
|
Let's create a folder for your quiz project.
|
|
|
|
STOP: Ask me to create a new folder called "quiz-project"
|
|
|
|
USER: Create a new folder called quiz-project
|
|
|
|
ACTION: Create a new folder called `quiz-project` in the current directory
|
|
|
|
Done! That's where all the code and files for your quiz will live.
|
|
|
|
STOP: Can you see the new folder in your file explorer on the left?
|
|
|
|
USER: Yes
|
|
|
|
---
|
|
|
|
**What you just learned:** The mindset and setup for building something from scratch.
|
|
|
|
**Where else this applies:**
|
|
- Any time you want to build a quick tool, prototype, or website
|
|
- When you have an idea and want to see if it's possible
|
|
- Side projects, internal tools, landing pages, simple apps
|
|
|
|
## Quick Plugs
|
|
|
|
This course was created by Carl Vellotti ([X](https://x.com/carlvellotti) / [LinkedIn](https://www.linkedin.com/in/carlvellotti/)) - if you have thoughts or feedback on the course, he's always happy to hear from users!
|
|
|
|
And if you haven't already - join the official newsletter and community at ccforeveryone.com. It's THE place for non-technical Claude Code users: new modules, in-depth guides, and a community.
|
|
|
|
STOP: Want me to open that site for you to subscribe?
|
|
|
|
USER: Replies
|
|
|
|
ACTION: If user says yes, open https://ccforeveryone.com in browser
|
|
|
|
---
|
|
|
|
**Next up:** In 2.2, we're going to figure out exactly what YOUR quiz should be. I'll interview you about what you want, and we'll create a requirements document together. This is where you make it yours.
|
|
|
|
STOP: Ready for 2.2? Say "let's go" or type /start-2-2
|
|
|
|
USER: Let's go
|
|
|
|
---
|
|
|
|
## Important Notes for Claude
|
|
|
|
- If the user hasn't done Module 1, that's fine - the backstory recap covers it
|
|
- The quiz-project folder should be created in whatever directory the user is currently in
|
|
- Don't overthink the folder creation - just make it simple
|
|
- If the user asks questions about the technology, keep explanations simple and reassuring
|
|
- **For CC4PMs version:** Change ccforeveryone.com to ccforpms.com
|
|
|
|
## Success Criteria
|
|
|
|
- User understands the PM/engineer mindset
|
|
- User understands the Plan → Build → Iterate → Save → Deploy loop
|
|
- `quiz-project/` folder exists
|
|
- User is ready for 2.2
|