Academyacademy / vibe-101 / project-foundation

Project Foundation

What this is

Project Foundation is the checkpoint where the learner turns the project brief into real files.

The goal is not to build the full website yet. The goal is to create the project folder, confirm the stack, and prepare the first clean build step.

Why it matters

Beginners often ask AI to build the whole idea at once.

That makes the project harder to understand, harder to debug, and easier to break.

The foundation step keeps the build small enough for the learner to follow.

What to do

Open the IDE and paste the project brief.

Use this prompt:

Reference

We are starting this project from the brief below.

[paste project brief]

Create or inspect the project foundation only.

Do:
1. confirm the stack
2. confirm the folder structure
3. create only the starter files needed
4. tell me which file to open first

Do NOT build all features yet.
Do NOT add optional backend yet.
Do NOT skip explanation.

Check that the project folder has the expected starter files.

For a Next.js project, look for:

  • package.json
  • src or app
  • public
  • a config file such as next.config

Before moving on, ask AI:

Copy prompt
Explain the folder structure in beginner-friendly terms.

Tell me:
- where pages live
- where styling lives
- where images/assets live
- which file we will edit first

Common mistakes

  • Building all 3 features before the learner knows the files.
  • Adding Supabase or login before localhost works.
  • Letting AI create a complex folder structure for a simple project.
  • Moving on without checking that package.json exists.

Vibe 101 / Current checkpoint

Project Foundation

Ready to stamp - Saved in this browser only.

0 of 15 checkpoints complete

0 of 15 checkpoints complete.