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 4: Create Basic Component Structure

Goal: Create the main PotluckMeals component and import it into your App component.

User Story: As a developer, I want to create a component that can fetch and display data from my database so that I can see my potluck meals.

---

What You’ll Do

Create the PotluckMeals component with basic structure and import it into your App component.

Instructions

• Create src/components/PotluckMeals.jsx with basic structure
• Import useState from React
• Import your Supabase client from ../utils/supabase
• Create a state variable for meals with initial value of empty array
• Add a basic return statement with a heading and button
• Import and use the PotluckMeals component in src/App.jsx

💡 Code Hints

Need help with component structure? Check out these snippets:

Show Me: PotluckMeals component

import { useState } from "react"
import supabase from "../utils/supabase"

export default function PotluckMeals() {
    const [meals, setMeals] = useState([])

    return <>
        <h1>Potluck meals</h1>
        <button>Fetch Meals</button>
        <ul>
            {/* Meals will be displayed here */}
        </ul>
    </>
}

Show Me: App.jsx import

import PotluckMeals from './components/PotluckMeals'

function App() {
  return (<>
    <PotluckMeals/>
  </>)
}

export default App

✅ Check

1. Your component renders without errors
2. You see “Potluck meals” heading
3. You see a “Fetch Meals” button
4. No console errors about missing imports
5. The component structure is clean and organized

---

---