mirror of
https://github.com/farcasclaudiu/learn-build-apps-copilot-agent.git
synced 2026-06-24 15:01:16 +03:00
54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
## Step 5: Build the React presentation tier of the multi-tier application
|
|
|
|
> [!NOTE]
|
|
> This step implements the **presentation tier** for your modern multi-tier application.
|
|
|
|
In this step, you will:
|
|
|
|
- Complete React 19 frontend components.
|
|
- Connect each view to the backend API routes.
|
|
- Use React Router for navigation.
|
|
|
|
### :keyboard: Activity: Implement frontend components and routing
|
|
|
|
> 
|
|
>
|
|
> ```prompt
|
|
> Let's update the React 19 presentation tier for this multi-tier application.
|
|
>
|
|
> - Update src/App.jsx and src/main.jsx
|
|
> - Update src/components/Activities.jsx
|
|
> - Update src/components/Leaderboard.jsx
|
|
> - Update src/components/Teams.jsx
|
|
> - Update src/components/Users.jsx
|
|
> - Update src/components/Workouts.jsx
|
|
> - Use react-router-dom for navigation
|
|
> - Use Vite environment variables via `import.meta.env`, for example `import.meta.env.VITE_CODESPACE_NAME`
|
|
> - Document that `VITE_CODESPACE_NAME` must be defined (for example in `.env.local`)
|
|
> - Use API endpoints under:
|
|
> https://${import.meta.env.VITE_CODESPACE_NAME}-8000.app.github.dev/api/[component]/
|
|
> - Add a safe fallback if `VITE_CODESPACE_NAME` is unset to avoid `https://undefined-8000...` URLs
|
|
> - Keep compatibility with paginated and array responses
|
|
> ```
|
|
|
|
### :keyboard: Activity: Run and verify the presentation tier
|
|
|
|
Run the React app with the Vite dev server (for example, `npm run dev`) and open port `5173`.
|
|
|
|
1. Commit and push your changes.
|
|
|
|
1. Wait for Mona to verify and post the final lesson.
|
|
|
|
<details>
|
|
<summary>Having trouble? 🤷</summary><br/>
|
|
|
|
Confirm these files include the expected endpoint paths:
|
|
|
|
- `Activities.jsx` -> `/api/activities/`
|
|
- `Leaderboard.jsx` -> `/api/leaderboard/`
|
|
- `Teams.jsx` -> `/api/teams/`
|
|
- `Users.jsx` -> `/api/users/`
|
|
- `Workouts.jsx` -> `/api/workouts/`
|
|
|
|
</details>
|