feat(docs): update stage-2 assignments and add vibe stories section
- Rename assignments to major projects with updated descriptions - Add new vibe stories section with 4 stories - Update stage-2 fullstack app assignment to AI copywriting website - Add new files for vibe stories and update sitemap - Update config to include vibe stories in navigation
This commit is contained in:
sanbuphy
@@ -2244,9 +2244,38 @@ Sitemap: ${siteUrl}/sitemap.xml
|
||||
text: 'Appendix',
|
||||
link: '/en/appendix/index',
|
||||
activeMatch: '/en/appendix/'
|
||||
},
|
||||
{
|
||||
text: 'Vibe Stories',
|
||||
link: '/en/vibe-stories/story-1',
|
||||
activeMatch: '/en/vibe-stories/'
|
||||
}
|
||||
],
|
||||
sidebar: {
|
||||
'/en/vibe-stories/': [
|
||||
{
|
||||
text: 'Vibe Stories',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: 'He Left a Five-Figure Monthly Salary to Help Rural School Kids "Use AI to Block Flies"',
|
||||
link: '/en/vibe-stories/story-1'
|
||||
},
|
||||
{
|
||||
text: 'During Finals Week, I Secretly Built a "Campus Xianyu" with AI',
|
||||
link: '/en/vibe-stories/story-2'
|
||||
},
|
||||
{
|
||||
text: 'I Built Each Student a Tireless "Straight-A Study Buddy"',
|
||||
link: '/en/vibe-stories/story-3'
|
||||
},
|
||||
{
|
||||
text: 'At 48, a Truck Driver Pulled Several All-Nighters and Used AI to Build an Overseas Tool Site',
|
||||
link: '/en/vibe-stories/story-4'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/en/stage-0/': productManagerSidebarEn,
|
||||
'/en/stage-1/': productManagerSidebarEn,
|
||||
'/en/stage-2/': stage2SidebarEn,
|
||||
|
||||
@@ -1,207 +1,419 @@
|
||||
# Build Your First Modern App: Full-Stack Application
|
||||
# Major Project 1: Your First SaaS Full-Stack App - AI Copywriting Website
|
||||
|
||||
The hardest part of a first full-stack project usually is not the code itself. It is **not knowing what to build**.
|
||||
|
||||
The topic is too broad, the features are too scattered, and halfway through you realize the project is getting out of control.
|
||||
|
||||
So this time, let's change the approach. Instead of giving an open-ended prompt, we will give you a concrete direction: build one product that is complete, useful, and still manageable.
|
||||
|
||||
::: tip Goal
|
||||
Turn a prototype idea into a small but complete web application with a real frontend, backend logic, persistent data, and a public deployment link.
|
||||
Build an **AI marketing copy workspace**. After logging in, users fill in product information, generate marketing copy with one click, and automatically save the history. Need more generations? Upgrade the plan. Admins can view users, generation records, and payment status from the backend dashboard.
|
||||
:::
|
||||
|
||||
At this point, the goal is no longer just “make a page look right.” The goal is to make the core product loop actually work: a user opens the app, does something meaningful, triggers backend logic, stores or reads data, and gets a result that still exists the next time they come back.
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Define', description: 'Lock down the pages and product scope first' },
|
||||
{ title: 'Frontend', description: 'Build the homepage, auth pages, and dashboard' },
|
||||
{ title: 'Backend', description: 'Connect the database, generation flow, and billing' },
|
||||
{ title: 'Admin & Delivery', description: 'Finish the admin panel, deployment, and demo assets' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
You do not need to build a huge platform. A small product with a clear scope and a fully working flow is a much better submission than a large project full of unfinished features.
|
||||
## Why This Project?
|
||||
|
||||
This assignment is meant to connect the Stage 2 path:
|
||||
Because it hits the sweet spot: **it contains all the essential parts of a modern web product without becoming too complex to finish**.
|
||||
|
||||
- [UI Design](../../frontend/2.2-ui-design/)
|
||||
- [From Design Prototype to Project Code](../../frontend/2.6-design-to-code/)
|
||||
- [Modern Component Libraries](../../frontend/2.7-modern-component-library/)
|
||||
- [From Database to Supabase](../../backend/2.2-database-supabase/)
|
||||
- [Using LLMs to Write API Code](../../backend/2.3-ai-interface-code/)
|
||||
- [Git and GitHub Workflow](../../backend/2.4-git-workflow/)
|
||||
- [How to Deploy Web Applications](../../backend/2.5-zeabur-deployment/)
|
||||
- **The public-facing app has a real use case**: users come here to solve an actual problem
|
||||
- **The user system includes login and permissions**: guests and registered users are different
|
||||
- **The core feature is generation**: the app calls AI to produce dynamic output rather than showing static pages
|
||||
- **The data is persistent**: generated results are saved and can be reviewed later
|
||||
- **It includes billing**: it feels like a real SaaS product instead of a toy project
|
||||
- **It includes an admin panel**: you get to experience the product from an operator's perspective
|
||||
|
||||
## 1. Assignment Goal
|
||||
The difficulty is moderate. It is not so simple that it becomes just a single form, and not so complex that you spend a week without a working result.
|
||||
|
||||
Build a **working, demoable, publicly accessible** full-stack web app.
|
||||
## 1. Define the Project First
|
||||
|
||||
Your project should have:
|
||||
Project name: **LaunchKit**
|
||||
|
||||
1. **A clear user and use case**
|
||||
- You should be able to explain who the product is for and what problem it solves.
|
||||
2. **A complete product loop**
|
||||
- The key action must go beyond frontend mock data and trigger real backend or database behavior.
|
||||
3. **A real engineering handoff**
|
||||
- The code should live in a repo, secrets should be handled correctly, and someone else should be able to understand how the project works.
|
||||
Positioning: an AI marketing copy workspace
|
||||
|
||||
Good project directions include:
|
||||
Target users: indie developers, small business owners, content operators, and anyone who wants to quickly create landing-page-ready copy.
|
||||
|
||||
- upgrading a Stage 1 prototype into a real application
|
||||
- extending [Hogwarts Portraits](../../frontend/2.5-hogwarts-portraits/) into a more complete product
|
||||
- building a small AI utility such as a writing tool, summarizer, or research workspace
|
||||
- building a lightweight vertical tool such as a CRM, scheduling tool, or learning assistant
|
||||
They are not here to casually chat. They are here because they want **usable marketing copy fast**.
|
||||
|
||||
## 2. Minimum Requirements
|
||||
### Core Feature
|
||||
|
||||
| Area | Minimum Requirement | Notes |
|
||||
| --- | --- | --- |
|
||||
| Product scope | One clear core workflow | Example: create and save content, upload and process input, create a character and chat |
|
||||
| Frontend | At least 2 pages, or 1 complex main page plus 1 supporting page | Desktop-ready is required |
|
||||
| States | Handle loading, empty, and error states | Do not build happy-path only |
|
||||
| Data | At least 1 core table, ideally 2 related entities | Example: `users` + `projects`, `characters` + `messages` |
|
||||
| Backend | At least 3 real API endpoints or equivalent server-side capabilities | Express, Next.js route handlers, or edge functions are all acceptable |
|
||||
| Persistence | Core user actions must be saved and retrievable | Not just mock data |
|
||||
| Delivery | A GitHub repo and a public online link | Vercel or Zeabur are recommended |
|
||||
| Documentation | A readable `README.md` | Include purpose, stack, setup, and env vars |
|
||||
Keep the core simple. There is really just one central job:
|
||||
|
||||
## 3. Recommended Stack
|
||||
**User input**: product name, one-sentence description, target audience, three selling points, and publishing channel
|
||||
|
||||
You can use any reasonable stack, but if you want the safest path, this combination works well:
|
||||
**System output**: headline, subheadline, CTA copy, three short-copy variants, and one long-copy version
|
||||
|
||||
| Layer | Recommended Option |
|
||||
| --- | --- |
|
||||
| Frontend | React / Next.js or Vue |
|
||||
| Component library | shadcn/ui, Ant Design, HeroUI, or Element Plus |
|
||||
| Data and auth | Supabase |
|
||||
| Backend | Next.js route handlers, Express, or Supabase Edge Functions |
|
||||
| Deployment | Vercel or Zeabur |
|
||||
The generated result is automatically saved to the user's account so it can be reviewed after the next login.
|
||||
|
||||
For a first full-stack project, “frontend + Supabase + a small amount of server logic” is usually the fastest way to a successful submission.
|
||||
### Page Plan
|
||||
|
||||
## 4. Suggested Workflow
|
||||
Build these 6 pages:
|
||||
|
||||
### 4.1 Write the core task in one sentence
|
||||
| Page | Route | Description |
|
||||
|------|------|------|
|
||||
| Home | `/` | Clearly communicate the product value and include sign-up / login entry points |
|
||||
| Login | `/login` | A simple login form |
|
||||
| Register | `/register` | A simple sign-up form |
|
||||
| Dashboard | `/dashboard` | Fill in product info, generate copy, and review results |
|
||||
| Billing | `/billing` | Show Free and Pro plans and link to Stripe checkout |
|
||||
| Admin | `/admin` | Let admins view users, generation records, and payment status |
|
||||
|
||||
Before coding, answer:
|
||||
### Data Model
|
||||
|
||||
> What is the single most important thing a user should be able to do in this app?
|
||||
Three core tables are enough:
|
||||
|
||||
Examples:
|
||||
```sql
|
||||
profiles (
|
||||
id uuid primary key,
|
||||
email text,
|
||||
role text, -- user / admin
|
||||
plan text, -- free / pro
|
||||
created_at timestamptz
|
||||
)
|
||||
|
||||
- upload text, generate a summary, and save it to history
|
||||
- create a character profile and continue chatting with it
|
||||
- add a customer lead and review its status later
|
||||
generations (
|
||||
id uuid primary key,
|
||||
user_id uuid,
|
||||
product_name text,
|
||||
target_channel text,
|
||||
input_payload jsonb,
|
||||
result_payload jsonb,
|
||||
created_at timestamptz
|
||||
)
|
||||
|
||||
If that sentence is still vague, the scope is probably too wide.
|
||||
|
||||
### 4.2 Plan the structure first
|
||||
|
||||
Sketch:
|
||||
|
||||
- what pages you need
|
||||
- the most important module on each page
|
||||
- which actions read data
|
||||
- which actions write data
|
||||
|
||||
This will make AI-assisted implementation much more stable.
|
||||
|
||||
### 4.3 Start with mock data
|
||||
|
||||
A practical order is:
|
||||
|
||||
1. build the frontend structure with mock data
|
||||
2. connect real backend logic
|
||||
3. replace mock data with real persistence
|
||||
|
||||
This keeps the debugging surface much smaller.
|
||||
|
||||
### 4.4 Starter prompt for AI IDEs
|
||||
|
||||
```text
|
||||
Help me build a deployable full-stack web app for [your use case].
|
||||
|
||||
Do not generate everything at once. First break the project into:
|
||||
1. page structure and routes
|
||||
2. data model design
|
||||
3. API or server-side capability design
|
||||
4. frontend component breakdown
|
||||
5. environment variable and deployment setup
|
||||
|
||||
Requirements:
|
||||
- Use [React/Next.js/Vue + your component library + Supabase/Express]
|
||||
- Prioritize a working MVP over over-engineering
|
||||
- Tell me which files to create
|
||||
- Include loading, empty, error, and validation states
|
||||
subscriptions (
|
||||
id uuid primary key,
|
||||
user_id uuid,
|
||||
stripe_customer_id text,
|
||||
stripe_subscription_id text,
|
||||
plan text,
|
||||
status text,
|
||||
created_at timestamptz
|
||||
)
|
||||
```
|
||||
|
||||
## 5. Deliverables
|
||||
At this point, the structure of the whole product is already clear.
|
||||
|
||||
Please submit:
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Define', description: 'Lock down the pages and product scope first' },
|
||||
{ title: 'Frontend', description: 'Build the homepage, auth pages, and dashboard' },
|
||||
{ title: 'Backend', description: 'Connect the database, generation flow, and billing' },
|
||||
{ title: 'Admin & Delivery', description: 'Finish the admin panel, deployment, and demo assets' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
1. **A GitHub repository link**
|
||||
2. **A public online link**
|
||||
3. **A `README.md`**
|
||||
- project name and one-line description
|
||||
- target users and use case
|
||||
- tech stack
|
||||
- main features
|
||||
- local setup steps
|
||||
- environment variable notes
|
||||
4. **A short demo asset**
|
||||
- ideally a 60 to 90 second video, or a few key screenshots/GIFs
|
||||
## 2. Build the Frontend First
|
||||
|
||||
Useful optional additions:
|
||||
At this stage, do not touch the database yet and do not rush into payments. **Build the frontend skeleton first.**
|
||||
|
||||
- database schema or ER diagram
|
||||
- API notes or endpoint list
|
||||
- design/architecture explanation
|
||||
- a short iteration log
|
||||
### Suggested Tech Stack
|
||||
|
||||
## 6. Evaluation Checklist
|
||||
- **Next.js App Router** for a modern React foundation
|
||||
- **TypeScript** for type safety
|
||||
- **Tailwind CSS** for utility-first styling
|
||||
- **shadcn/ui** for polished UI components
|
||||
- **Supabase** for backend services
|
||||
- **Stripe** for payment handling
|
||||
|
||||
Your project is in good shape if:
|
||||
This combination works especially well with AI coding tools and fits the look and feel of a modern SaaS product.
|
||||
|
||||
- a user can complete a real end-to-end flow
|
||||
- key actions create visible changes in the system
|
||||
- data still exists after refresh
|
||||
- backend failures do not crash the UI
|
||||
- you can explain the product clearly in about one minute
|
||||
### Step 1: Scaffold the Project
|
||||
|
||||
## 7. Bonus Ideas
|
||||
Paste this prompt into Trae, Cursor, or Claude Code:
|
||||
|
||||
You can go further with:
|
||||
```text
|
||||
Help me create a modern SaaS website called LaunchKit.
|
||||
|
||||
- authentication and multi-user support
|
||||
- real AI capabilities with streaming or retries
|
||||
- better UI quality with a modern component library
|
||||
- monitoring, logging, or analytics
|
||||
- basic tests
|
||||
- payment or subscription flows
|
||||
- mobile adaptation
|
||||
Tech stack:
|
||||
- Next.js App Router
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- shadcn/ui
|
||||
|
||||
## 8. Common Mistakes
|
||||
Pages:
|
||||
1. Home page /
|
||||
2. Login page /login
|
||||
3. Register page /register
|
||||
4. User dashboard /dashboard
|
||||
5. Billing page /billing
|
||||
6. Admin panel /admin
|
||||
|
||||
### 8.1 The scope is too large
|
||||
For now, only build the frontend structure. Do not connect the database yet.
|
||||
|
||||
If your first version requires auth, admin tools, payments, workflow builders, knowledge bases, and multi-user collaboration all at once, the project is probably too big.
|
||||
Requirements:
|
||||
- The homepage should feel like a modern AI SaaS landing page
|
||||
- Login and register pages should stay simple
|
||||
- The dashboard should have a form on the left and results on the right
|
||||
- The billing page should show free and pro plans
|
||||
- The admin page should first include a basic admin layout: sidebar, top bar, and table area
|
||||
- Use shadcn/ui components
|
||||
- The pages should feel like a real product, not a classroom demo
|
||||
```
|
||||
|
||||
### 8.2 The frontend looks good, but nothing is real
|
||||
### Step 2: Refine the Dashboard
|
||||
|
||||
That may still be a useful frontend exercise, but not a strong full-stack assignment. This project should include real persistence and server-side behavior.
|
||||
After the first version is ready, keep going:
|
||||
|
||||
### 8.3 Secrets are committed into the repo
|
||||
```text
|
||||
Please continue improving the /dashboard page.
|
||||
|
||||
API keys and database secrets belong in environment variables, not in frontend source code.
|
||||
This is an AI marketing copy workspace.
|
||||
|
||||
### 8.4 Only testing the happy path
|
||||
Left-side form fields:
|
||||
- product name
|
||||
- one-sentence description
|
||||
- target audience
|
||||
- 3 selling points
|
||||
- publishing channel (website, WeChat Moments, Xiaohongshu, Douyin, email)
|
||||
|
||||
Manually test:
|
||||
Reserve the right-side result area for:
|
||||
- headline
|
||||
- subheadline
|
||||
- CTA
|
||||
- 3 short-copy versions
|
||||
- 1 long-copy version
|
||||
|
||||
- empty input
|
||||
- duplicate actions
|
||||
- network failure
|
||||
- missing data
|
||||
- permission errors
|
||||
Use mock data first to make the interaction work.
|
||||
|
||||
That is where the most useful product fixes usually appear.
|
||||
Requirements:
|
||||
- show a loading state after clicking "Generate Copy"
|
||||
- design an empty state for the result area
|
||||
- use a responsive layout that works on both wide and narrow screens
|
||||
```
|
||||
|
||||
## 9. Final Advice
|
||||
### Need Help?
|
||||
|
||||
Treat this assignment as your first real product delivery exercise, not as a feature-count competition.
|
||||
Review these chapters:
|
||||
|
||||
What matters most is not how many tools you used, but whether you can:
|
||||
- [Build Your First Modern App - UI Design](../../frontend/2.2-ui-design/)
|
||||
- [UI Guidelines and Multi-Product Design](../../frontend/2.3-multi-product-ui/)
|
||||
- [Make Interfaces Beautiful with LLMs and Skills](../../frontend/2.4-llm-skills-beautiful/)
|
||||
- [From Design Prototype to Project Code](../../frontend/2.6-design-to-code/)
|
||||
- [Upgrade Your UI with Modern Component Libraries](../../frontend/2.7-modern-component-library/)
|
||||
|
||||
- define a clear product goal
|
||||
- use AI tools to move from idea to implementation
|
||||
- deliver something another person can understand, try, and reproduce
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Define', description: 'Lock down the pages and product scope first' },
|
||||
{ title: 'Frontend', description: 'Build the homepage, auth pages, and dashboard' },
|
||||
{ title: 'Backend', description: 'Connect the database, generation flow, and billing' },
|
||||
{ title: 'Admin & Delivery', description: 'Finish the admin panel, deployment, and demo assets' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Connect the Backend
|
||||
|
||||
This is where the project truly becomes "full-stack."
|
||||
|
||||
### Step 3: Add Supabase Authentication
|
||||
|
||||
```text
|
||||
Please treat me like a complete beginner and walk me through Supabase authentication step by step.
|
||||
|
||||
I need help with:
|
||||
1. connecting Supabase to the project
|
||||
2. implementing sign up, sign in, and sign out
|
||||
3. redirecting to /dashboard after a successful login
|
||||
4. automatically redirecting unauthenticated users from /dashboard, /billing, and /admin to /login
|
||||
5. creating the profiles table
|
||||
6. automatically creating a profiles record after user registration
|
||||
7. including email, role, and plan fields in the profiles table
|
||||
|
||||
Implementation requirements:
|
||||
- explain which files are being changed at each step
|
||||
- do not hardcode secrets
|
||||
- clearly mark anything that must be configured manually in the Supabase dashboard
|
||||
- explain how to verify registration and login after implementation
|
||||
```
|
||||
|
||||
### Step 4: Add Generation API and Database Writes
|
||||
|
||||
```text
|
||||
Please treat me like a complete beginner and help me build the core feature of the website: generating and saving marketing copy.
|
||||
|
||||
Target result:
|
||||
1. the user fills in the form on /dashboard and clicks "Generate Copy"
|
||||
2. the backend receives product name, description, target audience, selling points, and publishing channel
|
||||
3. the backend calls a model to generate results
|
||||
4. the page displays the generated result
|
||||
5. both input and output are saved to the database
|
||||
6. the user can view generation history the next time they visit
|
||||
|
||||
Please help me:
|
||||
- create the /api/generate endpoint
|
||||
- create the generations table
|
||||
- design the input and output fields
|
||||
- load the current user's history on the dashboard page
|
||||
|
||||
User experience:
|
||||
- loading state on the button
|
||||
- error message if generation fails
|
||||
- empty state when there is no history
|
||||
|
||||
After completion, please explain:
|
||||
- where the frontend page files are
|
||||
- where the backend API files are
|
||||
- where the database write logic lives
|
||||
- how to test the full generation flow
|
||||
```
|
||||
|
||||
### Step 5: Add Stripe Billing
|
||||
|
||||
```text
|
||||
Please treat me like a complete beginner and help me add the simplest usable Stripe billing flow to LaunchKit.
|
||||
|
||||
I do not need a complicated system yet. I just want the main payment flow working first.
|
||||
|
||||
Please help me:
|
||||
1. show free and pro plans on /billing
|
||||
2. redirect users to Stripe Checkout after clicking upgrade
|
||||
3. return to the website after successful payment
|
||||
4. save the payment result into the subscriptions table
|
||||
5. sync the profile.plan field
|
||||
6. limit free users to 3 generations per day while pro users have no limit
|
||||
|
||||
Implementation principles:
|
||||
- get the main flow working first, without worrying about every edge case yet
|
||||
- clearly explain anything that must be configured in the Stripe dashboard
|
||||
- explain how to test the full payment flow after implementation
|
||||
```
|
||||
|
||||
### Step 6: Build the Admin Dashboard
|
||||
|
||||
```text
|
||||
Please treat me like a complete beginner and help me build a simple but usable admin dashboard.
|
||||
|
||||
Only admins should be allowed to access it.
|
||||
|
||||
Please help me:
|
||||
1. allow only users with role = admin to access /admin
|
||||
2. include 3 tabs in the admin dashboard:
|
||||
- users
|
||||
- generation records
|
||||
- subscription status
|
||||
3. show email, plan, and creation time in the user list
|
||||
4. show user, product name, channel, and creation time in generation records
|
||||
5. show user, plan, and payment status in subscription status
|
||||
|
||||
Requirements:
|
||||
- keep the UI simple and clear
|
||||
- use the existing component library's table, tabs, and badge components
|
||||
- explain how to make an account admin after implementation
|
||||
```
|
||||
|
||||
### Need Help?
|
||||
|
||||
Review these chapters:
|
||||
|
||||
- [From Database to Supabase](../../backend/2.2-database-supabase/)
|
||||
- [Backend API Design and Development](../../backend/2.3-ai-interface-code/)
|
||||
- [Integrate Stripe and Other Billing Systems](../../backend/2.7-stripe-payment/)
|
||||
|
||||
<div style="margin: 32px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Define', description: 'Lock down the pages and product scope first' },
|
||||
{ title: 'Frontend', description: 'Build the homepage, auth pages, and dashboard' },
|
||||
{ title: 'Backend', description: 'Connect the database, generation flow, and billing' },
|
||||
{ title: 'Admin & Delivery', description: 'Finish the admin panel, deployment, and demo assets' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 4. Admin, Delivery, and Launch
|
||||
|
||||
The product is mostly shaped now. The final stage is about three things:
|
||||
|
||||
### 4.1 Deploy It
|
||||
|
||||
Push the code to GitHub and deploy it publicly.
|
||||
|
||||
References:
|
||||
|
||||
- [Git and GitHub Workflow](../../backend/2.4-git-workflow/)
|
||||
- [Ship Your Product Prototype](../../backend/2.5-zeabur-deployment/)
|
||||
|
||||
### Step 7: Pre-Deployment Check
|
||||
|
||||
```text
|
||||
Please treat me like a complete beginner and help me check whether this project is ready to deploy.
|
||||
|
||||
Focus on:
|
||||
- whether environment variables are complete
|
||||
- whether authentication callback URLs are correct
|
||||
- whether Stripe callback URLs are correct
|
||||
- whether any pages are missing loading states, empty states, or error messages
|
||||
- whether the README includes setup and deployment instructions
|
||||
|
||||
Please:
|
||||
1. list the items that still need fixing, ordered by priority
|
||||
2. mark which ones must be fixed first
|
||||
3. explain the deployment steps after the fixes
|
||||
```
|
||||
|
||||
### 4.2 README
|
||||
|
||||
At minimum, include:
|
||||
|
||||
- project overview
|
||||
- explanation of core pages
|
||||
- tech stack
|
||||
- local startup steps
|
||||
- environment variable list
|
||||
|
||||
### 4.3 Demo Materials
|
||||
|
||||
Prepare at least:
|
||||
|
||||
- a homepage screenshot
|
||||
- a dashboard generation screenshot
|
||||
- a billing page screenshot
|
||||
- an admin dashboard screenshot
|
||||
- a demo video of around 60 seconds
|
||||
|
||||
## 5. Final Outcome
|
||||
|
||||
If you follow this guide, what you get is not just a "practice page." It is a **small but complete SaaS product**:
|
||||
|
||||
- a frontend built with a modern component library
|
||||
- Supabase database and authentication
|
||||
- real AI generation
|
||||
- Stripe billing
|
||||
- an admin dashboard
|
||||
- public deployment
|
||||
|
||||
That is absolutely strong enough to count as your **first real full-stack portfolio project**.
|
||||
|
||||
## 6. Final Check Before Submission
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">One Last Check Before You Submit</div>
|
||||
</template>
|
||||
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> Home, Login, Dashboard, Billing, and Admin pages are all finished</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Users can register, log in, and log out</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Generation results are actually written into the database</label></li>
|
||||
<li><label><input type="checkbox" disabled /> The main payment flow works end to end</label></li>
|
||||
<li><label><input type="checkbox" disabled /> Admins can view users, generation records, and payment status</label></li>
|
||||
<li><label><input type="checkbox" disabled /> The project has been deployed publicly</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
::: tip Next
|
||||
After this assignment, continue with [Assignment 2: Modern Frontend Component Library + Trae](../2.2-modern-frontend-trae/) to push the interface quality even further.
|
||||
After finishing this project, continue with [Major Project 2: Online Exam and Management System](../2.2-modern-frontend-trae/) for the next full-stack challenge.
|
||||
:::
|
||||
|
||||
@@ -1,282 +1,7 @@
|
||||
# Assignment 2: Modern Frontend Component Library + Trae Practice
|
||||
# Major Project 2: Online Exam and Management System
|
||||
|
||||
::: tip Goal
|
||||
Use Trae or another AI IDE together with a modern component library to build a frontend that feels like a real product rather than a classroom demo.
|
||||
:::
|
||||
Generate questions automatically, let users take exams, store every test attempt in the backend, and support both admin and student roles with normal login flows.
|
||||
|
||||
The previous assignment focused on full-stack completeness. This one focuses on frontend quality: structure, consistency, interaction, responsiveness, and iteration.
|
||||
The product should include an admin system, a complete frontend page flow, and a modern component library.
|
||||
|
||||
Many first frontend projects can “work” but still feel unfinished:
|
||||
|
||||
- the layout is usable, but visually inconsistent
|
||||
- buttons, forms, drawers, and tables do not feel like one system
|
||||
- the desktop version is acceptable, but narrow screens fall apart
|
||||
- AI can generate a first version quickly, but the result still looks generic
|
||||
|
||||
This assignment is about pushing past that first draft.
|
||||
|
||||
Suggested review chapters:
|
||||
|
||||
- [From Design Prototype to Project Code](../../frontend/2.6-design-to-code/)
|
||||
- [Upgrade Your Interface with Modern Component Libraries](../../frontend/2.7-modern-component-library/)
|
||||
- [Make Interfaces Beautiful with LLMs and Skills](../../frontend/2.4-llm-skills-beautiful/)
|
||||
- [Reference UI Design Specifications and Multi-Product UI Design](../../frontend/2.3-multi-product-ui/)
|
||||
|
||||
## 1. Assignment Goal
|
||||
|
||||
Build a frontend project with:
|
||||
|
||||
- a clear use case
|
||||
- a structured layout
|
||||
- a consistent design language
|
||||
- real interaction patterns
|
||||
- code organized in reusable components
|
||||
|
||||
Possible project types:
|
||||
|
||||
- a landing page
|
||||
- a logged-in product workspace
|
||||
- a dashboard or admin interface
|
||||
- an AI tool interface
|
||||
- a multi-module content management page
|
||||
|
||||
## 2. Required Tools
|
||||
|
||||
You should use:
|
||||
|
||||
- **Trae** or another AI coding IDE
|
||||
- **at least one modern component library**
|
||||
|
||||
Examples:
|
||||
|
||||
- React: `shadcn/ui`, `Ant Design`, `HeroUI`, `Material UI`
|
||||
- Vue: `Element Plus`, `Naive UI`, `Ant Design Vue`
|
||||
|
||||
The important part is not just naming a library. The library should meaningfully improve the project's structure and polish.
|
||||
|
||||
## 3. Minimum Requirements
|
||||
|
||||
| Area | Minimum Requirement | Notes |
|
||||
| --- | --- | --- |
|
||||
| Page scope | At least 2 pages, or 1 complex main page plus 1 supporting page | Example: dashboard + detail page |
|
||||
| Component library | Use at least 1 real component library | It should appear in the actual implementation |
|
||||
| Component breakdown | At least 5 reusable components or clearly separated modules | Navigation, filters, table area, modal, summary cards, etc. |
|
||||
| Interaction | At least 3 interaction types | Form validation, modal/drawer, tabs, menus, filters, pagination, chart switching, etc. |
|
||||
| States | Include at least 3 of the following: loading, empty, error, success feedback | Important for product realism |
|
||||
| Responsiveness | Desktop-ready, with reasonable narrow-screen handling | Full mobile support is a bonus |
|
||||
| Data | Real APIs or structured mock data | Even mock data should be organized well |
|
||||
| Delivery | Repo link + public deployment | GitHub + Vercel/Zeabur is recommended |
|
||||
|
||||
## 4. Suggested Project Directions
|
||||
|
||||
### 4.1 Product landing page
|
||||
|
||||
Good for practicing visual hierarchy and presentation.
|
||||
|
||||
Suggested sections:
|
||||
|
||||
- hero
|
||||
- feature cards
|
||||
- workflow
|
||||
- testimonials
|
||||
- pricing
|
||||
- FAQ
|
||||
- footer
|
||||
|
||||
Good library options: `HeroUI`, `Material UI`
|
||||
|
||||
### 4.2 AI tool workspace
|
||||
|
||||
Good for layout, state design, and interaction.
|
||||
|
||||
Suggested sections:
|
||||
|
||||
- sidebar
|
||||
- top toolbar
|
||||
- input area
|
||||
- result area
|
||||
- history panel
|
||||
- settings modal
|
||||
|
||||
Good library options: `shadcn/ui`, `Element Plus`
|
||||
|
||||
### 4.3 Dashboard / admin interface
|
||||
|
||||
Good for dense information layout and component composition.
|
||||
|
||||
Suggested sections:
|
||||
|
||||
- summary cards
|
||||
- charts
|
||||
- filters
|
||||
- data table
|
||||
- details drawer or modal
|
||||
- pagination and status tags
|
||||
|
||||
Good library options: `Ant Design`, `Element Plus`
|
||||
|
||||
## 5. Suggested Workflow
|
||||
|
||||
### 5.1 Decide three things first
|
||||
|
||||
Before opening Trae, write down:
|
||||
|
||||
1. what kind of product you are building
|
||||
2. why you chose this component library
|
||||
3. which 3 modules matter most on the page
|
||||
|
||||
That clarity will make AI-generated output far better.
|
||||
|
||||
### 5.2 Generate the first structural version
|
||||
|
||||
In the first round, focus on layout, component structure, data shape, and core interactions rather than visual perfection.
|
||||
|
||||
Example prompt:
|
||||
|
||||
```text
|
||||
Help me build a frontend project for [product type] using [component library].
|
||||
|
||||
For the first version, focus on:
|
||||
1. page structure
|
||||
2. component breakdown
|
||||
3. mock data structure
|
||||
4. core interactions
|
||||
5. responsive layout foundations
|
||||
|
||||
Please split the code into reasonable page and component files.
|
||||
```
|
||||
|
||||
### 5.3 Use later rounds for polish
|
||||
|
||||
Once the first version works, iterate on:
|
||||
|
||||
- spacing and layout rhythm
|
||||
- visual hierarchy
|
||||
- button priority
|
||||
- hover/focus/disabled states
|
||||
- status colors, icons, and tags
|
||||
- narrow-screen adaptation
|
||||
|
||||
This is often where the project begins to feel like a real product.
|
||||
|
||||
### 5.4 Add the missing product details
|
||||
|
||||
Do not skip:
|
||||
|
||||
- loading buttons during submission
|
||||
- empty-state messaging
|
||||
- fallback UI for failed requests
|
||||
- confirmation and feedback for save/delete/export flows
|
||||
- scroll and overflow behavior in dense layouts
|
||||
|
||||
These details often create the biggest quality jump.
|
||||
|
||||
## 6. Starter Prompt Template
|
||||
|
||||
```text
|
||||
Help me build a frontend interface for [project name] using [component library].
|
||||
The style should feel [modern / professional / lightweight / consumer / enterprise].
|
||||
|
||||
Target users:
|
||||
- [who uses this]
|
||||
|
||||
Page goal:
|
||||
- [the most important task on this page]
|
||||
|
||||
Layout:
|
||||
- left side: ...
|
||||
- top area: ...
|
||||
- main content: ...
|
||||
- right side / bottom: ...
|
||||
|
||||
Interaction requirements:
|
||||
- include several of: modal, drawer, filters, form validation, charts, pagination
|
||||
- include loading, empty, and error states
|
||||
- desktop-first, with narrow-screen handling
|
||||
|
||||
Implementation requirements:
|
||||
- clear component breakdown
|
||||
- mock data in separate files or modules
|
||||
- do not generate one giant page file
|
||||
- build structure first, then improve visuals iteratively
|
||||
```
|
||||
|
||||
## 7. Deliverables
|
||||
|
||||
Please submit:
|
||||
|
||||
1. **A GitHub repository link**
|
||||
2. **A public online link**
|
||||
3. **A `README.md`**
|
||||
- what the page or product is
|
||||
- which component library you used and why
|
||||
- the main modules included
|
||||
- how to run it locally
|
||||
4. **Screenshots or a short demo**
|
||||
- at minimum, show the main desktop view
|
||||
- if you handled responsiveness, include a narrow-screen view too
|
||||
|
||||
Useful optional additions:
|
||||
|
||||
- before/after comparison between first draft and final result
|
||||
- the prompts that helped you most
|
||||
- one UI detail you are especially proud of
|
||||
|
||||
## 8. Evaluation Checklist
|
||||
|
||||
Your project is strong if:
|
||||
|
||||
- the first screen clearly communicates what the product is
|
||||
- the layout feels organized even when the page contains a lot of information
|
||||
- controls feel consistent across the page
|
||||
- the code is broken into understandable parts
|
||||
- interactions feel intentional rather than decorative
|
||||
- the result feels like a product, not a collage of screenshots
|
||||
|
||||
## 9. Bonus Ideas
|
||||
|
||||
You can go further with:
|
||||
|
||||
- real API integration
|
||||
- theme tokens or dark/light theme switching
|
||||
- reusable layout primitives
|
||||
- charts, skeleton loaders, or richer data states
|
||||
- accessibility improvements such as focus states and semantic structure
|
||||
- a short design rationale
|
||||
|
||||
## 10. Common Mistakes
|
||||
|
||||
### 10.1 Focusing only on “looking better”
|
||||
|
||||
Modern frontend quality is not just visuals. It also includes clarity, usability, state handling, and structure.
|
||||
|
||||
### 10.2 Copying default component library examples too closely
|
||||
|
||||
A component library is a foundation, not the final identity of the product.
|
||||
|
||||
### 10.3 Generating everything at once
|
||||
|
||||
Complex interfaces are usually better when built in stages:
|
||||
|
||||
1. structure
|
||||
2. modules
|
||||
3. polish
|
||||
4. details
|
||||
|
||||
## 11. Final Advice
|
||||
|
||||
Do not treat AI as a one-shot page generator. Treat it as a collaborative frontend partner.
|
||||
|
||||
The most useful pattern is usually:
|
||||
|
||||
- you define the direction
|
||||
- AI creates the first version
|
||||
- you critique the result
|
||||
- AI refines it
|
||||
- you keep making product decisions
|
||||
|
||||
That is how you move from “a page that exists” to “a frontend worth shipping.”
|
||||
|
||||
::: tip Next
|
||||
If this assignment goes well, revisit [the full-stack assignment](../2.1-fullstack-app/) and upgrade that product with the frontend quality you built here.
|
||||
:::
|
||||
> This chapter is still being written. Stay tuned...
|
||||
|
||||
@@ -88,19 +88,19 @@ Learn API design, database management, and application deployment strategies:
|
||||
</NavGrid>
|
||||
|
||||
|
||||
### Assignments
|
||||
### Major Projects
|
||||
|
||||
Consolidate your full-stack development skills through practical projects:
|
||||
Consolidate your full-stack development skills through hands-on projects:
|
||||
<NavGrid>
|
||||
<NavCard
|
||||
href="/en/stage-2/assignments/2.1-fullstack-app/"
|
||||
title="Assignment 1: Build Your First Modern App - Full Stack"
|
||||
description="Comprehensively apply what you've learned to independently complete a fully functional full-stack application"
|
||||
title="Major Project 1: Your First SaaS Full-Stack App - AI Copywriting Website"
|
||||
description="Build an AI marketing copy workspace from scratch, including login, generation, billing, and an admin dashboard"
|
||||
/>
|
||||
<NavCard
|
||||
href="/en/stage-2/assignments/2.2-modern-frontend-trae/"
|
||||
title="Assignment 2: Modern Frontend Component Library + Trae"
|
||||
description="Use modern component libraries with Trae IDE to efficiently build complex frontend interfaces"
|
||||
title="Major Project 2: Online Exam and Management System"
|
||||
description="Build an online exam system with automatic question generation, test-taking flows, and admin management"
|
||||
/>
|
||||
</NavGrid>
|
||||
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
title: He Left a Five-Figure Monthly Salary to Help Rural School Kids "Use AI to Block Flies"
|
||||
description: The story of a rural substitute teacher who used AI with his students to build a real classroom tool.
|
||||
---
|
||||
|
||||
# He Left a Five-Figure Monthly Salary to Help Rural School Kids "Use AI to Block Flies"
|
||||
|
||||
<p style="font-size: 52px; line-height: 1; margin: 0 0 12px;">👨🏫</p>
|
||||
|
||||
**Narrated by: Xiao Hao, an elementary school teacher**
|
||||
|
||||
Xiao Hao is a rural substitute teacher for third-grade students. Before this, he had worked in operations, done business data analysis, and written code, earning a solid five-figure monthly salary. To many people, this young man who had made it out of the countryside was already "doing pretty well." But he gave up an enviable job and returned to his hometown for one reason: he wanted to help rural children see a bigger world.
|
||||
|
||||
|
||||
|
||||
## 01 When "Artificial Intelligence" First Entered the Classroom
|
||||
|
||||
When Xiao Hao first started teaching in the village, he felt a deep heaviness in his heart. "The conditions here are limited. These kids rarely get the chance to see the wider world. Their world is so small, sometimes it feels like all they have are worn-out textbooks and the dirt beneath their feet." He wanted them to see something bigger. He also wanted them to know that something called artificial intelligence existed in this world. It could draw, write poems, and answer all the wild questions in their heads.
|
||||
|
||||
|
||||
|
||||
At first, it did not go smoothly. He wanted students to bring phones to school so they could try AI for themselves, but school leaders strongly opposed the idea: "You're just teaching them to copy answers! This has nothing to do with real learning!" But he did not give up. He kept trying to persuade them. In the end, both sides compromised: AI learning was allowed, but students still could not bring their own phones into the classroom.
|
||||
|
||||
So Xiao Hao paid out of pocket, bought a few secondhand phones, and logged his own Doubao account into them for students to use. That was how the children first got their hands on "high tech." Very quickly, they learned to use AI to search for information, learn dances, and even play with text-to-image generation. For the first time, AI opened a new window onto the world for these children.
|
||||
|
||||
|
||||
|
||||
## 02 A Rural Classroom Specialty: Flies and False Touches
|
||||
|
||||
Rural classrooms now have multimedia smart boards too, which has improved teaching efficiency and made education more equitable. But in real classroom settings, some awkward problems remain hard to solve. For example: flies.
|
||||
|
||||
Electronic boards generate heat and light, and flies love landing on them. The screen cannot tell whether a touch is intentional or accidental, so slides jump around, videos pause, and sometimes the system even shuts down mid-class. In a 40-minute lesson, teachers can end up spending 20 minutes swatting flies at the podium. The class becomes fragmented, and both Xiao Hao and his students suffer through it.
|
||||
|
||||
|
||||
|
||||
Then one day, a student raised a hand and said, "Teacher, could we make a program together that keeps the flies out?"
|
||||
|
||||
## 03 We Won the Fight Against Flies by "Chatting" with AI
|
||||
|
||||
Writing code together with third-graders, and building a program this technical, would have been unimaginable in the past. But things are different now. With AI, it suddenly felt possible.
|
||||
|
||||
Xiao Hao happened to discover a public-interest Vibe Coding course, so he started "playing" with it together with the children. The students came up with ideas, and Xiao Hao acted as the translator, turning their words into prompts for the AI. They did not have to wrestle with complex syntax or low-level concepts like pointers, handles, and message queues. AI stood between them and those barriers.
|
||||
|
||||
- "Can the computer tell whether it's a mouse click or the screen touching itself?"
|
||||
- "Can we give the screen a transparent shield, so flies hitting it do nothing, but I can still use the mouse?"
|
||||
|
||||
Those questions led somewhere real. AI told them they needed to distinguish `RawInput` and identify `ExtraInfo`. The children did not understand the technical jargon, but by comparing data and discussing it together, they found that different input methods really did produce different `ExtraInfo` values.
|
||||
|
||||
|
||||
|
||||
Step by step, one sentence at a time, Xiao Hao and the children "talked" their way with AI into building what became **Xiao Hao Touch Lock**. Its principle is simple: it recognizes the characteristics of incoming signals and precisely blocks touchscreen input while keeping mouse input intact. That way, no matter how wild the flies get on the display, the lesson stays perfectly stable.
|
||||
|
||||
This software is not some grand commercial product, but it solved a real classroom pain point in rural schools. More importantly, it gave the children their first taste of creating something themselves, and of using technology to answer a real problem from daily life.
|
||||
|
||||
## 04 From Writing a Line of Code to Knocking on a Door
|
||||
|
||||
What left the deepest impression on Xiao Hao happened on New Year's Day. He asked Doubao, "How can I help the kids spend the holiday in a meaningful way?" AI did not suggest a party or a classroom performance. Instead, it said, "Rather than celebrating in the classroom, why not visit an elderly villager who lives alone?"
|
||||
|
||||
So he really did. He took the children to visit an elderly man in the village who lived by himself with minimal support. When they arrived, the old man was eating lunch on a worn wooden stool, with only a bowl of plain noodles and a small plate of pickles on the table. Xiao Hao felt a sharp pang of regret for not bringing more food. Even the usually rowdy kids were unusually gentle that day, and they chatted with the old man for quite a while.
|
||||
|
||||
On the way back, a few children tugged at Xiao Hao's sleeve, their eyes red, and said, "Teacher, can we come help Grandpa more often?" The wind cut across their faces on the walk home, but Xiao Hao felt warm inside.
|
||||
|
||||
He said, "Education isn't just about teaching textbook knowledge. It also has to teach empathy. The answers AI gives us are not only technical. Sometimes they light a heart that wants to care for others."
|
||||
|
||||
## 05 A Few Words from Teacher Xiao Hao
|
||||
|
||||
To be honest, the biggest gain from building this software was not the software itself. It was seeing the light in the children's eyes. Before this, many of them thought computers belonged to city kids, that programming was for geniuses, and that none of it had anything to do with them. But now they know that as long as they have an idea, as long as they dare to imagine it, and even as long as they can describe it, they can use AI to change their own lives.
|
||||
|
||||
The student who first suggested building the software used to be the most mischievous kid in class. Now he listens more carefully than anyone else, because he knows that something he helped create is solving a problem for everyone. That sense of "I can do this too" is more valuable than getting a perfect score.
|
||||
|
||||
|
||||
|
||||
Xiao Hao also admitted that using phones and AI with the children brought him no shortage of criticism. Many people said he was neglecting his proper duties and setting a bad example. But when he sees the kids becoming more curious and more compassionate because of AI, he feels it has all been worth it.
|
||||
|
||||
## 06 Final Thoughts
|
||||
|
||||
Xiao Hao sincerely hopes more people will pay attention to practical, grounded AI-powered digital classrooms in public education. The small worlds of rural children need AI even more. AI is not just a tool. It is also a window that helps them connect with the vast world beyond their village.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
title: During Finals Week, I Secretly Built a "Campus Xianyu" with AI
|
||||
description: The story of a sophomore student who built a campus secondhand marketplace demo during finals week.
|
||||
---
|
||||
|
||||
# During Finals Week, I Secretly Built a "Campus Xianyu" with AI
|
||||
|
||||
<p style="font-size: 52px; line-height: 1; margin: 0 0 12px;">🎓</p>
|
||||
|
||||
**Narrated by: A sophomore student**
|
||||
|
||||
## 01 Mao Xiaolv's "3-Hour Miracle" and My Overheated Brain
|
||||
|
||||
"Help me test it. Try chatting with it."
|
||||
|
||||
"That's amazing. Finals are coming up and you're still staying up late coding. Go study already."
|
||||
|
||||
"It only took 3 hours."
|
||||
|
||||
During finals week in January 2026, while I was buried in review, I suddenly got a link from a technical genius friend named Mao Xiaolv. It was an AI chat website. It already had features like scheduling and anime tracking, and the interface looked surprisingly polished.
|
||||
|
||||
Three hours? I stared at the screen and felt like my brain was overheating. Once again, this guy had reset my understanding of what "fast" meant. Then he sent me a pile of materials. I opened them and realized that while I recognized every single character, the full sentences might as well have been written in another language. I wanted to ask him, but I was afraid of exposing how much of a beginner I was. So I ended up doing this: he threw jargon at me, I quietly pasted it into Doubao, waited for an explanation, and then cautiously replied to him. My learning process had turned from "person-to-person" into "person-to-AI-to-person."
|
||||
|
||||
|
||||
|
||||
## 02 On My First Day in the Group Chat, I Chose Silence
|
||||
|
||||
The group-based learning program started in January, and Mao Xiaolv pulled me into a big learning chat. The opening round was self-introductions: "many years of development experience," "currently at a major tech company," and so on. I stared at everyone else's intros, paused with my fingers on the keyboard for a few seconds, and then deleted the two lines I had just typed. I sighed to myself: "When experts are sparring, maybe the fool should keep quiet."
|
||||
|
||||
Later, Mao Xiaolv, another new friend, and I formed a smaller group of three, and I finally started to relax. The atmosphere in that group made me especially happy: nobody cared how old you were, what job you had, or whether you were impressive. If a problem came up, we just talked about it as equals and figured it out together. Most of the time everyone was busy and quiet, but you could still feel that people were putting in effort behind the scenes. It was strangely grounding. In school, I rarely experienced this feeling of not being defined by labels and simply moving forward with others because of shared interest.
|
||||
|
||||
|
||||
|
||||
## 03 "Slacking Off" During Finals Actually Made Me Learn Harder
|
||||
|
||||
During this learning stretch, I felt much less tension and anxiety than before. Even while preparing for finals, if my daily progress check-ins were slow, nobody rushed me or blamed me. Everything was on me, and that freedom somehow made me more motivated.
|
||||
|
||||
It felt very different from the standard-answer learning atmosphere of high school and college. This kind of autonomy actually made me want to work harder.
|
||||
|
||||
Each day's task check-in felt like leveling up in a game. Learning became more active, and I learned much more because of it.
|
||||
|
||||
|
||||
|
||||
## 04 In a Moment of Excitement, I Dug Myself a Huge Hole
|
||||
|
||||
Before I knew it, winter break was approaching, and this round of learning was almost over. Before the graduation livestream showcase, the teacher asked me whether I wanted to demo a product.
|
||||
|
||||
"Yes!"
|
||||
|
||||
I answered almost reflexively, even though I had no idea what I was going to build.
|
||||
|
||||
As I scrolled through the dorm and campus group chats full of secondhand listings, a direction started to form. Campus secondhand trading had always existed inside temporary chat groups. People usually arranged to meet at a dorm building or cafeteria, and almost nobody bothered to use a bigger marketplace app. So I started thinking: what if there were a secondhand platform just for campus users? It could show listings from your own school or nearby schools more accurately, and it would naturally come with a bit more trust, reducing the fear of being scammed.
|
||||
|
||||
Once the idea clicked, I threw myself into my first real AI product design. The page design came pretty smoothly: a product browsing page as soon as you enter, a search bar on top, and "My Page" plus "I Want to Sell" underneath. Simple and direct. The hard part was figuring out where to add AI features. At first I thought about making AI recommendations like a shopping platform, but "cost-performance" is too subjective, so I dropped it. I came up with a few more ideas, but none really held up. For a while, I was completely stuck.
|
||||
|
||||
Then I talked to a friend who loves digital gadgets, and one sentence suddenly cleared everything up: "When people sell used items, they usually only say how long they've used it, what flaws it has, and whether it still works. They don't list specs the way merchants do. What if AI helped novice buyers understand the product description instead of making them go hunt down the details themselves?"
|
||||
|
||||
That was it. The direction became clear instantly. The AI feature should live inside the product description. Later, an intelligent pricing feature naturally followed.
|
||||
|
||||
|
||||
|
||||
## 05 I Felt Like the Worst Student in the Livestream, but Got the Most Valuable Encouragement
|
||||
|
||||
I put a lot of effort into the project, and by the time of the livestream, it was finally done. But the closer I got to presenting it, the more nervous I became. The projects shown before mine were all polished and refined, and every interaction looked smoother than the last. Before the event, I had felt confident. But when it was really my turn, the only thought left in my head was: "There has to be room for bad students too."
|
||||
|
||||
So I took a deep breath and presented my demo, feeling both brave and uneasy. When it was over, my mind exploded with self-criticism: my questions had been dumb, my project wasn't polished, my idea was boring, and so many parts were still unfinished.
|
||||
|
||||
But to my surprise, the teachers did not dismiss me at all. Instead, they gave me a lot of specific, practical suggestions. That was the moment I realized that even something imperfect could still be taken seriously. Before this, I had almost never been given a chance to calmly present a project that was still immature.
|
||||
|
||||
|
||||
|
||||
## 06 What I Gained Was Much More Than a Demo
|
||||
|
||||
Through this experience, I genuinely feel that my ability to solve real problems has improved. First, my learning efficiency went up. I learned how to build small tools for myself, such as an AI-powered schedule planner and a personal blog. Second, the way I learn changed. Instead of painfully chewing through thick tutorials page by page, I started directly designing my own small projects and learning by building.
|
||||
|
||||
Not knowing how to code is no longer fatal. AI can help write code. When I run into something I don't understand, I can ask directly: "What does this line mean?" "What concept is this using?" "How do I fix this error?"
|
||||
|
||||
With Trae, the wall between "having an idea" and "making it real" suddenly felt much lower. Even without a strong programming foundation, I could gradually turn ideas in my head into something tangible. Watching a product evolve through iteration gives me a very real sense of achievement.
|
||||
|
||||
This experience made me believe that the threshold for creating things may really be much lower than we once imagined.
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
title: I Built Each Student a Tireless "Straight-A Study Buddy"
|
||||
description: The story of a high school IT teacher who used AI to build a coding learning companion.
|
||||
---
|
||||
|
||||
# I Built Each Student a Tireless "Straight-A Study Buddy"
|
||||
|
||||
<p style="font-size: 52px; line-height: 1; margin: 0 0 12px;">🧑🏫</p>
|
||||
|
||||
**Narrated by: A high school information technology teacher**
|
||||
|
||||
I am a high school information technology teacher, the director of my school's information center, and also one of Shijiazhuang's AIGC seed teachers. Those titles may sound flashy, but in plain language, I am really trying to do just three things: train students well, reduce the burden on teachers, and improve the efficiency of teaching.
|
||||
|
||||
That is why I started learning AI and thinking about how to apply it. At first, it was both a work requirement and a personal interest. But what truly pushed me to build something was the Python practice course I was responsible for.
|
||||
|
||||
## 01 The Python Class That Nearly Drowned Me
|
||||
|
||||
The Python class I teach is not especially complex in terms of content. Students only need to write a simple program to calculate BMI: input height and weight, determine the category, and print the result. But for students with absolutely no programming background, entering a completely new field and understanding how it works is much harder than it looks.
|
||||
|
||||
Very often, what the teacher explains and what students actually understand are worlds apart. So the same points that had already been covered would keep coming back as repeated questions. Not long after I assigned the task, hands would shoot up from every direction, and the classroom would fill with calls of "Teacher! Teacher! Teacher!" It felt like standing in the middle of a noisy market, with every stall owner trying to get your attention at once.
|
||||
|
||||
Fifty students. One teacher. Every student got stuck in a different place. Some did not understand what `input()` was for. Some could not figure out how to write an `if` statement. Some did not understand type conversion at all. In a 45-minute class, I felt like a factory worker tightening screws nonstop. Just as I tightened one, three more would come loose beside it.
|
||||
|
||||
|
||||
|
||||
Even though I never stopped moving, the number of students with raised hands never seemed to go down. Some waited a few minutes and still could not get help, so they started randomly fiddling with their computers. Others simply gave up and put their heads on the desk to sleep. When the bell rang and class ended, I stood in the computer lab looking at the chaos and suddenly felt powerless.
|
||||
|
||||
It was not the students' fault. They were already trying hard. It was not that I was teaching badly either. The problem was that the model itself was broken. Programming is not like math. You cannot solve everyone's problem by explaining one standard answer to the entire class. You can only guide them one by one.
|
||||
|
||||
## 02 What If Every Student Had a Tireless Top Student Beside Them?
|
||||
|
||||
That night, I could not sleep. Not because of anxiety, but because I kept thinking about one question: what if every student had an assistant who could answer questions at any time?
|
||||
|
||||
This assistant would not directly give away the answer. It would simply say things like, "There is a mistake here," "This function works like this," or "Try thinking about it from another angle."
|
||||
|
||||
It would be like that top student you once sat next to in school. When you got stuck, you asked a quick question, they gave you a hint, and then you figured the rest out yourself. That was when I suddenly realized AI might be able to become exactly that kind of "straight-A desk mate."
|
||||
|
||||
Existing AI coding tools could already give direct answers, but they still could not truly guide learning. So I decided to build a new application myself: an AI teaching assistant that could teach, guide, and stay with students as they worked through problems.
|
||||
|
||||
|
||||
|
||||
## 03 From Idea to Reality: The Coding Learning Companion
|
||||
|
||||
Before this, I had only written some simple software. I had never built anything this complex. And I had no experience at all with AI-integrated application development, so honestly, I felt very unsure at the start. But that was also the first time I truly took an idea from my head and pushed it into the real world as a usable application.
|
||||
|
||||
During that period, I spent five consecutive nights checking in with the course and learning step by step. The hardest part of development was not writing code. It was choosing the AI API: which platform was free, which one was fast, which one was suitable for education, and so on. I had to test them one by one.
|
||||
|
||||
I still remember the first time I successfully integrated AI into the app. I typed in "How do I use the `input` function?" and saw it return sample code and an explanation. That feeling of excitement and relief is still vivid to me. I named the application **Information Technology Course Center**, and its core module was the **Coding Learning Companion**.
|
||||
|
||||
|
||||
|
||||
It can do three things:
|
||||
|
||||
- **Answer basic knowledge questions**: when students ask "How do I write a `for` loop?" or "How do lists work?", the companion gives usage explanations and sample code, because these are foundational concepts rather than homework answers.
|
||||
- **Guide homework problem solving**: when students bring a teacher-assigned question, the companion does not output the full solution. Instead, it uses Socratic questioning to guide the student toward figuring it out independently.
|
||||
- **Review student code**: when students paste in their own code, the companion points out what is wrong, but does not directly rewrite everything for them.
|
||||
|
||||
Why design it this way? Because the point of learning is not just to "finish homework." It is to learn how to solve problems. If AI gives answers directly, students will only copy and paste. On the surface, the assignment gets turned in. In reality, nothing has been learned.
|
||||
|
||||
## 04 Assignments and Records Became the Next Problem
|
||||
|
||||
After the software was built, I tested it myself and felt pretty good about it. My colleagues looked at it and said, "This is fantastic. It solves our pain point." But in the first week after school started, a new problem appeared: students used the coding companion to solve issues in class, but where were they supposed to submit homework afterward?
|
||||
|
||||
Previously, we used an electronic classroom system in the computer lab. Students submitted work there, and I collected it on the teacher's machine. But that system had one fatal flaw: it only worked inside the computer lab. Once class ended, everything stopped. Outside the lab, students could neither continue working on assignments nor review their previous learning records.
|
||||
|
||||
So I spent a few more late evenings adding a complete class and course management system to the coding companion:
|
||||
|
||||
- Teachers can create classes and courses.
|
||||
- After joining a class, students can see all course content and assignments.
|
||||
- If they do not finish something in class, they can keep working on it and submit it afterward.
|
||||
- Teachers can review assignments after class and send back incomplete work for revision.
|
||||
- When a student passes every assignment in a course, the system automatically issues a course completion certificate.
|
||||
|
||||
|
||||
|
||||
That certificate was something I intentionally added. I know that for high school students, even a small sense of recognition and ceremony can make them feel, "I really learned something."
|
||||
|
||||
|
||||
|
||||
With the coding companion plus course management, the system finally formed a complete learning loop. It gave students a clearer beginning, a clearer ending, and a stronger sense of accomplishment.
|
||||
|
||||
## 05 If Only Every Teacher Had One More Helper
|
||||
|
||||
The students are on break now. The course management system has not yet been deployed at scale in real classes, but the feedback from colleagues who tested it has already made me confident: "This is exactly what we need." What surprised me even more is that the system may even be promoted to other schools across Shijiazhuang.
|
||||
|
||||
At first, I built it simply to solve a problem for the 50 students in my own class. I did not imagine doing anything bigger. But then I thought about it again: if information technology teachers across the whole city are facing the same dilemma, and every classroom is full of students calling "Teacher!" while there is only one teacher, then this tool really should be used by more people.
|
||||
|
||||
AI may be part of the answer. Not as a replacement for teachers, but as something that helps teachers so every student can receive more personalized guidance.
|
||||
|
||||
## 06 Closing
|
||||
|
||||
Finally, a few words about the technical side. I used Baidu Miaoda and deployed it at zero cost. Our school does not have a server budget, so that zero cost mattered a lot. In just five days, the product moved from an idea to an online application. Even learning Vibe Coding and building the app all happened in fragmented time at night.
|
||||
|
||||
I am not a professional developer, and I am definitely not a tech genius. I am just an ordinary high school information technology teacher who, on a sleepless night, wanted to solve a real problem. Later, I discovered that technology really can change education. Not in the grand narrative sense of some sweeping "education revolution," but in a specific, modest, and genuinely effective way.
|
||||
|
||||
If you are also an information technology teacher facing similar challenges, or simply someone interested in AI plus education, I would be happy to keep talking. Let's work together to make technology truly serve education.
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
title: At 48, a Truck Driver Pulled Several All-Nighters and Used AI to Build an Overseas Tool Site
|
||||
description: The story of a 48-year-old truck driver who used AI to build an overseas tool site and a complete payment loop.
|
||||
---
|
||||
|
||||
# At 48, a Truck Driver Pulled Several All-Nighters and Used AI to Build an Overseas Tool Site
|
||||
|
||||
<p style="font-size: 52px; line-height: 1; margin: 0 0 12px;">🚚</p>
|
||||
|
||||
**Narrated by: Lao Huang, a truck driver**
|
||||
|
||||
## 01 "The President of Yugoslavia" Decided to Switch Tracks
|
||||
|
||||
"This year I turned 48, my zodiac year. At an age when I hadn't seriously touched a computer in over ten years, the explosion of DeepSeek during the 2025 Spring Festival hit me like a muffled thunderclap."
|
||||
|
||||
Lao Huang grew up in Jiaozuo, a fourth-tier city. He was part of a factory family, and because of a childhood nickname, people sometimes jokingly called him "the President of Yugoslavia." These days, everyone simply calls him Lao Huang.
|
||||
|
||||
He works as a cargo transporter for vending machines. DeepSeek's sudden rise made him realize something: "The train of this era is about to leave the station. Whether you're drinking coffee in an office tower or chewing on a steamed bun inside a truck cab, the AI wave is going to hit you. If you don't catch up head-on, you'll be left behind in the dust."
|
||||
|
||||
|
||||
|
||||
So this complete outsider decided to learn seriously. He wanted to find out whether "hands that used to only drive trucks could also knock on the door of AI programming."
|
||||
|
||||
## 02 From Handcraft to the Art of Directing
|
||||
|
||||
During the first two weeks of learning, Lao Huang kept doubting himself. "I don't even know what code is supposed to look like. Can I really do this?"
|
||||
|
||||
But the words from teachers and teaching assistants gave him confidence: in the age of AI programming, you are no longer just a manual laborer moving code brick by brick. You are the director. Building software is no longer about stacking every piece by hand. If you can explain clearly what you want, AI can help you build it step by step.
|
||||
|
||||
That was how Lao Huang entered vibe coding.
|
||||
|
||||
- "Help me make a Snake game. Make it look nice and add a start button!"
|
||||
- "Generate a dynamic map that shows cargo shipping from China to destinations around the world in a cool way!"
|
||||
|
||||
|
||||
|
||||
And just like that, the apps appeared. The feeling was so strange and powerful that it deeply shocked him. Programming changed from a dry form of manual craft into a kind of commanding art. The hands that had held a steering wheel for half a lifetime could now also take hold of the steering wheel of the digital world.
|
||||
|
||||
|
||||
|
||||
## 03 Through Breakdowns and Persistence, He Forced a Full Business Loop to Work
|
||||
|
||||
"Talking is cheap. Real combat is what matters."
|
||||
|
||||
The fifth assignment in the course was to complete a substantial independent project. Lao Huang decided to build an overseas AI tool site. It had to work, it had to be deployable, and it had to take payments. Ideally, it would form a complete business loop.
|
||||
|
||||
At first, reproducing the website prototype went fairly smoothly. But the moment he moved to the core feature, image generation, errors started exploding everywhere. As a complete beginner, he could only debug by talking to AI while filling in gaps in his own foundational knowledge. For four or five days straight, he drove and delivered goods during the day, then came home at night and went into round after round of battle with AI: asking, debugging, learning, repeating. At his lowest point, he sat in front of the screen all night staring at F12 developer tools.
|
||||
|
||||
|
||||
|
||||
He considered giving up more than once. But the active Q&A in the learning group and the professional knowledge-sharing sessions kept pulling him back in. Later, he started using the free large model inside the domestic coding tool Trae. Errors decreased, communication became smoother, and Lao Huang pushed forward in one go, integrating text-to-image, text-to-video, and old photo restoration.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
The hardest part, though, was not the core AI function. It was setting up a domain email, configuring Google login, and connecting the payment systems, PayPal and Creem. Lao Huang read the official docs, asked AI questions, and handled the design and configuration himself. In the end, he completed the payment integration from 0 to 1 on his own.
|
||||
|
||||
He said that when Nano Banana finally ran end to end, he wanted to shout: "Designing and shipping a website with a real working business loop is no longer something only programmers at big companies can do!"
|
||||
|
||||
## 04 Lao Huang's Rules for Building from Zero
|
||||
|
||||
After a long journey of trial, error, and persistence, Lao Huang summed up several lessons he paid for the hard way:
|
||||
|
||||
- **The building-block rule**: do not try to swallow everything at once. Change one small feature at a time, and move on only after that part works.
|
||||
- **Learn to give examples**: when talking to AI, do not stay abstract. Show it concrete examples, error messages, and the effect you want.
|
||||
- **Learn by borrowing**: do not just copy and paste. Try to understand why AI wrote it that way.
|
||||
- **Adjust your mindset**: do not panic when errors appear. They are teaching you where the pitfalls are.
|
||||
|
||||
|
||||
|
||||
## 05 This Train of the Times Has Room for Everyone
|
||||
|
||||
Now Lao Huang is still the same truck driver hauling goods around Zhengzhou. But unlike before, he now has a second identity: AI application developer. More recently, he even built a mini program for his company called **Su Bianli Campus Snack Shop**, which greatly improved the shopping experience for teachers and students.
|
||||
|
||||
|
||||
|
||||
As Lao Huang put it: "As long as you have the urge to solve a problem, code is no longer the barrier."
|
||||
|
||||
His message to others is refreshingly direct:
|
||||
|
||||
> Friends, don't be afraid. If you want to begin, it's never too late.
|
||||
> The steering wheel is in your own hands.
|
||||
@@ -1343,6 +1343,7 @@
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-1/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-2/</loc>
|
||||
@@ -1350,6 +1351,7 @@
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-2/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-2/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-3/</loc>
|
||||
@@ -1357,6 +1359,7 @@
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-3/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-3/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-4/</loc>
|
||||
@@ -1364,5 +1367,6 @@
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-4/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/vibe-stories/story-4/"/>
|
||||
</url>
|
||||
</urlset>
|
||||
|
||||
Reference in New Issue
Block a user