Refactor setup documentation and enhance project exploration guide

Author: GeekTrainer

content/1-hour/0-setup.md

@@ -42,6 +42,24 @@ With the repository created, it's now time to clone the repository locally. We'l
 
 5. Start the application by running the following command:
 
+    ```sh
+    ./scripts/start-app.sh
+    ```
+
+The startup script will start two applications:
+
+- The backend Flask app on [localhost:5100](http://localhost:5100). You can see a list of dogs by opening the [dogs API](http://localhost:5100/api/dogs).
+- The frontend Astro/Svelte app on [localhost:4321](http://localhost:4321). You can see the [website](http://localhost:4321) by opening that URL!
+
+## Open your editor
+
+With the code cloned locally, and the site running, let's open the codebase up in VS Code.
+
+1. Open VS Code.
+2. Select **File** > **Open Folder**.
+3. Navigate to the folder which contains the project you cloned earlier in this exercise.
+4. With the folder highlighted, select **Open folder**.
+
 ## Summary and next steps
 
-You've now created the repository you'll use for this workshop! Next let's [enable Code Scanning](1-code-scanning.md) to secure the code we write.
+You've now cloned the repository you'll use for this workshop and have your IDE setup! Next let's [add a new endpoint to the server](./1-add-endpoint.md)!

content/1-hour/1-add-endpoint.md

@@ -0,0 +1,72 @@
+# Coding with GitHub Copilot
+
+There are two main interfaces to GitHub Copilot - Chat and code completion. Code completion allows you to get suggestions in your code editor while you're coding. This can turn comments into code, and function signatures into full blocks of code. Code completion helps reduce the amount of boilerplate code and ceremony you need to type, allowing you to focus on the important aspects of what you're creating.
+
+## Scenario
+
+It's standard to work in phases when adding functionality to an application. Given that we know we want to allow users to filter the list of dogs based on breed, we'll need to add an endpoint to provide a list of all breeds. Later we'll add the rest of the functionality, but let's focus on this part for now.
+
+## Flask routes
+
+While we won't be able to provide a full overview of [routing in Flask](https://flask.palletsprojects.com/en/stable/quickstart/#routing), they are defined by using the Python decorator `@app.route`. There are a couple of parameters you can provide to `@app.route`, including the path (or URL) one would use to access the route (such as **api/breeds**), and the [HTTP method(s)](https://www.w3schools.com/tags/ref_httpmethods.asp) which can be used.
+
+## Code completion
+
+Code completion predicts the next block of code you're about to type based on the context Copilot has. For code completion, this includes the file you're currently working on and any tabs open in your IDE.
+
+Code completion is best for situations where you know what you want to do, and are more than happy to just start writing code with a bit of a helping hand along the way. Suggestions will be generated based both on the code you write (say a function definition) and comments you add to your code.
+
+> [!NOTE]
+> We don't provide specific prompts to use with Copilot, as part of the learning experience is to discover how to interact with Copilot. If you are unfamiliar with Flask or how to add routes, you can look at the routes defined above for inspiration, or ask Copilot chat for guidance!
+
+## Create the breeds endpoint
+
+Let's build our new route in our Flask backend with the help of code completion.
+
+1. Return to your codespace, or reopen it by navigating to your repository and selecting **Code** > **Codespaces** and the name of your codespace.
+2. Open **server/app.py**.
+3. Locate the comment which reads `## HERE`, which should be at line 68. Delete the comment to ensure there isn't any confusion for Copilot, and leave you're cursor there.
+4. Add the route which will call the database to find all breeds, and returns a JSON array with their names and IDs. If you begin typing `@app.route` or add a comment with the requirements like `# Route to get all breeds`, you should notice italicized text generated by GitHub Copilot.
+5. Select <kbd>Tab</kbd> to accept the code suggestion.
+    
+    The code generated should look a little like this:
+
+    ```python
+    @app.route('/api/breeds', methods=['GET'])
+    def get_breeds():
+        # Query all breeds
+        breeds_query = db.session.query(Breed.id, Breed.name).all()
+        
+        # Convert the result to a list of dictionaries
+        breeds_list = [
+            {
+                'id': breed.id,
+                'name': breed.name
+            }
+            for breed in breeds_query
+        ]
+        
+        return jsonify(breeds_list)
+    ```
+
+    > [!IMPORTANT]
+    > Because LLMs are probabilistic, not deterministic, the exact code generated can vary. The above is a representative example. If your code is different, that's just fine as long as it works!
+
+6. Save **app.py**
+
+
+## Validate the endpoint
+
+With the code created and saved, let's quickly validate the endpoint to ensure it works.
+
+1. Navigate to [http://localhost:5100/api/breeds](http://localhost:5100/api/breeds) to validate the route. You should see JSON displayed which contains the list of breeds!
+
+## Summary and next steps
+
+You've added a new endpoint with the help of GitHub Copilot! Let's start down the path of performing more complex operations by [exploring our project](./2-explore-project.md).
+
+## Resources
+
+- [Code suggestions in your IDE with GitHub Copilot](https://docs.github.com/en/copilot/using-github-copilot/getting-code-suggestions-in-your-ide-with-github-copilot)
+- [Code completions with GitHub Copilot in VS Code](https://code.visualstudio.com/docs/copilot/ai-powered-suggestions)
+- [Prompt crafting](https://code.visualstudio.com/docs/copilot/prompt-crafting)