learn-build-apps-copilot-agent/.github/steps/5-setup-frontend-react-framework.md

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.

⌨️ Activity: Implement frontend components and routing

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

⌨️ 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.

2. Wait for Mona to verify and post the final lesson.

Having trouble? 🤷

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/