Modul praktis Level 2 VibeKoding: Proyek: SaaS Generator Gambar AI Modern.Modul praktis Level 2 VibeKoding: Proyek: SaaS Generator Gambar AI Modern.
This project requires you to build a Midjourney-inspired AI image generation SaaS product from scratch, based on a real PRD. You'll go through the full process: requirements analysis, project breakdown, iterative development, and integration testing.This project requires you to build a Midjourney-inspired AI image generation SaaS product from scratch, based on a real PRD. You'll go through the full process: requirements analysis, project breakdown, iterative development, and integration testing.
This is the comprehensive practical section of Stage 2. In previous chapters, you've learned individual skills — frontend design, backend APIs, databases, payment integration. This project ties them all together into a runnable product prototype.This is the comprehensive practical section of Stage 2. In previous chapters, you've learned individual skills — frontend design, backend APIs, databases, payment integration. This project ties them all together into a runnable product prototype.
Before starting this project, you should already be familiar with:Before starting this project, you should already be familiar with:
After completing this project, you will be able to:After completing this project, you will be able to:
You will build a modern AI image generation SaaS platform with three subsystems:You will build a modern AI image generation SaaS platform with three subsystems:
| Subsystem | Responsibility |
|---|---|
| Public Website | Product intro, pricing, FAQ, registration conversion |
| User Workspace | Prompt input, image generation, gallery, credits, plans, community interaction |
| Admin Dashboard | User management, task management, payment management, content moderation, SaaS metrics, system monitoring |
The backend needs to support: user auth, image generation tasks, OSS object storage, credits and plan payments, image social interaction, and operations data monitoring.The backend needs to support: user auth, image generation tasks, OSS object storage, credits and plan payments, image social interaction, and operations data monitoring.
The requirements document for this project is on GitHub: [View PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/en/stage-2/assignments/modern-landing-page/PRD.md)The requirements document for this project is on GitHub: [View PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/en/stage-2/assignments/modern-landing-page/PRD.md)
{ title: 'Scaffold', description: 'Use AI to generate three frontend skeletons (www / app / admin)' },{ title: 'Scaffold', description: 'Use AI to generate three frontend skeletons (www / app / admin)' }, { title: 'Iterate', description: 'Add APIs, auth, payments, monitoring module by module' },{ title: 'Iterate', description: 'Add APIs, auth, payments, monitoring module by module' }, { title: 'Launch', description: 'End-to-end testing, deploy, and prepare demo' }{ title: 'Launch', description: 'End-to-end testing, deploy, and prepare demo' } ]" />]" />
Open the PRD document and answer these key questions:Open the PRD document and answer these key questions:
If the above questions don't have clear answers, don't start coding. Unclear requirements are the most common cause of rework.If the above questions don't have clear answers, don't start coding. Unclear requirements are the most common cause of rework.
Map out the overall architecture based on the PRD:Map out the overall architecture based on the PRD:
mermaid flowchart TD prd["PRD"] --> web["Public Website"] prd --> app["User Workspace"] prd --> admin["Admin Dashboard"] app --> auth["Auth"] app --> gen["Image Generation Task"] gen --> oss["OSS Storage"] gen --> db["Database"] billing["Payments & Plans"] --> db social["Share / Like / Comment / Repost"] --> db admin --> analytics["SaaS Metrics Dashboard"] admin --> observability["API / DB / Provider Monitoring"]
We recommend drawing the architecture diagram in your own words to confirm your understanding is complete.We recommend drawing the architecture diagram in your own words to confirm your understanding is complete.
Use AI to generate the basic structure and mock data for all pages. The goal here is to set up the information architecture and routing — no real API integration yet.Use AI to generate the basic structure and mock data for all pages. The goal here is to set up the information architecture and routing — no real API integration yet.
Prompt reference:Prompt reference:
text Based on the current PRD, help me generate a frontend scaffold for a modern AI image generation SaaS. Requirements: 1. Three entry points: www, app, admin 2. www: homepage, pricing, FAQ 3. app: login, register, generation workspace, gallery, plans, credits, community, artwork detail, profile 4. admin: dashboard homepage, user management, task management, content management, plan management, payment orders, operations config, SaaS metrics, system monitoring 5. Only generate page structure with mock data, no real API integration 6. Style reference: Midjourney — clean, modern, product-like
After generating the scaffold, check each item:After generating the scaffold, check each item:
/, /app, /admin)[ ] Three entry point routes are independent (/, /app, /admin)On top of the scaffold, add features module by module in this order:On top of the scaffold, add features module by module in this order:
After each module, use this self-check table:After each module, use this self-check table:
| Check Item | Verification Method |
|---|---|
| Page consistency | Do page count, entry points, and features match the PRD? |
| API correctness | Are request params, response structure, and status handling reasonable? |
| Auth isolation | Are regular users and admins properly separated? |
| Data consistency | Do database, OSS, payment, and credits data align? |
| Demo readiness | Can you demo a complete business flow to someone else? |
If AI-generated content drifts from the PRD, don't throw away the whole page — just ask it to fix the specific module.If AI-generated content drifts from the PRD, don't throw away the whole page — just ask it to fix the specific module.
During iteration, you need to play three roles simultaneously:During iteration, you need to play three roles simultaneously:
The focus at this stage is not adding new pages but running complete business flows. At minimum, verify:The focus at this stage is not adding new pages but running complete business flows. At minimum, verify:
Deploy the project to a public environment, ensuring:Deploy the project to a public environment, ensuring:
For deployment instructions, see: [Git & GitHub Workflow](../../backend/git-workflow/), [Web App Deployment](../../backend/zeabur-deployment/).For deployment instructions, see: [Git & GitHub Workflow](../../backend/git-workflow/), [Web App Deployment](../../backend/zeabur-deployment/).
After completing this project, submit the following:After completing this project, submit the following:
README should include at minimum: project overview, core page descriptions, tech stack, local setup steps, and environment variable list.README should include at minimum: project overview, core page descriptions, tech stack, local setup steps, and environment variable list.
| Dimension | Basic Requirements | Advanced Requirements |
|---|---|---|
| PRD Alignment | Pages, features, and data structures basically match PRD | Can clearly explain each design decision's PRD correspondence |
| Product Loop | Register → Buy credits → Generate image → View history → Share works end-to-end | Payment status, credit balance, and generation count data are consistent |
| Admin Capability | Users, tasks, payments, and content management are viewable | SaaS metrics dashboard and system monitoring page are fully functional |
| Engineering Completeness | Frontend, backend, database, OSS, payment pipeline connected | Has error handling, empty states, and loading states |
| Delivery Quality | Deployable and runnable | README is clear, demo video is well-structured |