mirror of
https://github.com/farcasclaudiu/learn-build-apps-copilot-agent.git
synced 2026-06-28 15:01:30 +03:00
Initial commit
This commit is contained in:
GitHub
@@ -0,0 +1,35 @@
|
||||
## Step 1: Prepare your modern multi-tier application exercise
|
||||
|
||||
Welcome to your **"Build applications with GitHub Copilot agent mode"** exercise! :robot:
|
||||
|
||||
In this exercise, you will build a **modern multi-tier application** for OctoFit Tracker:
|
||||
|
||||
- **Presentation tier:** React 19
|
||||
- **Logic tier:** Node.js + Express + TypeScript
|
||||
- **Data tier:** MongoDB
|
||||
|
||||
### :keyboard: Activity: Create and publish your working branch
|
||||
|
||||
1. Open your Codespace for your repository copy.
|
||||
|
||||
1. Open Copilot Chat and switch to **Agent** mode.
|
||||
|
||||
1. Run this prompt:
|
||||
|
||||
> 
|
||||
>
|
||||
> ```prompt
|
||||
> Please create and publish a new Git branch called build-octofit-app
|
||||
> ```
|
||||
|
||||
1. Confirm the active branch is `build-octofit-app`.
|
||||
|
||||
1. Wait for Mona to post the next step.
|
||||
|
||||
<details>
|
||||
<summary>Having trouble? 🤷</summary><br/>
|
||||
|
||||
- Make sure the branch name is exactly `build-octofit-app`.
|
||||
- Make sure the branch is pushed to your repository.
|
||||
|
||||
</details>
|
||||
@@ -0,0 +1,40 @@
|
||||
## Step 2: Initialize the modern multi-tier application stack
|
||||
|
||||
> [!NOTE]
|
||||
> **Behind the scenes:** This exercise uses custom instruction files to guide Copilot for this multi-tier application setup.
|
||||
|
||||
In this step, you will initialize a modern **multi-tier application** foundation:
|
||||
|
||||
- Create `octofit-tracker/frontend` and `octofit-tracker/backend`.
|
||||
- Initialize React 19 (presentation tier) with Vite.
|
||||
- Initialize a Node.js + Express + TypeScript backend (logic tier).
|
||||
- Add MongoDB support with Mongoose (data tier).
|
||||
|
||||
### :keyboard: Activity: Initialize frontend and backend package manifests
|
||||
|
||||
> 
|
||||
>
|
||||
> ```prompt
|
||||
> Let's initialize the OctoFit Tracker modern multi-tier application.
|
||||
>
|
||||
> Follow the instructions exactly and execute step-by-step:
|
||||
> - Create octofit-tracker/frontend and octofit-tracker/backend
|
||||
> - Initialize React 19 in the frontend with Vite
|
||||
> - Initialize backend package.json for Node.js + Express + TypeScript
|
||||
> - Add mongoose for MongoDB data access
|
||||
> - Keep ports at 5173 (frontend), 8000 (backend), and 27017 (MongoDB)
|
||||
> ```
|
||||
|
||||
1. Commit and push to `build-octofit-app`.
|
||||
|
||||
1. Wait for Mona to check your work and post the next lesson.
|
||||
|
||||
<details>
|
||||
<summary>Having trouble? 🤷</summary><br/>
|
||||
|
||||
Check these files exist and include expected dependencies:
|
||||
|
||||
- `octofit-tracker/frontend/package.json` with React 19.
|
||||
- `octofit-tracker/backend/package.json` with `express` and `mongoose`.
|
||||
|
||||
</details>
|
||||
@@ -0,0 +1,44 @@
|
||||
## Step 3: Build the logic and data tiers for the multi-tier application
|
||||
|
||||
> [!NOTE]
|
||||
> **Behind the scenes:** Custom instructions and prompt files guide Copilot while building the logic and data tiers.
|
||||
|
||||
In this step, you will implement the backend of the **multi-tier application**:
|
||||
|
||||
- Configure MongoDB connection for `octofit_db`.
|
||||
- Create Express routes for users, teams, activities, leaderboard, and workouts.
|
||||
- Add a seed script to populate test data.
|
||||
|
||||
### :keyboard: Activity: Scaffold the logic tier
|
||||
|
||||
Use this prompt file:
|
||||
|
||||
> 
|
||||
>
|
||||
> ```prompt
|
||||
> /create-express-logic-tier
|
||||
> ```
|
||||
|
||||
### :keyboard: Activity: Configure and seed the data tier
|
||||
|
||||
Use this prompt file:
|
||||
|
||||
> 
|
||||
>
|
||||
> ```prompt
|
||||
> /init-populate-octofit_db
|
||||
> ```
|
||||
|
||||
1. Commit and push your backend changes.
|
||||
|
||||
1. Wait for Mona to validate and unlock the next step.
|
||||
|
||||
<details>
|
||||
<summary>Having trouble? 🤷</summary><br/>
|
||||
|
||||
Confirm these files include expected content:
|
||||
|
||||
- `octofit-tracker/backend/src/config/database.ts` includes `octofit_db` and `mongoose`.
|
||||
- `octofit-tracker/backend/src/scripts/seed.ts` includes a seed command description.
|
||||
|
||||
</details>
|
||||
@@ -0,0 +1,35 @@
|
||||
## Step 4: Wire API hosting for the multi-tier application
|
||||
|
||||
In this step, you will finalize API hosting for your **multi-tier application**:
|
||||
|
||||
- Keep backend API on port `8000`.
|
||||
- Build Codespaces-aware API URL behavior using `$CODESPACE_NAME`.
|
||||
- Validate endpoints with `curl`.
|
||||
|
||||
### :keyboard: Activity: Configure API base URL and host support
|
||||
|
||||
> 
|
||||
>
|
||||
> ```prompt
|
||||
> Let's configure the Node.js API for Codespaces and localhost.
|
||||
>
|
||||
> - Backend runs on port 8000
|
||||
> - Build API base URL with $CODESPACE_NAME when available:
|
||||
> https://$CODESPACE_NAME-8000.app.github.dev
|
||||
> - Keep localhost support when $CODESPACE_NAME is not set
|
||||
> - Verify /api/users and /api/activities with curl
|
||||
> ```
|
||||
|
||||
1. Commit and push your changes to `build-octofit-app`.
|
||||
|
||||
1. Wait for Mona to validate and share the next step.
|
||||
|
||||
<details>
|
||||
<summary>Having trouble? 🤷</summary><br/>
|
||||
|
||||
Verify `octofit-tracker/backend/src/server.ts` includes:
|
||||
|
||||
- `CODESPACE_NAME`
|
||||
- `-8000.app.github.dev`
|
||||
|
||||
</details>
|
||||
@@ -0,0 +1,53 @@
|
||||
## 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>
|
||||
@@ -0,0 +1,22 @@
|
||||
## Step 6: Use Copilot on your multi-tier application pull request
|
||||
|
||||
Great job! You have implemented a modern **multi-tier application** with Copilot agent mode.
|
||||
|
||||
Now create and complete your pull request workflow.
|
||||
|
||||
### :keyboard: Activity: Open, summarize, and review your PR
|
||||
|
||||
1. Open your repository in a browser.
|
||||
|
||||
1. Create a pull request with:
|
||||
- **base:** `main`
|
||||
- **compare:** `build-octofit-app`
|
||||
- **title:** `Modernize OctoFit multi-tier application stack`
|
||||
|
||||
1. Optionally use **Copilot Summary** for the PR description.
|
||||
|
||||
1. Optionally request a **Copilot code review**.
|
||||
|
||||
1. Merge the pull request.
|
||||
|
||||
1. Wait for Mona to post the final review.
|
||||
@@ -0,0 +1,20 @@
|
||||
## Review
|
||||
|
||||
_Congratulations, you've completed this exercise!_
|
||||
|
||||
You built and modernized a **multi-tier application** using GitHub Copilot agent mode.
|
||||
|
||||
### What you accomplished
|
||||
|
||||
- Prepared a Codespaces environment for a multi-tier application.
|
||||
- Implemented a React 19 presentation tier.
|
||||
- Built a Node.js + Express + TypeScript logic tier.
|
||||
- Connected a MongoDB data tier with Mongoose.
|
||||
- Practiced pull request summarization and review with Copilot.
|
||||
|
||||
### What's next?
|
||||
|
||||
- Add authentication and role-based authorization.
|
||||
- Add tests for API routes and React components.
|
||||
- Add CI checks for linting and automated tests.
|
||||
- Explore other GitHub Skills exercises.
|
||||
Reference in New Issue
Block a user