Practical Applications Using Vibe Coding
Practice yields true knowledge.
In this course, we will use vibe coding to transform an existing project to make it work the way we expect.
This project is a personal blog website system.
The technology stack used is Next.js and Tailwind CSS.
The download link for the source code of the project used in this course is: my-website.zip
The following prompts are used in this course:
- Please help me analyze the code structure of this project and save the results to the CLAUDE.md file.
- Remove the /photo page
- Change the text MAIN to HOME on the homepage.
- Remove the Gallery and Blog buttons from the "Hello, I'm Yang" section on the homepage.
- The text "Built by Yang. The source code is available on GitHub." in src/components/footer.tsx should be changed to "© 2026 AIForCoding. All rights reserved."
- pls help me build this project
- run npm start to start this project
Why does this course use front-end development as an example?
Being closest to customers makes generating revenue relatively easier. Once developed, it can be distributed globally immediately.
How to get your project up and running faster?
You don't need to develop from scratch. You can find a project on GitHub that best matches your needs. In reality, projects don't necessarily need to be built from scratch. Find a project on GitHub that's related to or similar to yours, and modify it accordingly. Let the AI agent modify it; as long as you can understand the code, it's fine. Even if you don't fully understand some parts, it's not a big deal. This way, your project will be running quickly, and your confidence will build.
Last Updated