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. Make sure these two files are in your project folder:

project-brief.md
design-spec.md

Use this prompt:

We are starting the project foundation for my Vibe 101 website.

Before writing code, read these files:
- project-brief.md
- design-spec.md

Use them as the source of truth.

Task:
Create or inspect the project foundation only.

Do only these things:
1. Confirm the stack from the project brief
2. Confirm the folder structure
3. Create only the starter files needed to run the project
4. Add the basic layout direction from the design spec
5. Tell me which file we will edit first

Do NOT build all features yet.
Do NOT add login, database, payment, or backend features.
Do NOT make the design fancy yet.
Explain the files in beginner-friendly language.

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:

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.