L1: Project Setup

Before building new features, let's clean up the default Vite project and set up a proper structure for our booking app.

Current State

Right now, your project shows the default Vite + React page with:

• Vite and React logos
• A counter button
• Some example text

We'll replace this with a clean starting point for our booking application.

Step 1: Clean Up App.jsx

Open src/App.jsx and replace everything with this clean starting point:

function App() {
   return (
      <div className='app'>
         <h1>StayScape</h1>
         <p>Find your perfect stay</p>
      </div>
   );
}

export default App;

What we did:

• Removed the counter logic
• Removed all the starter content
• Created a simple welcome message
• Kept the basic structure (function component with JSX return)

Save the file and check your browser - you should see just "StayScape" and "Find your perfect stay".

Step 2: Clean Up the Styles

Let's simplify the CSS files.

Update index.css

Open src/index.css and replace with:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
      "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

This provides:

• CSS reset (removes browser defaults)
• Clean typography
• Box-sizing for easier layouts

Delete App.css

We don't need App.css anymore. Delete the file:

• Right-click on src/App.css in VS Code
• Select "Delete"
• Confirm

Also remove the import from App.jsx if it's still there.

Step 3: Create Folders Structure

Let's organize our project properly from the start.

In the src folder, create two new folders:

Using VS Code Terminal:

cd src
mkdir pages components

Or Using VS Code GUI:

1. Right-click on the src folder
2. Select "New Folder"
3. Name it pages
4. Repeat for components

Understanding the Structure

This organization follows React best practices:

Step 4: Verify the Setup

Your project structure should now look like:

What You Learned

Checkpoint ✅

Before continuing, make sure:

• ✅ Your browser shows "StayScape" and "Find your perfect stay"
• ✅ No console errors in browser DevTools (F12)
• ✅ pages and components folders exist in src
• ✅ App.jsx contains the clean starting code

Next Up

Now that we have a clean project, we'll create our first custom component: the HomePage!