Muscle Memory Drills

Create a FastAPI GET endpoint at "/users/{user_id}" that:
1. Accepts a user_id as a path parameter (integer)
2. Returns a JSON object with: {"user_id": <the id>, "name": "User <id>", "active": true}

Example: GET /users/42 should return {"user_id": 42, "name": "User 42", "active": true}

Create a FastAPI POST endpoint at "/items" that:
1. Accepts a JSON body with: name (string), price (float), quantity (int, optional, default 1)
2. Uses a Pydantic model called "Item" for validation
3. Returns the item with an added "total" field (price * quantity)

Example: POST {"name": "Widget", "price": 9.99, "quantity": 3}
Returns: {"name": "Widget", "price": 9.99, "quantity": 3, "total": 29.97}

Create a SQLAlchemy model and CRUD operations:

1. Define a "Task" model with columns:
   - id: Integer, primary key, autoincrement
   - title: String(100), not nullable
   - completed: Boolean, default False

2. Create functions:
   - create_task(db: Session, title: str) -> Task
   - get_task(db: Session, task_id: int) -> Task | None

The database setup is provided. Focus on the model and CRUD functions.

Create a React component "UserList" that:

1. Uses useState to store an array of users
2. Uses useEffect to fetch from "/api/users" on mount
3. Displays users in a <ul> with each user's name in an <li>
4. Each <li> should have key={user.id}

Assume the API returns: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }]

Create a React component "AddTodo" that:

1. Has a controlled text input for the todo title
2. Has a submit button
3. On submit: POST to "/api/todos" with { title: inputValue }
4. After successful POST, add the returned todo to a todos array in state
5. Display the todos list below the form

Assume POST returns the created todo: { id: 1, title: "...", completed: false }

Create a React component "DataFetcher" that:

1. Has three states: loading (boolean), error (string | null), data (any | null)
2. Fetches from "/api/data" on mount
3. Shows "Loading..." while fetching
4. Shows error message if fetch fails
5. Shows the data (as JSON string) when successful

Handle the fetch error with try/catch and set appropriate states.

Configure CORS middleware for a FastAPI app:

1. Import CORSMiddleware from fastapi.middleware.cors
2. Add middleware with:
   - allow_origins: ["http://localhost:3000"]
   - allow_credentials: True
   - allow_methods: ["*"]
   - allow_headers: ["*"]

3. Create a test endpoint GET /health that returns {"status": "ok"}

Create a React component "Timer" that:

1. Uses useState to track elapsed seconds (starts at 0)
2. Uses useEffect with setInterval to increment every 1000ms
3. Returns a cleanup function that calls clearInterval
4. Displays: "Elapsed: X seconds"

This prevents memory leaks when the component unmounts.

Create a React component "LikeButton" that:

1. Shows current like count from props.initialCount
2. On click: immediately increment the count (optimistic update)
3. Send POST to "/api/like"
4. If POST fails: roll back to previous count
5. Show the count in a button: "Like ({count})"

The optimistic pattern: save old state, update UI, then rollback if API fails.

Create a FastAPI WebSocket endpoint at "/ws" that:

1. Accepts WebSocket connections
2. Sends a welcome message: "Connected!"
3. Continuously receives messages and echoes them back with "Echo: " prefix
4. Handles disconnection gracefully

Example: Client sends "hello" -> Server responds "Echo: hello"