Chapter 1: Project Introduction and Lightning-Fast Astro Website Setup (Vibe Coding Hands-on)

Welcome to the "Camping Official Website Development" Vibe Coding hands-on course! In this project, we won't teach you to write code line by line like traditional cram schools. This is a "teaching you to be the boss" course. We'll learn how to command AI (Claude 3.5 / Antigravity) to build a modern, high-quality official website with a backend database from scratch!

🎯 What You'll Learn in This Chapter?

Business Value: Understand why the Astro framework is the top choice for SEO-friendly official websites and how to sell it to clients.
AI Tool Selection: Learn to choose the most suitable LLM model for frontend development.
Precise Prompt (Spell) Crafting: Master the "Vibe Coding SOP" to command AI in setting up a complete development environment.
Verification and Debugging: How to identify errors without writing code when AI provides incorrect code.
Deployment: Directly push your first shell website to GitHub and Vercel.

🤖 Recommended LLM Platforms and Tools (Step 1 of Vibe Coding SOP)

Choosing the right tools accounts for 80% of success in Vibe Coding. For frontend web development, the industry's golden combination is:

Editors: Recommended options are VSCode, Cursor, or Antigravity (a powerful code editor with built-in AI assistance).
AI Models: Strongly recommend switching to Claude Sonnet 4.6, Claude Opus 4.7, or Gemini Flash / Gemini Pro. They offer extremely high accuracy when working with React and UI templates.
Open-source Model Options: If you prefer open-source models, you can choose OpenRouter or SiliconFlow platforms and use DeepSeek v4 Flash or DeepSeek v4 Pro inside them.

[!TIP] Vibe Mindset: Don't treat AI as a search engine—think of it as your "senior engineer employee."

📂 Starting Point: Creating the Project and Folders

On your computer, open the terminal (Terminal on Mac or PowerShell on Windows).
Create a clean empty folder and navigate into it:

mkdir camping-official-site
cd camping-official-site

In the terminal, enter code . or use Cursor to open this folder.

💬 Divine Prompt Library: Environment Setup

Open the Chat window in Cursor (Cmd/Ctrl + L) and prepare to issue your first command!

[!IMPORTANT] Directly copy and send the following Prompt to AI:

You are now a senior frontend architect. I want to create an Astro project named "not_far_web" in the current directory. Requirements: 1. Use TypeScript 2. Install Tailwind CSS with React integration 3. Provide complete npm setup commands and explain in detail what I should select for interactive options in the terminal (e.g., whether to install dependencies, initialize git). 4. Ensure the commands use the latest version of Astro syntax.

AI will typically give you extremely accurate responses. It will ask you to execute in the terminal:

npm create astro@latest not_far_web

When interactive options appear in the terminal, follow AI's (or the below) recommendations:

Where should we create your new project? ./not_far_web
How would you like to start your new project? Include sample files
Install dependencies? Yes
Do you plan to write TypeScript? Yes
Initialize a new git repository? Yes

Next, to install Tailwind and React, you can continue prompting AI:

The project is created. Now give me commands to automatically install and configure @astrojs/tailwind and @astrojs/react.

Execute the commands provided by AI (usually npx astro add tailwind react), and press Yes (y) for all prompts! AI tools save us the trouble of manually modifying configuration files.

🛠️ Verification and Debugging

The most crucial part of Vibe Coding is "verification." In the terminal, enter the following command to start the development server:

cd not_far_web
npm run dev

Open your browser and navigate to http://localhost:4321—you should see Astro's welcome page.

What if the page is broken or the terminal shows red error messages? Never Google it yourself! Copy the entire red error message from the terminal and paste it back into the AI chat:

I encountered the following error when executing npm run dev. Please tell me what went wrong and provide the fix: [paste error message]

AI can basically solve 99% of environment compatibility issues within 3 seconds.

🚀 GitHub Upload and Vercel Cloud Deployment

Deploy on the first day of building! This way, you can see results immediately with every change.

Upload to GitHub: Enter the following in the AI chat:

I want to push this project to my newly created empty GitHub Repo at https://github.com/myname/my-camping-site.git. Give me complete git commands.

AI will teach you to execute git add ., git commit -m "Init", git remote add origin ..., and git push in sequence.

Deploy to Vercel:

Go to Vercel's official website and log in with GitHub.
Click Add New Project.
Import the Repo you just uploaded.
Select Astro for Framework Preset.
Click Deploy!

Wait 2 minutes, and your "Camping Site Official Website" will be officially online with its own URL!

✅ Chapter Summary and Next Steps

You've now mastered the core of Vibe Coding: issue precise specifications -> verify results -> return errors to AI -> deploy.

In the next chapter, we'll dive into backend essentials: Supabase Database Setup and Schema Design. We'll teach you how to use prompts to have AI help you design a perfect relational database schema including "campsite reservations and member data"!