codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19⚡

20

Level 2: Project Setup

Goal: Set up your development environment with Vite and React.

User Story: As a developer, I want to create a new React project and install dependencies so that I can start building my potluck management app.

---

What You’ll Do

Create a new React project using Vite and install the Supabase client library.

Instructions

• Create a new React project using Vite: npm create vite@latest practice-with-db -- --template react
• Navigate to the project folder: cd practice-with-db
• Install dependencies: npm install
• Install Supabase client: npm install @supabase/supabase-js
• Install tslib to support the Supabase client: npm install tslib
• Start the development server to verify setup: npm run dev
• Open the project in your code editor

See here for installation details: Install Supabase Client

💡 Code Hints

Need help with project setup? Check out these snippets:

Show Me: Creating the project

npm create vite@latest practice-with-db -- --template react
cd practice-with-db
npm install

Show Me: Installing Supabase

npm install @supabase/supabase-js

Show Me: Project structure

practice-with-db/
├── src/
│   ├── components/
│   │   └── PotluckMeals.jsx
│   ├── utils/
│   │   └── supabase.js
│   ├── App.jsx
│   └── main.jsx
├── package.json
└── README.md

🔍 Diving Deeper

Why do we need these libraries?

• @supabase/supabase-js: This is the official JavaScript client library for Supabase. It provides all the functions we need to connect to our database, perform queries, and handle authentication. Without it, we’d have to write complex HTTP requests manually.

• tslib: This is a TypeScript runtime library that Supabase depends on. Even though we’re using JavaScript, Supabase’s internal code uses TypeScript features, so we need this library to support those features.

Where do these libraries go?

When you run npm install, npm:

1. Downloads the libraries from the npm registry
2. Stores them in the node_modules/ folder in your project
3. Updates your package.json file to record the dependencies

How to verify installation:

1. Check package.json: Open your package.json file and look for the dependencies section:

   {
     "dependencies": {
       "@supabase/supabase-js": "^2.x.x",
       "tslib": "^2.x.x"
     }
   }
   

2. Check node_modules/: Look in your project folder for a node_modules/ directory. Inside, you should see folders named @supabase and tslib.

3. Verify in terminal: Run npm list to see all installed packages and their versions.

✅ Check

1. Run npm run dev to start your development server
2. Open your browser to http://localhost:5173
3. You should see the default Vite + React welcome page
4. Check that @supabase/supabase-js is listed in your package.json dependencies
5. Open your project folder in VS Code and verify you can see the basic file structure

---

---