139 |
140 | 141 | If you don't get feedback, here are some things to check: 142 | 143 | - Make sure your commit changes were made for the following files to the branch `build-octofit-app` and pushed/synchronized to GitHub: 144 | - `octofit-tracker/frontend/src/components/Activities.js` and it contains `-8000.app.github.dev/api/activities/` 145 | - `octofit-tracker/frontend/src/components/Leaderboard.js` and it contains `-8000.app.github.dev/api/leaderboard/` 146 | - `octofit-tracker/frontend/src/components/Teams.js` and it contains `-8000.app.github.dev/api/teams/` 147 | - `octofit-tracker/frontend/src/components/Users.js` and it contains `-8000.app.github.dev/api/users/` 148 | - `octofit-tracker/frontend/src/components/Workouts.js` and it contains `-8000.app.github.dev/api/workouts/` 149 | - If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed. 150 | 151 |
152 |
--------------------------------------------------------------------------------
/.github/steps/6-copilot-on-github.md:
--------------------------------------------------------------------------------
1 | ## Step 6: Using GitHub Copilot within a pull request
2 |
3 | Congratulations! You are finished with coding for this exercise (and VS Code). Now it's time to merge our work. :tada: To wrap up, let's learn about two limited-access Copilot features that can speed up our pull requests!
4 |
5 | #### Copilot Pull Request Summaries
6 |
7 | Typically, you would review your notes and commit messages then summarize them for your pull request description. This may take some time, especially if commit messages are inconsistent or code is not documented well. Fortunately, Copilot can consider all changes in the pull request and provide the important highlights, and with references too!
8 |
9 | > [!NOTE]
10 | > This is unavailable with the **Copilot Free** tier. [[docs]](https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/using-github-copilot-for-pull-requests/creating-a-pull-request-summary-with-github-copilot)
11 |
12 | #### Copilot Review
13 |
14 | More eyes on our work is always useful so let's ask Copilot to do a first pass before we do a normal peer review process. Copilot is great at catching common mistakes that can be fixed by simple adjustment, but please remember to use it responsibly.
15 |
16 | > [!NOTE]
17 | > This is in **Public Preview** for organizations. [[docs]](https://docs.github.com/en/copilot/using-github-copilot/code-review/using-copilot-code-review)
18 |
19 | ### :keyboard: Activity: Summarize and review a PR with Copilot
20 |
21 | Both **pull request summaries** and **Copilot review** have limited access, so this activity is mostly optional. If you have access, Mona will gladly check your work though! If not, you can skip the optional steps.
22 |
23 | 1. In a web browser, open another tab and navigate to your exercise repository.
24 |
25 | 1. You might notice a **notification banner** suggesting to create a new pull request. Click that or use the **Pull Requests** tab at the top to create a new pull request. Please use the following details:
26 |
27 | - **base:** `main`
28 | - **compare:** `build-octofit-app`
29 | - **title:** `Add registration validation and more activities`
30 |
31 | 1. (Optional) In the **Add a description** area, enter edit mode if needed, then click the **Copilot actions** icon and **Summary** action. After a moment, Copilot will add a description. :memo:
32 |
33 | Having trouble? 🤷
140 | 141 | If you don't get feedback, here are some things to check: 142 | 143 | - Make sure your commit changes were made for the following files to the branch `build-octofit-app` and pushed/synchronized to GitHub: 144 | - `octofit-tracker/frontend/src/components/Activities.js` and it contains `-8000.app.github.dev/api/activities/` 145 | - `octofit-tracker/frontend/src/components/Leaderboard.js` and it contains `-8000.app.github.dev/api/leaderboard/` 146 | - `octofit-tracker/frontend/src/components/Teams.js` and it contains `-8000.app.github.dev/api/teams/` 147 | - `octofit-tracker/frontend/src/components/Users.js` and it contains `-8000.app.github.dev/api/users/` 148 | - `octofit-tracker/frontend/src/components/Workouts.js` and it contains `-8000.app.github.dev/api/workouts/` 149 | - If Mona found a mistake, simply make a correction and push your changes again. Mona will check your work as many times as needed. 150 | 151 |
6 |
7 | Here's a recap of your accomplishments:
8 |
9 | - Set up your GitHub Codespace and environment.
10 | - Learned how to use Copilot inline suggestions, Chat, and Edits.
11 | - Used Copilot to generate commit messages and pull request summaries.
12 | - Learned how to request Copilot to review your code.
13 |
14 | ### What's next?
15 |
16 | - Continue working on the project
17 | - Use Copilot to add an ability for login and authentication.
18 | - Keep evolving the look of the application through app.css.
19 | - Use Copilot to fix issues found during a pull request review.
20 | - Use Copilot to generate tests and documentation.
21 | - Use Copilot with different models.
22 | - Check out the other [GitHub Skills exercises](https://skills.github.com).
23 | - Try building your first [GitHub Copilot Extension](https://github.com/skills/your-first-extension-for-github-copilot)
24 |
25 | Check out these resources to learn more about GitHub Copilot:
26 |
27 | - Take a look at this blog on GitHub Copilot agent mode [Mastering GitHub Copilot: When to use AI agent mode](https://github.blog/ai-and-ml/github-copilot/mastering-github-copilot-when-to-use-ai-agent-mode/)
28 | - Are you not getting the responses you want from Copilot? [Learn prompt engineering](https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/prompt-engineering-for-copilot-chat)
29 | - Explore GitHub Copilot [Slash Commands](https://docs.github.com/en/copilot/using-github-copilot/copilot-chat/github-copilot-chat-cheat-sheet?tool=vscode).
30 | - See what other features are available [GitHub Copilot Features](https://docs.github.com/en/copilot/about-github-copilot/github-copilot-features).
31 | - Take a look at the [GitHub Copilot Documentation](https://docs.github.com/en/copilot).
--------------------------------------------------------------------------------
/.github/workflows/0-start-exercise.yml:
--------------------------------------------------------------------------------
1 | name: Step 0 # Start Exercise
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 |
8 | permissions:
9 | contents: write
10 | actions: write
11 | issues: write
12 |
13 | env:
14 | EXERCISE_NAME: "Build Applications with GitHub Copilot Agent Mode"
15 | INTRO_MESSAGE: "Welcome to the exciting world of GitHub Copilot agent mode! 🚀 In this exercise, you'll unlock the potential of this AI-powered coding assistant to accelerate your development process. Let's dive in and have some fun exploring the future of coding together! 💻✨"
16 | STEP_1_FILE: ".github/steps/1-preparing.md"
17 |
18 | jobs:
19 | disable_workflows:
20 | name: Disable workflows
21 | runs-on: ubuntu-latest
22 |
23 | steps:
24 | - name: Checkout
25 | uses: actions/checkout@v4
26 |
27 | - name: Disable all workflows
28 | run: |
29 | workflows=$(git ls-files | grep -E '\.yml$|\.yaml$')
30 | for workflow in $workflows; do
31 | workflow_name=$(basename $workflow)
32 | gh workflow disable "$workflow_name" || true
33 | done
34 | env:
35 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
36 |
37 | start_exercise:
38 | if: |
39 | !github.event.repository.is_template
40 | name: Start Exercise
41 | runs-on: ubuntu-latest
42 |
43 | steps:
44 | - name: Checkout
45 | uses: actions/checkout@v4
46 |
47 | - name: Configure Git user
48 | run: |
49 | git config user.name github-actions[bot]
50 | git config user.email github-actions[bot]@users.noreply.github.com
51 |
52 | - name: Deactivate 'Start Exercise' button
53 | run: |
54 | # Remove href from 'Start Exercise' button
55 | target='id="copy-exercise"[^>]*href="[^"]*"'
56 | replacement='id="copy-exercise"'
57 | sed -i "s|$target|$replacement|g" README.md
58 |
59 | # Change color from green to gray
60 | target=Copy_Exercise-008000
61 | replacement=Copy_Exercise-AAA
62 | sed -i "s|$target|$replacement|g" README.md
63 |
64 | - name: Activate 'Start Exercise' button
65 | run: |
66 | # Add link to issue
67 | target='id="start-exercise"'
68 | replacement='id="start-exercise" href="../../issues/1"'
69 | sed -i "s|$target|$replacement|g" README.md
70 |
71 | # Change color from gray to green
72 | target=Start_Exercise-AAA
73 | replacement=Start_Exercise-008000
74 | sed -i "s|$target|$replacement|g" README.md
75 |
76 | - name: Replace relative links in readme
77 | run: |
78 | target=../../
79 | replacement=https://github.com/${{ github.repository }}/
80 | sed -i "s|$target|$replacement|g" README.md
81 |
82 | - name: Push README changes
83 | run: |
84 | git add README.md
85 | git commit --message="Start exercise"
86 | git push
87 | env:
88 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
89 |
90 | create_exercise:
91 | if: |
92 | !github.event.repository.is_template
93 | name: Create exercise issue
94 | runs-on: ubuntu-latest
95 |
96 | outputs:
97 | issue-url: ${{ steps.create-issue.outputs.ISSUE_URL }}
98 |
99 | steps:
100 | - name: Checkout
101 | uses: actions/checkout@v4
102 |
103 | - name: Get response templates
104 | uses: actions/checkout@v4
105 | with:
106 | repository: skills/response-templates
107 | path: skills-response-templates
108 |
109 | - name: Configure Git user
110 | run: |
111 | git config user.name github-actions[bot]
112 | git config user.email github-actions[bot]@users.noreply.github.com
113 |
114 | - name: Build welcome message from template
115 | id: build-issue-description
116 | uses: skills/action-text-variables@v1
117 | with:
118 | template-file: skills-response-templates/step-feedback/welcome.md
119 | template-vars: |
120 | title=${{ env.EXERCISE_NAME }}
121 | login=${{ github.actor }}
122 | intro_message=${{ env.INTRO_MESSAGE }}
123 |
124 | - name: Create issue - add welcome message
125 | id: create-issue
126 | run: |
127 | issue_url=$(gh issue create \
128 | --title "Exercise: $EXERCISE_NAME" \
129 | --body "$ISSUE_BODY")
130 | echo "ISSUE_URL=$issue_url" >> "$GITHUB_OUTPUT"
131 | env:
132 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
133 | ISSUE_BODY: ${{ steps.build-issue-description.outputs.updated-text }}
134 |
135 | post_next_step_content:
136 | name: Post next step content
137 | runs-on: ubuntu-latest
138 | needs: [create_exercise]
139 | env:
140 | ISSUE_URL: ${{ needs.create_exercise.outputs.issue-url }}
141 |
142 | steps:
143 | - name: Checkout
144 | uses: actions/checkout@v4
145 |
146 | - name: Get response templates
147 | uses: actions/checkout@v4
148 | with:
149 | repository: skills/response-templates
150 | path: skills-response-templates
151 |
152 | - name: Configure Git user
153 | run: |
154 | git config user.name github-actions[bot]
155 | git config user.email github-actions[bot]@users.noreply.github.com
156 |
157 | - name: Build comment - add step content
158 | id: build-comment
159 | uses: skills/action-text-variables@v1
160 | with:
161 | template-file: ${{ env.STEP_1_FILE }}
162 | template-vars: |
163 | login=${{ github.actor }}
164 | full_repo_name=${{ github.repository }}
165 |
166 | - name: Create comment - add step content
167 | run: |
168 | gh issue comment "$ISSUE_URL" \
169 | --body "$ISSUE_BODY"
170 | env:
171 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
172 | ISSUE_BODY: ${{ steps.build-comment.outputs.updated-text }}
173 |
174 | - name: Create comment - watching for progress
175 | run: |
176 | gh issue comment "$ISSUE_URL" \
177 | --body-file "skills-response-templates/step-feedback/watching-for-progress.md"
178 | env:
179 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
180 |
181 | - name: Disable current workflow and enable next one
182 | run: |
183 | # gh workflow enable "Step 0" # Already disabled
184 | gh workflow enable "Step 1"
185 | env:
186 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
187 |
--------------------------------------------------------------------------------
/.github/workflows/1-preparing.yml:
--------------------------------------------------------------------------------
1 | name: Step 1 # Preparing to make your extension
2 |
3 | on:
4 | push:
5 | branches:
6 | - "build-octofit-app"
7 |
8 | permissions:
9 | contents: read
10 | actions: write
11 | issues: write
12 |
13 | env:
14 | STEP_2_FILE: ".github/steps/2-application-initial-setup.md"
15 |
16 | jobs:
17 | find_exercise:
18 | name: Find Exercise Issue
19 | uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.1.0
20 |
21 | check_step_work:
22 | name: Check step work
23 | runs-on: ubuntu-latest
24 | needs: [find_exercise]
25 | env:
26 | ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }}
27 |
28 | steps:
29 | - name: Checkout
30 | uses: actions/checkout@v4
31 |
32 | - name: Get response templates
33 | uses: actions/checkout@v4
34 | with:
35 | repository: skills/response-templates
36 | path: skills-response-templates
37 |
38 | - name: Update comment - checking work
39 | run: |
40 | gh issue comment "$ISSUE_URL" \
41 | --body-file skills-response-templates/step-feedback/checking-work.md \
42 | --edit-last
43 | env:
44 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
45 |
46 | # START: Check practical exercise
47 |
48 | # Nothing to verify. Creating the branch is enough for now.
49 | # In a future update, we will check that the codepsace is running and that the website is visible.
50 |
51 | # END: Check practical exercise
52 |
53 | - name: Build message - step finished
54 | id: build-message-step-finish
55 | uses: skills/action-text-variables@v1
56 | with:
57 | template-file: skills-response-templates/step-feedback/step-finished-prepare-next-step.md
58 | template-vars: |
59 | next_step_number=2
60 |
61 | - name: Update comment - step finished
62 | run: |
63 | gh issue comment "$ISSUE_URL" \
64 | --body "$ISSUE_BODY" \
65 | --edit-last
66 | env:
67 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
68 | ISSUE_BODY: ${{ steps.build-message-step-finish.outputs.updated-text }}
69 |
70 | post_next_step_content:
71 | name: Post next step content
72 | needs: [find_exercise, check_step_work]
73 | runs-on: ubuntu-latest
74 | env:
75 | ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }}
76 |
77 | steps:
78 | - name: Checkout
79 | uses: actions/checkout@v4
80 |
81 | - name: Get response templates
82 | uses: actions/checkout@v4
83 | with:
84 | repository: skills/response-templates
85 | path: skills-response-templates
86 |
87 | - name: Create comment - add step content
88 | run: |
89 | gh issue comment "$ISSUE_URL" \
90 | --body-file "$STEP_2_FILE"
91 | env:
92 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
93 |
94 | - name: Create comment - watching for progress
95 | run: |
96 | gh issue comment "$ISSUE_URL" \
97 | --body-file skills-response-templates/step-feedback/watching-for-progress.md
98 | env:
99 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
100 |
101 | - name: Disable current workflow and enable next one
102 | run: |
103 | gh workflow disable "Step 1"
104 | gh workflow enable "Step 2"
105 | env:
106 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--------------------------------------------------------------------------------
/.github/workflows/2-application-initial-setup.yml:
--------------------------------------------------------------------------------
1 | name: Step 2 # octofit-tracker application initial setup
2 |
3 | on:
4 | push:
5 | branches:
6 | - "build-octofit-app"
7 | paths:
8 | - "octofit-tracker/backend/requirements.txt"
9 |
10 | permissions:
11 | contents: read
12 | actions: write
13 | issues: write
14 |
15 | env:
16 | STEP_3_FILE: ".github/steps/3-database-django-project-setup.md"
17 |
18 | jobs:
19 | find_exercise:
20 | name: Find Exercise Issue
21 | uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.1.0
22 |
23 | check_step_work:
24 | name: Check step work
25 | runs-on: ubuntu-latest
26 | needs: [find_exercise]
27 | env:
28 | ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }}
29 |
30 | steps:
31 | - name: Checkout
32 | uses: actions/checkout@v4
33 |
34 | - name: Get response templates
35 | uses: actions/checkout@v4
36 | with:
37 | repository: skills/response-templates
38 | path: skills-response-templates
39 |
40 | - name: Update comment - checking work
41 | run: |
42 | gh issue comment "$ISSUE_URL" \
43 | --body-file skills-response-templates/step-feedback/checking-work.md \
44 | --edit-last
45 | env:
46 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
47 |
48 | # START: Check practical exercise
49 |
50 | # Search for the comment about registration validation
51 | - name: Check file and contents of 'octofit-tracker/backend/requirements.txt'
52 | run: |
53 | # File and expected Python requirement
54 | file="octofit-tracker/backend/requirements.txt"
55 | keyphrase="Django==4.1"
56 |
57 | # Fail the workflow if the file content is missing
58 | if ! grep -q "$keyphrase" "$file"; then
59 | message="It seems you didn't check in your octofit-tracker/backend/requirements.txt with the Python Django requirement. Please try again."
60 | gh issue comment "$ISSUE_URL" \
61 | --body "$message" \
62 | --edit-last
63 | exit 1
64 | fi
65 | env:
66 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
67 |
68 | # END: Check practical exercise
69 |
70 | - name: Build message - step finished
71 | id: build-message-step-finish
72 | uses: skills/action-text-variables@v1
73 | with:
74 | template-file: skills-response-templates/step-feedback/step-finished-prepare-next-step.md
75 | template-vars: |
76 | next_step_number=3
77 |
78 | - name: Update comment - step finished
79 | run: |
80 | gh issue comment "$ISSUE_URL" \
81 | --body "$ISSUE_BODY" \
82 | --edit-last
83 | env:
84 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
85 | ISSUE_BODY: ${{ steps.build-message-step-finish.outputs.updated-text }}
86 |
87 | post_next_step_content:
88 | name: Post next step content
89 | needs: [find_exercise, check_step_work]
90 | runs-on: ubuntu-latest
91 | env:
92 | ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }}
93 |
94 | steps:
95 | - name: Checkout
96 | uses: actions/checkout@v4
97 |
98 | - name: Get response templates
99 | uses: actions/checkout@v4
100 | with:
101 | repository: skills/response-templates
102 | path: skills-response-templates
103 |
104 | - name: Create comment - add step content
105 | run: |
106 | gh issue comment "$ISSUE_URL" \
107 | --body-file "$STEP_3_FILE"
108 | env:
109 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
110 |
111 | - name: Create comment - watching for progress
112 | run: |
113 | gh issue comment "$ISSUE_URL" \
114 | --body-file skills-response-templates/step-feedback/watching-for-progress.md
115 | env:
116 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
117 |
118 | - name: Disable current workflow and enable next one
119 | run: |
120 | gh workflow disable "Step 2"
121 | gh workflow enable "Step 3"
122 | env:
123 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
124 |
--------------------------------------------------------------------------------
/.github/workflows/3-database-django-project-setup.yml:
--------------------------------------------------------------------------------
1 | name: Step 3 # Django project setup and database test data population
2 |
3 | on:
4 | push:
5 | branches:
6 | - "build-octofit-app"
7 | paths:
8 | - "octofit-tracker/backend/octofit_tracker/**"
9 |
10 | permissions:
11 | contents: read
12 | actions: write
13 | issues: write
14 |
15 | env:
16 | STEP_4_FILE: ".github/steps/4-setup-django-rest-framework.md"
17 |
18 | jobs:
19 | find_exercise:
20 | name: Find Exercise Issue
21 | uses: skills/exercise-toolkit/.github/workflows/find-exercise-issue.yml@v0.1.0
22 |
23 | check_step_work:
24 | name: Check step work
25 | runs-on: ubuntu-latest
26 | needs: [find_exercise]
27 | env:
28 | ISSUE_URL: ${{ needs.find_exercise.outputs.issue-url }}
29 |
30 | steps:
31 | - name: Checkout
32 | uses: actions/checkout@v4
33 |
34 | - name: Get response templates
35 | uses: actions/checkout@v4
36 | with:
37 | repository: skills/response-templates
38 | path: skills-response-templates
39 |
40 | - name: Update comment - checking work
41 | run: |
42 | gh issue comment "$ISSUE_URL" \
43 | --body-file skills-response-templates/step-feedback/checking-work.md \
44 | --edit-last
45 | env:
46 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
47 |
48 | # START: Check practical exercise
49 |
50 | - name: Check octofit_db and djongo has been added to settings.py and populate_db.py has been created
51 | id: check-user-work
52 | run: |
53 | # Checks to perform
54 | checks='{
55 | "settings_py": {
56 | "name": "settings.py",
57 | "passed": true,
58 | "message": ""
59 | },
60 | "populate_db": {
61 | "name": "populate_db.py",
62 | "passed": true,
63 | "message": ""
64 | }
65 | }'
66 |
67 | # Check for octofit_db info in settings.py
68 | file="octofit-tracker/backend/octofit_tracker/settings.py"
69 | keyphrase='octofit_db'
70 | minimum_occurences=1
71 | found_occurences=$(grep -o "$keyphrase" "$file" | wc -l)
72 | if [ "$found_occurences" -lt "$minimum_occurences" ]; then
73 | checks=$(echo $checks | jq '.settings_py.passed = false')
74 | checks=$(echo $checks | jq '.settings_py.message = "Please use Copilot agent mode to add the name of the database octofit_db to settings.py."')
75 | fi
76 |
77 | # Check for djongo info in settings.py
78 | file="octofit-tracker/backend/octofit_tracker/settings.py"
79 | keyphrase='djongo'
80 | minimum_occurences=2
81 | found_occurences=$(grep -o "$keyphrase" "$file" | wc -l)
82 | if [ "$found_occurences" -lt "$minimum_occurences" ]; then
83 | checks=$(echo $checks | jq '.settings_py.passed = false')
84 | checks=$(echo $checks | jq '.settings_py.message = "Please use Copilot agent mode to add the database engine djongo to settings.py."')
85 | fi
86 |
87 | # Check for 'test data' in populate_db.py
88 | file="octofit-tracker/backend/octofit_tracker/management/commands/populate_db.py"
89 | keyphrase='test data for'
90 | minimum_occurences=1
91 | found_occurences=$(grep -o "$keyphrase" "$file" | wc -l)
92 | if [ "$found_occurences" -lt "$minimum_occurences" ]; then
93 | checks=$(echo $checks | jq '.populate_db.passed = false')
94 | checks=$(echo $checks | jq '.populate_db.message = "Please use Copilot agent mode to add test data with the file populate_db.py."')
95 | fi
96 |
97 | # Verify all checks passed
98 | passed=$(echo $checks | jq '. | all(.passed?)')
99 |
100 | # Flatten to an array for returning. Allows iteration during rendering.
101 | results=$(echo $checks | jq 'to_entries | map({name: .key} + .value)')
102 |
103 | # Save pass status to output
104 | echo "passed=$passed" >> $GITHUB_OUTPUT
105 |
106 | # Save results to output
107 | echo 'results<
34 |
35 |
36 | 2. In the new tab, most of the fields will automatically fill in for you.
37 |
38 | - For owner, choose your personal account or an organization to host the repository.
39 | - We recommend creating a public repository, as private repositories will use [Actions minutes](https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions).
40 | - Scroll down and click the **Create repository** button at the bottom of the form.
41 |
42 | 3. After your new repository is created, wait about 20 seconds for the course to be prepared.
43 |
44 | - The **Copy Exercise** button will deactivate, changing to gray.
45 | - The **Start Exercise** button will activate, changing to green.
46 |
47 | 4. Click **Start Exercise**. Follow the step-by-step instructions and feedback will be provided as you progress.
48 |
49 |
50 | 
51 |
52 |
53 |
54 | > ❕ **Important:** The **Start Exercise** button will activate after copying the repository. You will probably need to refresh the page.
55 |
56 | ---
57 |
58 | Get help: [Post in our discussion board](https://github.com/orgs/skills/discussions/categories/introduction-to-github) • [Review the GitHub status page](https://www.githubstatus.com/)
59 |
60 | © 2025 GitHub • [Code of Conduct](https://www.contributor-covenant.org/version/2/1/code_of_conduct/code_of_conduct.md) • [MIT License](https://gh.io/mit)
61 |
--------------------------------------------------------------------------------
/docs/mona-high-school-fitness-tracker.md:
--------------------------------------------------------------------------------
1 | # Getting started - app frontend and backend creation
2 |
3 | ## Explain to GitHub Copilot the goals and steps
4 |
5 | ```text
6 | I want to build an monafit Tracker app that will include the following:
7 |
8 | * User authentication and profiles
9 | * Activity logging and tracking
10 | * Team creation and management
11 | * Competitive leader board
12 | * Personalized workout suggestions
13 |
14 | It should be in one app
15 |
16 | generate instructions in this order
17 |
18 | 1. Create the frontend and backend in the monafit-tracker directory structure of this repository in one command
19 | 2. Setup backend python venv and create a monafit-tracker/backend/requirements.txt file
20 | 3. The monafit-tracker/backend directory will store the django project and app with the name monafit-tracker
21 | 4. The Django project monafit-tracker directory will have all the backend components for the app
22 | 5. Create the django app directly in the directory monafit_tracker/backend
23 | 6. Setup the monafit-tracker/frontend directory will store the react app with no subdirectories
24 | 7. Install react framework
25 | 8. Install bootstrap and import it
26 | 9. Commands to install mongodb via 'apt-get'
27 | 10. Commands start mongodb with the 'sudo service mongodb start' and 'sudo service mongodb status'
28 |
29 | The directory tree for the monafit Tracker App
30 | monafit-tracker/
31 | ├── backend/
32 | │ ├── venv/
33 | │ ├── monafit_tracker/
34 | │ │ ├── __init__.py
35 | │ │ ├── models.py
36 | │ │ ├── serializers.py
37 | │ │ ├── settings.py
38 | │ │ ├── views.py
39 | │ │ ├── urls.py
40 | │ │ ├── wsgi.py
41 | │ │ └── asgi.py
42 | └── frontend/
43 | ├── node_modules/
44 | ├── public/
45 | ├── src/
46 | ├── package.json
47 | └── README.md
48 |
49 | Create a requirements.txt with the following Python required packages
50 |
51 | Django==4.1
52 | djangorestframework==3.14.0
53 | django-allauth==0.51.0
54 | django-cors-headers==4.5.0
55 | dj-rest-auth
56 | djongo==1.3.6
57 | pymongo==3.12
58 | sqlparse==0.2.4
59 | stack-data==0.6.3
60 | sympy==1.12
61 | tenacity==9.0.0
62 | terminado==0.18.1
63 | threadpoolctl==3.5.0
64 | tinycss2==1.3.0
65 | tornado==6.4.1
66 | traitlets==5.14.3
67 | types-python-dateutil==2.9.0.20240906
68 | typing_extensions==4.9.0
69 | tzdata==2024.2
70 | uri-template==1.3.0
71 | urllib3==2.2.3
72 | wcwidth==0.2.13
73 | webcolors==24.8.0
74 | webencodings==0.5.1
75 | websocket-client==1.8.0
76 |
77 | All of the backend django app will be in monafit_tracker and do NOT create another app of any kind
78 |
79 | Use a Python virtual environment and install all python dependencies from file monafit-tracker/backend/requirements.txt in this workspace
80 |
81 | The monafit-tracker/backend/requirements.txt already contains all Django requirements. Django, djongo, sqlparse
82 |
83 | Layout the directory structure with no redundant backend and frontend subdirectories
84 |
85 | Use bootstrap for the frontend
86 |
87 | Let's think about this step by step
88 | ```
89 |
90 | ### Commands to use to create the monafit Tracker structure
91 |
92 | ```bash
93 | mkdir -p monafit-tracker/{backend,frontend}
94 |
95 | python3 -m venv monafit-tracker/backend/venv
96 | source monafit-tracker/backend/venv/bin/activate
97 | pip install -r monafit-tracker/backend/requirements.txt
98 |
99 | django-admin startproject monafit_tracker monafit-tracker/backend
100 |
101 | npx create-react-app monafit-tracker/frontend
102 |
103 | npm install bootstrap monafit-tracker/frontend
104 |
105 | echo "import 'bootstrap/dist/css/bootstrap.min.css';" >> src/index.js
106 |
107 | sudo apt-get update && sudo apt-get install -y mongodb
108 | sudo service mongodb start && sudo service mongodb status
109 | ```
110 |
111 | ## Initialize the database, setup database and install apps in settings.py, models, serializers, urls, and views
112 |
113 | Type the following prompt in GitHub Copilot Chat:
114 |
115 | ```text
116 | In our next steps lets think step by step and setup the following in this order
117 |
118 | 1. Initialize the mongo monafit_db database and create a correct table structure for users, teams, activities, leaderboard, and workouts collections
119 | 2. Make sure there is a unique id for primary key for the user collection
120 | ex. db.users.createIndex({ "email": 1 }, { unique: true })
121 | 3. settings.py in our django project for mongodb monafit_db database including localhost and the port
122 | 4. settings.py in our django project setup for all installed apps. ex djongo, monafit_tracker, rest_framework
123 | 5. In monafit_tracker project setup and use command touch models.py, serializers.py, urls.py, and views.py for users, teams, activity, leaderboard, and workouts
124 | 6. Generate code for models.py, serializers.py, and views.py and
125 | 7. make sure urls.py has a root, admin, and api endpoints
126 | urlpatterns = [
127 | path('', api_root, name='api-root'), # Root endpoint
128 | path('admin/', admin.site.urls), # Admin endpoint
129 | path('api/', include(router.urls)), # API endpoint
130 | ]
131 | ```
132 |
133 | ### MongoDB commands to initialize and setup `monafit_db`
134 |
135 | ```bash
136 | mongo --eval "db = db.getSiblingDB('monafit_db'); db.createCollection('users'); db.createCollection('teams'); db.createCollection('activity'); db.createCollection('leaderboard'); db.createCollection('workouts'); db.users.createIndex({ email: 1 }, { unique: true }); db.teams.createIndex({ name: 1 }, { unique: true }); db.activity.createIndex({ activity_id: 1 }, { unique: true }); db.leaderboard.createIndex({ leaderboard_id: 1 }, { unique: true }); db.workouts.createIndex({ workout_id: 1 }, { unique: true });"
137 | ```
138 |
139 | ### Check the database collections
140 |
141 | ```bash
142 | mongo --eval "db = db.getSiblingDB('monafit_db'); printjson(db.getCollectionNames());"
143 | ```
144 |
145 | ### Sample settings.py
146 |
147 | ```json
148 | # FILE: monafit_tracker/settings.py
149 |
150 | """
151 | Django settings for monafit_tracker project.
152 |
153 | Generated by 'django-admin startproject' using Django 4.1.
154 |
155 | For more information on this file, see
156 | https://docs.djangoproject.com/en/4.1/topics/settings/
157 |
158 | For the full list of settings and their values, see
159 | https://docs.djangoproject.com/en/4.1/ref/settings/
160 | """
161 |
162 | from pathlib import Path
163 |
164 | # Build paths inside the project like this: BASE_DIR / 'subdir'.
165 | BASE_DIR = Path(__file__).resolve().parent.parent
166 |
167 |
168 | # Quick-start development settings - unsuitable for production
169 | # See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/
170 |
171 | # SECURITY WARNING: keep the secret key used in production secret!
172 | SECRET_KEY = "django-insecure-25rsll_s*6ml5lv4l$51z6x!y5u_k!11f!hf^1&%q!$syk=ja3"
173 |
174 | # SECURITY WARNING: don't run with debug turned on in production!
175 | DEBUG = True
176 |
177 | ALLOWED_HOSTS = ['localhost', '127.0.0.1', 'congenial-robot-pwrx4jxpp9c6vjv-8000.app.github.dev']
178 |
179 |
180 | # Application definition
181 |
182 | INSTALLED_APPS = [
183 | "django.contrib.admin",
184 | "django.contrib.auth",
185 | "django.contrib.contenttypes",
186 | "django.contrib.sessions",
187 | "django.contrib.messages",
188 | "django.contrib.staticfiles",
189 | 'rest_framework',
190 | 'djongo',
191 | 'corsheaders',
192 | 'monafit_tracker',
193 | ]
194 |
195 | MIDDLEWARE = [
196 | "django.middleware.security.SecurityMiddleware",
197 | "django.contrib.sessions.middleware.SessionMiddleware",
198 | "django.middleware.common.CommonMiddleware",
199 | "django.middleware.csrf.CsrfViewMiddleware",
200 | "django.contrib.auth.middleware.AuthenticationMiddleware",
201 | "django.contrib.messages.middleware.MessageMiddleware",
202 | "django.middleware.clickjacking.XFrameOptionsMiddleware",
203 | 'corsheaders.middleware.CorsMiddleware',
204 | ]
205 |
206 | ROOT_URLCONF = "monafit_tracker.urls"
207 |
208 | TEMPLATES = [
209 | {
210 | "BACKEND": "django.template.backends.django.DjangoTemplates",
211 | "DIRS": [],
212 | "APP_DIRS": True,
213 | "OPTIONS": {
214 | "context_processors": [
215 | "django.template.context_processors.debug",
216 | "django.template.context_processors.request",
217 | "django.contrib.auth.context_processors.auth",
218 | "django.contrib.messages.context_processors.messages",
219 | ],
220 | },
221 | },
222 | ]
223 |
224 | WSGI_APPLICATION = "monafit_tracker.wsgi.application"
225 |
226 |
227 | # Database
228 | # https://docs.djangoproject.com/en/4.1/ref/settings/#databases
229 |
230 | DATABASES = {
231 | 'default': {
232 | 'ENGINE': 'djongo',
233 | 'NAME': 'monafit_db',
234 | 'HOST': 'localhost',
235 | 'PORT': 27017,
236 | }
237 | }
238 |
239 |
240 | # Password validation
241 | # https://docs.djangoproject.com/en/4.1/ref/settings/#auth-password-validators
242 |
243 | AUTH_PASSWORD_VALIDATORS = [
244 | {
245 | "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
246 | },
247 | {
248 | "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
249 | },
250 | {
251 | "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
252 | },
253 | {
254 | "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
255 | },
256 | ]
257 |
258 |
259 | # Internationalization
260 | # https://docs.djangoproject.com/en/4.1/topics/i18n/
261 |
262 | LANGUAGE_CODE = "en-us"
263 |
264 | TIME_ZONE = "UTC"
265 |
266 | USE_I18N = True
267 |
268 | USE_TZ = True
269 |
270 |
271 | # Static files (CSS, JavaScript, Images)
272 | # https://docs.djangoproject.com/en/4.1/howto/static-files/
273 |
274 | STATIC_URL = "static/"
275 |
276 | # Default primary key field type
277 | # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
278 |
279 | DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
280 |
281 | CORS_ALLOW_ALL_ORIGINS = True
282 | ```
283 |
284 | ### Sample code for models.py, serializers.py, views.py, and urls.py
285 |
286 | #### models.py
287 |
288 | ```python
289 | # FILE: monafit-tracker/backend/monafit_tracker/models.py
290 |
291 | from djongo import models
292 |
293 | class User(models.Model):
294 | _id = models.ObjectIdField()
295 | username = models.CharField(max_length=100)
296 | email = models.EmailField(unique=True)
297 | password = models.CharField(max_length=100)
298 |
299 | class Team(models.Model):
300 | _id = models.ObjectIdField()
301 | name = models.CharField(max_length=100)
302 | members = models.ArrayReferenceField(to=User, on_delete=models.CASCADE)
303 |
304 | class Activity(models.Model):
305 | _id = models.ObjectIdField()
306 | user = models.ForeignKey(User, on_delete=models.CASCADE)
307 | activity_type = models.CharField(max_length=100)
308 | duration = models.DurationField()
309 |
310 | class Leaderboard(models.Model):
311 | _id = models.ObjectIdField()
312 | user = models.ForeignKey(User, on_delete=models.CASCADE)
313 | score = models.IntegerField()
314 |
315 | class Workout(models.Model):
316 | _id = models.ObjectIdField()
317 | name = models.CharField(max_length=100)
318 | description = models.TextField()
319 | ```
320 |
321 | #### serializers.py
322 |
323 | ```python
324 | from rest_framework import serializers
325 | from .models import User, Team, Activity, Leaderboard, Workout
326 | from bson import ObjectId
327 |
328 | class ObjectIdField(serializers.Field):
329 | def to_representation(self, value):
330 | return str(value)
331 |
332 | def to_internal_value(self, data):
333 | return ObjectId(data)
334 |
335 | class UserSerializer(serializers.ModelSerializer):
336 | _id = ObjectIdField()
337 |
338 | class Meta:
339 | model = User
340 | fields = '__all__'
341 |
342 | class TeamSerializer(serializers.ModelSerializer):
343 | _id = ObjectIdField()
344 | members = UserSerializer(many=True)
345 |
346 | class Meta:
347 | model = Team
348 | fields = '__all__'
349 |
350 | class ActivitySerializer(serializers.ModelSerializer):
351 | _id = ObjectIdField()
352 | user = ObjectIdField()
353 |
354 | class Meta:
355 | model = Activity
356 | fields = '__all__'
357 |
358 | class LeaderboardSerializer(serializers.ModelSerializer):
359 | _id = ObjectIdField()
360 | user = UserSerializer() # Expand the user object
361 |
362 | class Meta:
363 | model = Leaderboard
364 | fields = '__all__'
365 |
366 | class WorkoutSerializer(serializers.ModelSerializer):
367 | _id = ObjectIdField()
368 |
369 | class Meta:
370 | model = Workout
371 | fields = '__all__'
372 | ```
373 |
374 | #### views.py
375 |
376 | ```python
377 | # FILE: monafit-tracker/backend/monafit_tracker/views.py
378 |
379 | from rest_framework import viewsets, status
380 | from rest_framework.decorators import api_view
381 | from rest_framework.response import Response
382 | from rest_framework.reverse import reverse
383 | from .serializers import UserSerializer, TeamSerializer, ActivitySerializer, LeaderboardSerializer, WorkoutSerializer
384 | from .models import User, Team, Activity, Leaderboard, Workout
385 |
386 | @api_view(['GET', 'POST'])
387 | def api_root(request, format=None):
388 | if request.method == 'POST':
389 | return Response({"message": "POST request received"}, status=status.HTTP_201_CREATED)
390 |
391 | base_url = '[USE CODESPACE URL]'
392 | return Response({
393 | 'users': base_url + 'api/users/?format=api',
394 | 'teams': base_url + 'api/teams/?format=api',
395 | 'activities': base_url + 'api/activities/?format=api',
396 | 'leaderboard': base_url + 'api/leaderboard/?format=api',
397 | 'workouts': base_url + 'api/workouts/?format=api'
398 | })
399 |
400 | class UserViewSet(viewsets.ModelViewSet):
401 | queryset = User.objects.all()
402 | serializer_class = UserSerializer
403 |
404 | class TeamViewSet(viewsets.ModelViewSet):
405 | queryset = Team.objects.all()
406 | serializer_class = TeamSerializer
407 |
408 | class ActivityViewSet(viewsets.ModelViewSet):
409 | queryset = Activity.objects.all()
410 | serializer_class = ActivitySerializer
411 |
412 | class LeaderboardViewSet(viewsets.ModelViewSet):
413 | queryset = Leaderboard.objects.all()
414 | serializer_class = LeaderboardSerializer
415 |
416 | class WorkoutViewSet(viewsets.ModelViewSet):
417 | queryset = Workout.objects.all()
418 | serializer_class = WorkoutSerializer
419 | ```
420 |
421 | #### urls.py
422 |
423 | ```python
424 | # FILE: monafit-tracker/backend/monafit_tracker/urls.py
425 |
426 | from django.contrib import admin
427 | from django.urls import path, include
428 | from rest_framework.routers import DefaultRouter
429 | from .views import UserViewSet, TeamViewSet, ActivityViewSet, LeaderboardViewSet, WorkoutViewSet, api_root
430 |
431 | router = DefaultRouter()
432 | router.register(r'users', UserViewSet)
433 | router.register(r'teams', TeamViewSet)
434 | router.register(r'activities', ActivityViewSet)
435 | router.register(r'leaderboard', LeaderboardViewSet)
436 | router.register(r'workouts', WorkoutViewSet)
437 |
438 | urlpatterns = [
439 | path('', api_root, name='api-root'), # Root endpoint
440 | path('admin/', admin.site.urls), # Admin endpoint
441 | path('api/', include(router.urls)), # API endpoint
442 | ]
443 | ```
444 |
445 | ## Populate the databse with sample data
446 |
447 | ```text
448 | Let's use manage.py to get the database setup and populated based on fields in models.py
449 |
450 | - Create populate_db.py as a manage.py command so it initializes and deletes previous data and recreates it
451 | - populate_db.py creates users, teams, activity, leaderboard, and workouts
452 | - users will be super hero users
453 | - Include steps to migrate in the monafit_tracker project
454 | ```
455 |
456 | ### Commands to create the directory structure for populate_db.py
457 |
458 | ```bash
459 | mkdir -p monafit-tracker/backend/monafit_tracker/management/commands
460 | touch monafit-tracker/backend/monafit_tracker/management/__init__.py
461 | touch monafit-tracker/backend/monafit_tracker/management/commands/__init__.py
462 | touch monafit-tracker/backend/monafit_tracker/management/commands/populate_db.py
463 | ```
464 |
465 | ### Sample code for populate_db.py to populate the database
466 |
467 | Mergington Physical Education sample data use for populate_db.py
468 | Should reside under monafit-tracker/backend/monafit_tracker/management/commands/populate_db.py
469 |
470 | ```python
471 | # FILE: monafit-tracker/backend/monafit_tracker/management/commands/populate_db.py
472 |
473 | from django.core.management.base import BaseCommand
474 | from monafit_tracker.models import User, Team, Activity, Leaderboard, Workout
475 | from django.conf import settings
476 | from pymongo import MongoClient
477 | from datetime import timedelta
478 | from bson import ObjectId
479 |
480 | class Command(BaseCommand):
481 | help = 'Populate the database with test data for users, teams, activity, leaderboard, and workouts'
482 |
483 | def handle(self, *args, **kwargs):
484 | # Connect to MongoDB
485 | client = MongoClient(settings.DATABASES['default']['HOST'], settings.DATABASES['default']['PORT'])
486 | db = client[settings.DATABASES['default']['NAME']]
487 |
488 | # Drop existing collections
489 | db.users.drop()
490 | db.teams.drop()
491 | db.activity.drop()
492 | db.leaderboard.drop()
493 | db.workouts.drop()
494 |
495 | # Create users
496 | users = [
497 | User(_id=ObjectId(), username='thundergod', email='thundergod@mhigh.edu', password='thundergodpassword'),
498 | User(_id=ObjectId(), username='metalgeek', email='metalgeek@mhigh.edu', password='metalgeekpassword'),
499 | User(_id=ObjectId(), username='zerocool', email='zerocool@mhigh.edu', password='zerocoolpassword'),
500 | User(_id=ObjectId(), username='crashoverride', email='crashoverride@hmhigh.edu', password='crashoverridepassword'),
501 | User(_id=ObjectId(), username='sleeptoken', email='sleeptoken@mhigh.edu', password='sleeptokenpassword'),
502 | ]
503 | User.objects.bulk_create(users)
504 |
505 | # Create teams
506 | team = Team(_id=ObjectId(), name='Blue Team')
507 | team = Team(_id=ObjectId(), name='Gold Team')
508 | team.save()
509 | for user in users:
510 | team.members.add(user)
511 |
512 | # Create activities
513 | activities = [
514 | Activity(_id=ObjectId(), user=users[0], activity_type='Cycling', duration=timedelta(hours=1)),
515 | Activity(_id=ObjectId(), user=users[1], activity_type='Crossfit', duration=timedelta(hours=2)),
516 | Activity(_id=ObjectId(), user=users[2], activity_type='Running', duration=timedelta(hours=1, minutes=30)),
517 | Activity(_id=ObjectId(), user=users[3], activity_type='Strength', duration=timedelta(minutes=30)),
518 | Activity(_id=ObjectId(), user=users[4], activity_type='Swimming', duration=timedelta(hours=1, minutes=15)),
519 | ]
520 | Activity.objects.bulk_create(activities)
521 |
522 | # Create leaderboard entries
523 | leaderboard_entries = [
524 | Leaderboard(_id=ObjectId(), user=users[0], score=100),
525 | Leaderboard(_id=ObjectId(), user=users[1], score=90),
526 | Leaderboard(_id=ObjectId(), user=users[2], score=95),
527 | Leaderboard(_id=ObjectId(), user=users[3], score=85),
528 | Leaderboard(_id=ObjectId(), user=users[4], score=80),
529 | ]
530 | Leaderboard.objects.bulk_create(leaderboard_entries)
531 |
532 | # Create workouts
533 | workouts = [
534 | Workout(_id=ObjectId(), name='Cycling Training', description='Training for a road cycling event')
535 | Workout(_id=ObjectId(), name='Crossfit', description='Training for a crossfit competition'),
536 | Workout(_id=ObjectId(), name='Running Training', description='Training for a marathon'),
537 | Workout(_id=ObjectId(), name='Strength Training', description='Training for strength'),
538 | Workout(_id=ObjectId(), name='Swimming Training', description='Training for a swimming competition'),
539 | ]
540 | Workout.objects.bulk_create(workouts)
541 |
542 | self.stdout.write(self.style.SUCCESS('Successfully populated the database with test data.'))
543 | ```
544 |
545 | ### Run the following commands to migrate the database and populate it with data
546 |
547 | ```bash
548 | python monafit-tracker/backend/manage.py monafit-tracker/backend/makemigrations
549 | python monafit-tracker/backend/manage.py monafit-tracker/backend/migrate
550 | python monafit-tracker/backendmanage.py monafit-tracker/backend/populate_db
551 | ```
552 |
553 | ## Using the Codespace endpoint to access the Django REST API endpoints
554 |
555 | ```text
556 | Let's do the following step by step
557 |
558 | - Update #file:monafit-tracker/backend/monafit_tracker/views.py to replace the return for the rest api url endpiints with the codespace url http://[REPLACE-THIS-WITH-YOUR-CODESPACE-NAME]-8000.app.github.dev for django
559 | - Replace
732 |
759 |
770 |
760 |
761 | Welcome to OctoFit Tracker} />
767 |
768 |
769 |
817 |
819 |
820 |
834 |
835 | );
836 | }
837 |
838 | export default Leaderboard;
839 | ```
840 |
841 | ## App.css example
842 |
843 | ```css
844 | /* General styles */
845 | body {
846 | font-family: 'Roboto', sans-serif;
847 | background-color: #f0f8ff; /* Light blue background */
848 | margin: 0;
849 | padding: 0;
850 | }
851 |
852 | .App {
853 | text-align: center;
854 | }
855 |
856 | /* Navigation styles */
857 | nav {
858 | background-color: #4682b4; /* Steel blue */
859 | padding: 1rem;
860 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
861 | }
862 |
863 | nav ul {
864 | list-style: none;
865 | padding: 0;
866 | margin: 0;
867 | display: flex;
868 | justify-content: center;
869 | }
870 |
871 | nav ul li {
872 | margin: 0 1rem;
873 | }
874 |
875 | nav ul li a {
876 | color: #0f0be4; /* White text for visibility */
877 | text-decoration: none;
878 | font-weight: bold;
879 | font-size: 1.2rem;
880 | transition: color 0.3s;
881 | }
882 |
883 | nav ul li a:hover {
884 | color: #f0f8ff; /* Light blue */
885 | text-decoration: underline;
886 | }
887 |
888 | /* Component styles */
889 | h1 {
890 | color: #00008b; /* Dark blue header name */
891 | font-size: 2.5rem;
892 | margin-bottom: 1rem;
893 | }
894 |
895 | /* Table styles */
896 | table {
897 | width: 90%;
898 | margin: 1rem auto;
899 | border-collapse: collapse;
900 | background-color: #ffffff; /* White background */
901 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
902 | border-radius: 8px;
903 | overflow: hidden;
904 | }
905 |
906 | table th, table td {
907 | border: 1px solid #ddd;
908 | padding: 1rem;
909 | text-align: left;
910 | font-size: 1rem;
911 | }
912 |
913 | table th {
914 | background-color: #4682b4; /* Steel blue */
915 | color: white;
916 | font-size: 1.2rem;
917 | }
918 |
919 | table tr:nth-child(even) {
920 | background-color: #f0f8ff; /* Light blue */
921 | }
922 |
923 | table tr:hover {
924 | background-color: #e0ffff; /* Light cyan */
925 | }
926 |
927 | ul {
928 | list-style: none;
929 | padding: 0;
930 | }
931 |
932 | ul li {
933 | color: #4682b4; /* Steel blue text */
934 | background-color: #fff;
935 | margin: 0.5rem 0;
936 | padding: 1rem;
937 | border-radius: 8px;
938 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
939 | font-size: 1.1rem;
940 | }
941 |
942 | /* Text styles */
943 | .component-text {
944 | color: #00008b; /* Dark blue center title */
945 | font-size: 1.8rem;
946 | margin-bottom: 1rem;
947 | }
948 |
949 | /* Button styles */
950 | button {
951 | background-color: #4682b4; /* Steel blue */
952 | color: white;
953 | border: none;
954 | padding: 0.75rem 1.5rem;
955 | border-radius: 8px;
956 | font-size: 1rem;
957 | cursor: pointer;
958 | transition: background-color 0.3s;
959 | }
960 |
961 | button:hover {
962 | background-color: #5a9bd4; /* Lighter steel blue */
963 | }
964 |
965 | .App-logo {
966 | height: 40vmin;
967 | pointer-events: none;
968 | }
969 |
970 | @media (prefers-reduced-motion: no-preference) {
971 | .App-logo {
972 | animation: App-logo-spin infinite 20s linear;
973 | }
974 | }
975 |
976 | .App-header {
977 | background-color: #2b2834;
978 | min-height: 100vh;
979 | display: flex;
980 | flex-direction: column;
981 | align-items: center;
982 | justify-content: center;
983 | font-size: calc(10px + 2vmin);
984 | color: white;
985 | }
986 |
987 | .App-link {
988 | color: #61dafb;
989 | }
990 |
991 | @keyframes App-logo-spin {
992 | from {
993 | transform: rotate(0deg);
994 | }
995 | to {
996 | transform: rotate(360deg);
997 | }
998 | }
999 | ```
1000 |
--------------------------------------------------------------------------------
/docs/octofit_story.md:
--------------------------------------------------------------------------------
1 | # Building a Fitness App with GitHub Copilot agent mode for Mergington High School
2 |
3 | ## OctoFit Tracker application story for Mergington High School
4 |
5 | Paul Octo has been a physical education teacher at Mergington High School for over 8 years. Despite his enthusiasm and creative approach to gym class, he's been increasingly concerned about students' physical activity declining once they leave school grounds. Many students admitted they rarely exercised outside of the required PE classes.
6 | After attending a professional development conference on "Technology Integration in Physical Education," Paul became inspired to create a solution. He wanted something that would:
7 |
8 | 1. Make fitness tracking fun and engaging
9 | 2. Create positive peer pressure through friendly competition
10 | 3. Allow him to monitor student progress remotely
11 | 4. Provide personalized guidance based on individual fitness levels
12 |
13 | ## The Birth of OctoFit Tracker
14 |
15 | Paul initially sketched his idea on a notepad during lunch breaks. He envisioned an app where students could log workouts, earn achievement badges, and compete in monthly fitness challenges. However, as a PE teacher with only basic coding knowledge, the technical aspects seemed daunting.
16 | That's when he approached Jessica Cat, the head of Mergington High's IT department. Jessica recommended basing the app on the Monafit Tracker developed by Mona High School, which was documented in `docs/mona-high-school-fitness-tracker.md`. She saw potential in adapting the Monafit Tracker's structure and features to meet Mergington High School's needs.
17 |
18 | ### Technical Planning Phase
19 |
20 | Before starting development, Paul and Jessica carefully reviewed the Monafit Tracker's repository and documentation. This provided a solid foundation for OctoFit Tracker, ensuring compliance with technical standards and leveraging proven design patterns.
21 | Together, Paul and the IT team identified key requirements for OctoFit Tracker:
22 |
23 | ### User Experience Goals
24 |
25 | - Simple, intuitive interface designed specifically for teenagers
26 | - Quick activity logging to minimize friction
27 | - Social features that respect student privacy
28 | - Gamification elements to maintain engagement
29 |
30 | ### Technical Specifications
31 |
32 | - Mobile-responsive web application (accessible on school Chromebooks and personal devices)
33 | - Secure authentication based on Monafit Tracker's implementation
34 | - Activity verification system to prevent cheating
35 |
36 | ## Current Development Status
37 |
38 | Paul and Jessica have set up a GitHub Codespace environment and are making remarkable progress with GitHub Copilot agent mode. By adapting the Monafit Tracker's structure, the OctoFit Tracker prototype already includes:
39 |
40 | - A functional user registration system
41 | - Basic activity logging for running, walking, and strength training
42 | - The beginning framework for team competitions
43 | - A simple dashboard showing student progress
44 |
45 | ## Next Steps for Paul
46 |
47 | With the basic infrastructure in place, Paul is now focused on:
48 |
49 | 1. Developing an engaging point system that fairly compares different types of activities
50 | 2. Creating motivational challenges that appeal to different student interests
51 | 3. Building a notification system that encourages consistency without being intrusive
52 | 4. Designing reports that help him identify students who might need additional support or motivation
53 |
54 | The IT department has been impressed with how GitHub Copilot agent mode has accelerated development, allowing Paul to focus on the educational aspects while the AI handles much of the technical implementation. Jessica Cat has been particularly pleased with how OctoFit Tracker leverages the Monafit Tracker's foundation to meet Mergington High School's unique requirements.
55 |
56 | ### Workshop Overview
57 |
58 | In this workshop, you'll:
59 |
60 | 1. Set up a development environment using **GitHub Codespaces**
61 | 2. Use **GitHub Copilot** to accelerate development across multiple technologies
62 | 3. Build key components of the **OctoFit Tracker** app with the help of Copilot agent mode
63 | 4. Learn best practices and prompting techniques for working with **GitHub Copilot agent mode**
64 |
65 | ### Application Features
66 |
67 | **OctoFit Tracker** will include:
68 |
69 | - User profiles
70 | - Activity logging and tracking
71 | - Team creation and management
72 | - A competitive leaderboard
73 | - Personalized workout suggestions
74 |
75 | ### GitHub Copilot Chat
76 |
77 | These are the current models supported for GitHub Copilot Chat:
78 |
79 | - Claude Sonnet 3.5 (Preview)
80 | - Claude Sonnet 3.7 (Preview)
81 | - Claude Sonnet 3.7 Thinking (Preview)
82 | - Gemini 2.0 Flash (Preview)
83 | - GPT-4o
84 | - o1 (Preview)
85 | - o3-mini (Preview)
86 |
87 | #### [LLM models explained](https://docs.github.com/en/copilot/using-github-copilot/ai-models/changing-the-ai-model-for-copilot-chat#ai-models-for-copilot-chat-1)
88 |
89 | 
90 |
91 | #### Prompt engineering
92 |
93 | - [GitHub documentation prompt engineering](https://docs.github.com/en/copilot/using-github-copilot/prompt-engineering-for-github-copilot)
94 | - [How to use GitHub Copilot: Prompts, tips, and use cases](https://github.blog/2023-06-20-how-to-write-better-prompts-for-github-copilot/)
95 | - [Using GitHub Copilot in your IDE: Tips, tricks, and best practices](https://github.blog/2024-03-25-how-to-use-github-copilot-in-your-ide-tips-tricks-and-best-practices/)
96 | - [A developer's guide to prompt engineering and LLMs](https://docs.github.com/en/copilot/using-github-copilot/prompt-engineering-for-github-copilot#:~:text=A%20developer%E2%80%99s%20guide%20to%20prompt%20engineering%20and%20LLMs)
97 | - [GitHub Copilot: The Agent Awakens](https://github.blog/news-insights/product-news/github-copilot-the-agent-awakens/#agent-mode-available-in-preview-%f0%9f%a4%96)
98 |
99 | ### OctoFit tracker fitness application technology stack
100 |
101 | We'll be using a modern web application stack:
102 |
103 | - **Frontend**: React.js
104 | - **Backend**: Python with Django REST Framework
105 | - **Database**: MongoDB
106 | - **Development Environment**: GitHub Codespaces
107 |
108 | ### Workshop Structure
109 |
110 | 1. **Introduction**
111 | - Overview of OctoFit Tracker app concept
112 | - GitHub Copilot Chat models
113 |
114 | 2. **Setup of Prerequisites**
115 | - Setting up GitHub Codespaces
116 | - Ensure GitHub Copilot and Copilot Chat extensions are up to date
117 |
118 | 3. **Rapid Prototyping with GitHub Copilot agent mode**
119 | - Creating project structure
120 | - Generating boilerplate code
121 | - Implementing basic models, serializers, urls, and views
122 |
123 | 4. **Building Core Features**
124 | - Activity logging API
125 | - Team management
126 | - Leaderboard functionality
127 |
128 | 5. **Frontend and Backend Development**
129 | - Setting up React components
130 | - Implementing responsive UI
131 | - Connecting to backend APIs
132 | - Python Django business logic
133 | - MongoDB data layer
134 |
--------------------------------------------------------------------------------
/docs/octofitapp-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skills/build-applications-w-copilot-agent-mode/a022cc39074b266da58c93a3971e8244564d65c1/docs/octofitapp-small.png
--------------------------------------------------------------------------------
Leaderboard
818 || Username | 822 |Score | 823 |
|---|---|
| {entry.user.username} | 829 |{entry.score} | 830 |