Merge pull request #13 from githubuniverseworkshops/update-grammar-and-content

Update grammar and content

Author: arilivigni

README.md

@@ -31,7 +31,9 @@ Without further ado, let's get started.
 1. [The OctoFit Tracker app story](docs/1_Story/README.md)
 2. [Prerequisites and a setup of the development environment](docs/2_Prerequisites/README.md)
 3. [Getting started - app frontend and backend creation](docs/3_GettingStarted/README.md)
-4. [The OctoFit Tracker database and app backend creation](docs/4_BackendSettings/README.md)
-5. [Populate the database with sample data](docs/5_PopulateDBwData/README.md)
-6. [Using the Codespace endpoint to access the Django REST Framework](docs/6_CodespaceDjangoRESTFramework/README.md)
-7. [:fire: REFERENCE - Troubleshooting guide and FAQs](docs/7_Troubleshooting/README.md)
+4. [Let's build some beautiful front end](docs/4_FrontEndWork/README.md)
+5. [The OctoFit Tracker database and app backend creation](docs/5_BackendSettings/README.md)
+6. [Populate the database with sample data](docs/6_PopulateDBwData/README.md)
+7. [Using the Codespace endpoint to access the Django REST Framework](docs/7_CodespaceDjangoRESTFramework/README.md)
+8. [What's next?](docs/8_WhatsNext/README.md)
+9. [:fire: REFERENCE - Troubleshooting guide and FAQs](docs/9_Troubleshooting/README.md)

docs/1_Story/README.md

@@ -107,4 +107,4 @@ Join us for this exciting journey into the future of software development, where
 
 In this workshop, you are going to assume to be the lead developer. You will be responsible for building the application with GitHub Copilot’s help. Good luck!
 
-[Next: Prerequisite and setup of the development environment](../2_Prerequisites/README.md)
+[Next: Prerequisite and setup of the development environment :arrow_forward:](../2_Prerequisites/README.md)

docs/2_Prerequisites/README.md

@@ -38,4 +38,6 @@ When the codespace is created you may get the following message for the GitHub C
 - If you choose this option we recommend using VSCode as your IDE, but this workshop is not limited to VSCode
 - URL for REACT and Django will be `http://localhost` or `http://127.0.0.1`
 
-[Back :: Previous: The OctoFit Tracker app story](../1_Story/README.md) | [Next :: Getting started - app frontend and backend creation](../3_GettingStarted/README.md)
+If you ever get stuck, don't worry. Please check out the [troubleshooting guide](../9_Troubleshooting/), and GitHub Experts will be here to help you.
+
+[:arrow_backward: Previous: The OctoFit Tracker app story](../1_Story/README.md) | [Next: Getting started - app frontend and backend creation :arrow_forward:](../3_GettingStarted/README.md)

docs/3_GettingStarted/README.md

@@ -75,4 +75,4 @@ Important to avoid using public code and we do NOT need to initialize the git re
 
 ![octofit-tracker app directory tree](./3_3_OctoFitTrackerDirTree.png)</br>
 
-[Back :: Previous: Prerequisites and development environment setup](../2_Prerequisites/README.md) | [Next :: The OctoFit Tracker database and app backend creation](../4_BackendSettings/README.md)
+[:arrow_backward: Previous: Prerequisites and development environment setup](../2_Prerequisites/README.md) | [Next: Let's work on front end stuff :arrow_forward:](../4_FrontEndWork/README.md)

docs/4_FrontEndWork/4_1_FrontEndStructure.jpg

@@ -0,0 +1,157 @@
+# Let's build some beautiful front end
+
+In this section, we will start by setting up the face of our OctoFit application by building the front end page. To do that, we will keep it as simple as possible for now. We need resources like **HTML** and **CSS** to start decorating first, and we will later modify the page to extend the functionalities.
+
+## Goals/Outcome
+
+- Understand the basic strategies around designing the **OctoFit Tracker** app by asking **GitHub Copilot** Chat
+- Start getting the feel for OctoFit app by generating HTML and CSS resources
+- See a front-end page with a greeting message
+
+Let's take a look at what we have so far by expanding the `octofit-tracker/frontend`. It will look something like this:
+
+![Front end structure](./4_1_FrontEndStructure.jpg)
+
+Let's expand `public` section because that is where we will find our static files.
+
+Type the following prompt in GitHub Copilot Chat:
+
+> TIP: we are going to use gpt-4o as our OpenAI GPT model for this GitHub Universe Workshop
+
+```text
+Now, how can I add HTML and CSS on these to make it more OctoFit tracker like?
+
+Launch the port in 8080
+Make sure to add a simple navigation
+Ignore bootstrap for now
+```
+
+If I type that command in the GitHub **Copilot Chat**, it may look like this:
+
+![Prompt example](./4_2_PromptFrontEnd.jpg)
+
+And the generated response might look like this:
+
+![Generated response exampe](./4_3_GeneratedResponsePrompt.jpg)
+
+> :warning: **TIP:** What if you don't get the same response? That's okay! The beauty of GitHub Copilot is that it is generative, and it will give you a different response each time. The key is to be persistent and keep asking the same question in different ways until you get a response that you are happy with. :smile:
+
+And if you type the following command in the GitHub **Copilot Chat**, it will create a new port in `8080`.
+
+![Opening up port](./4_4_OpeningUpFrontend.jpg)
+
+And the final result should look like this:
+
+![Frontend result](./4_5_WebsiteFrontend.jpg)
+
+That is it! Please refer to the **Solution** below or the [troubleshoot guide](../9_Troubleshooting/README.md) if you encounter any issues.
+
+## Solution
+
+This shows one possible solution where you need to make a change:
+
+### Modify the following files:
+
+`src/App.js`
+
+```javascript
+import React from 'react';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <nav className="navbar">
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/profile">Profile</a></li>
+          <li><a href="/activities">Activities</a></li>
+          <li><a href="/teams">Teams</a></li>
+          <li><a href="/leaderboard">Leaderboard</a></li>
+          <li><a href="/workouts">Workouts</a></li>
+        </ul>
+      </nav>
+      <header className="App-header">
+        <h1>Welcome to OctoFit Tracker</h1>
+      </header>
+    </div>
+  );
+}
+
+export default App;
+```
+
+Create or modify `src/App.css`
+
+```css
+.App {
+  text-align: center;
+}
+
+.navbar {
+  background-color: #333;
+  overflow: hidden;
+}
+
+.navbar ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar li {
+  float: left;
+}
+
+.navbar li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+.navbar li a:hover {
+  background-color: #111;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+```
+
+
+`package.json`
+Update the following section:
+
+```json
+  "scripts": {
+    "start": "PORT=8080 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+```
+
+### Run the following commands:
+
+```bash
+cd octofit-tracker/frontend
+```
+
+Then, followed by...
+
+```bash
+npm start
+```
+
+Check the browser at the port `8080` to see the changes.
+
+[:arrow_backward: Previous: Getting started - app frontend and backend creation](../3_GettingStarted/README.md) | [Next: The OctoFit Tracker database and app backend creation :arrow_forward:](../5_BackendSettings/README.md)

docs/4_FrontEndWork/4_2_PromptFrontEnd.jpg

@@ -16,11 +16,11 @@ In our next steps lets think step by step and setup the following in this order
 6. make sure urls.py has a root, admin, and api endpoints
 ```
 
-![OctoFit Tracker backend prompt](./4_1_BackendSettingsPrompt.png)</br>
-![OctoFit Tracker backend response step 1](./4_2_BackendSettingsStep1.png)</br>
-![OctoFit Tracker backend response step 2 and 3](./4_2_BackendSettingsStep2Step3_1.png)</br>
-![OctoFit Tracker backend response step 3 continued](./4_2_BackendSettingsStep3_2.png)</br>
-![OctoFit Tracker backend response step 3 continued](./4_2_BackendSettingsStep3_3.png)</br>
+![OctoFit Tracker backend prompt](./5_1_BackendSettingsPrompt.png)</br>
+![OctoFit Tracker backend response step 1](./5_2_BackendSettingsStep1.png)</br>
+![OctoFit Tracker backend response step 2 and 3](./5_2_BackendSettingsStep2Step3_1.png)</br>
+![OctoFit Tracker backend response step 3 continued](./5_2_BackendSettingsStep3_2.png)</br>
+![OctoFit Tracker backend response step 3 continued](./5_2_BackendSettingsStep3_3.png)</br>
 
 ### Sample settings.py
 
@@ -189,4 +189,4 @@ urlpatterns = [
 ]
 ```
 
-[Back :: Previous: Getting started - app frontend and backend creation](../3_GettingStarted/README.md) | [Next :: Populate the database with sample data](../5_PopulateDBwData/README.md)
+[:arrow_backward: Previous: Let's work on front end](../4_FrontEndWork/README.md) | [Next: Populate the database with sample data :arrow_forward:](../6_PopulateDBwData/README.md)

docs/4_FrontEndWork/4_3_GeneratedResponsePrompt.jpg

@@ -10,7 +10,7 @@ Let's use manage.py to get everything setup we need to populate_db command inclu
 
 ### Example of not being specfic in prompting Copilot Chat
 
-![populate db Code your app name](./5_1_PopulateDbCodeYourAppNameFirst.png)
+![populate db Code your app name](./6_1_PopulateDbCodeYourAppNameFirst.png)
 
 ## Example of being more specific in our prompt
 
@@ -27,9 +27,9 @@ Let's use manage.py to get the database setup and populated based on fields in m
 - Include steps to migrate in the octofit_tracker project
 ```
 
-![populate the database with data prompt](./5_1_PopulateDBwDataPrompt.png)
-![create the populate_db.py step 1_1](./5_2_PopulateDBwDataStep1_1.png)
-![create the populate_db.py step 1_2](./5_2_PopulateDBwDataStep1_2.png)
+![populate the database with data prompt](./6_1_PopulateDBwDataPrompt.png)
+![create the populate_db.py step 1_1](./6_2_PopulateDBwDataStep1_1.png)
+![create the populate_db.py step 1_2](./6_2_PopulateDBwDataStep1_2.png)
 
 ### Sample code for populate_db.py
 
@@ -146,4 +146,4 @@ class Command(BaseCommand):
 
 ![Migrate and populate db](./5_3_MigratePopulateDb.png)
 
-[Back :: Previous: Getting started - app frontend and backend creation](../4_BackendSettings/README.md) | [Next :: Using the Codespace endpoint to access the Django REST Framework](../6_CodespaceDjangoRESTFramework/README.md)
+[:arrow_backward: Previous: The OctoFit Tracker database and app backend creation](../5_BackendSettings/README.md) | [Next: Using the Codespace endpoint to access the Django REST Framework :arrow_forward:](../7_CodespaceDjangoRESTFramework/README.md)

docs/4_FrontEndWork/4_4_OpeningUpFrontend.jpg

@@ -37,4 +37,4 @@ HTTP 200 OK Allow: GET, HEAD, OPTIONS Content-Type: application/json Vary: Accep
 }
 ```
 
-[Back :: Previous: Getting started - app frontend and backend creation](../4_BackendSettings/README.md | [Next :: Using the Codespace endpoint to access the Django REST Framework](../6_CodesapceDjangoRESTFramework/)
+[:arrow_backward: Previous: Populate DB data](../6_PopulateDBwData) | [Next: What's next :arrow_forward:](../8_WhatsNext/README.md)

docs/4_FrontEndWork/4_5_WebsiteFrontend.jpg

@@ -0,0 +1,19 @@
+# What's next?
+
+You made it this far! Congraulation!
+
+![Congratulation](https://octodex.github.com/images/hula_loop_octodex03.gif)
+
+What's next? From here, you can continue to leverage **GitHub Copilot** to finish the rest of exercises.
+
+Also, be sure to checkout self-paced documentation to build the application from scratch:
+
+[**gh.io/octofit-tutorial**](https://gh.io/octofit-tutorial)
+
+Make sure to leave the feedback on the workshop and the documentation by following this link:
+
+[:speech_balloon: We want to hear from you! - **github.com/orgs/community/discussions/142536**](https://github.com/orgs/community/discussions/142536)
+
+Thank you again. Happy coding with **GitHub Copilot**!
+
+[:house_with_garden: Go back to the main page](../../README.md)

docs/4_FrontEndWork/README.md

@@ -0,0 +1,18 @@
+# Troubleshooting guide and FAQ
+
+## Troubleshooting guide
+
+<details>
+  <summary>I am getting a different answer. What do I do?</summary>
+  Please check the section where you can copy-and-paste the code if you want to follow along.
+</details>
+
+## FAQs
+
+<details>
+  <summary>How can I enable Copilot?</summary>
+  For the workshop, it should be already enabled. If you need any help, please reach out to the GitHub Expert Service team.
+</details>
+
+
+