Merge pull request #37 from github-samples/geektrainer/restructure

Lab updates

Author: GeekTrainer

.github/copilot-instructions.md

@@ -1,30 +1,70 @@
-# Tailspin Toys Crowd Funding
+# Tailspin Toys Crowd Funding Development Guidelines
 
-Website for crowd funding for games.
+This is a crowdfunding platform for games with a developer theme. The application uses a Flask backend API with SQLAlchemy ORM for database interactions, and an Astro/Svelte frontend with Tailwind CSS for styling. Please follow these guidelines when contributing:
 
-## Backend
+## Code standards
+
+### Required Before Each Commit
+
+- Run Python tests to ensure backend functionality
+- For frontend changes, run builds in the client directory to verify build success and the end-to-end tests, to ensure everything works correctly
+- When making API changes, update and run the corresponding tests to ensure everything works correctly
+- When updating models, ensure database migrations are included if needed
+- When adding new functionality, make sure you update the README
+- Make sure all guidance in the Copilot Instructions file is updated with any relevant changes, including to project structure and scripts, and programming guidance
+
+### Global language guidance
+
+- Use type hints for function parameters and return values for all languages which support them
 
-The backend is written using:
+### Python and Flask Patterns
 
-- Flask for the API
-- SQLAlchemy for the ORM
-- SQLite for the database
+- Use SQLAlchemy models for database interactions
+- Use Flask blueprints for organizing routes
+- Follow RESTful API design principles
 
-## Frontend
+### Svelte and Astro Patterns
 
-The frontend is written using:
+- Use Svelte for interactive components
+- Follow Svelte's reactive programming model
+- Create reusable components when functionality is used in multiple places
+- Use Astro for page routing and static content
 
-- Astro for routing
-- Svelte for the components and interactivity
-- Tailwind CSS for styling
+### Styling
 
-## GitHub Actions Workflows
+- Use Tailwind CSS classes for styling
+- Maintain dark mode theme throughout the application
+- Use rounded corners for UI elements
+- Follow modern UI/UX principles with clean, accessible interfaces
+
+### GitHub Actions workflows
 
 - Follow good security practices
-    - Make sure to explicitly set the workflow permissions
+- Make sure to explicitly set the workflow permissions
+- Add comments to document what tasks are being performed
 
-## Code standards
+## Scripts
+
+- Several scripts exist in the `scripts` folder
+- Use existing scripts to perform tasks rather than performing them manually
+- Existing scripts:
+    - `scripts/setup-env.sh`: Performs installation of all Python and Node dependencies
+    - `scripts/run-server-tests.sh`: Calls setup-env, then runs all Python tests
+    - `scripts/start-app.sh`: Calls setup-env, then starts both backend and frontend servers
+
+## Repository Structure
 
-- Use good variable names, avoiding abbreviations and single letter variables
-- Use the casing standard for the language in question (camelCasing for TypeScript, snake_casing for Python, etc.)
-- Use type hints in all languages which support them
+- `server/`: Flask backend code
+  - `models/`: SQLAlchemy ORM models
+  - `routes/`: API endpoints organized by resource
+  - `tests/`: Unit tests for the API
+  - `utils/`: Utility functions and helpers
+- `client/`: Astro/Svelte frontend code
+  - `src/components/`: Reusable Svelte components
+  - `src/layouts/`: Astro layout templates
+  - `src/pages/`: Astro page routes
+  - `src/styles/`: CSS and Tailwind configuration
+- `scripts/`: Development and deployment scripts
+- `data/`: Database files
+- `docs/`: Project documentation
+- `README.md`: Project documentation

.github/workflows/copilot-setup-steps.yml

@@ -22,8 +22,7 @@ jobs:
           cache: "pip"
 
       - name: Install Python dependencies
-        working-directory: ./server
-        run: pip install -r requirements.txt
+        run: ./scripts/setup-env.sh
 
       # Frontend setup - Node.js
       - name: Set up Node.js
@@ -36,12 +35,3 @@ jobs:
       - name: Install JavaScript dependencies
         working-directory: ./client
         run: npm ci
-
-      # .NET setup
-      - name: Setup .NET
-        uses: actions/setup-dotnet@v3
-        with:
-          dotnet-version: '9.0.x'
-      
-      - name: Display .NET version
-        run: dotnet --version

README.md

@@ -2,6 +2,10 @@
 
 This repository contains the project for a 1 hour guided workshop to explore GitHub Copilot Agent Mode and related features in Visual Studio Code. The project is a website for a fictional game crowd-funding company, with a [Flask](https://flask.palletsprojects.com/en/stable/) backend using [SQLAlchemy](https://www.sqlalchemy.org/) and [Astro](https://astro.build/) frontend using [Svelte](https://svelte.dev/) for dynamic pages.
 
+To begin the workshop, start at [docs/README.md](./docs/README.md)
+
+Or, if just want to run the app...
+
 ## Launch the site
 
 A script file has been created to launch the site. You can run it by:

docs/0-prereqs.md

@@ -1,21 +1,24 @@
 # Exercise 0: Prerequisites
 
-Before we get started on the lab, there's a few tasks we need to complete to get everything ready. We need to get a copy of the repository which includes the code, then spin up a [codespace](https://github.com/features/codespaces) to create our code.
+Before we get started on the lab, there's a few tasks we need to complete to get everything ready. We need to get a copy of the repository which includes the code, then spin up a [codespace](https://github.com/features/codespaces) to use to create our code.
 
 ## Setting up the Lab Repository
 
 To create a copy of the repository for the code you'll create an instance from the [template](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository). The new instance will contain all of the necessary files for the lab, and you'll use it as you work through the exercises. 
 
-1. Navigate to the GitHub repository for this lab: `https://github.com/github-samples/agents-in-sdlc`.
+1. In a new browser window, navigate to the GitHub repository for this lab: `https://github.com/github-samples/agents-in-sdlc`.
 2. Create your own copy of the repository by selecting the **Use this template** button on the lab repository page. Then select **Create a new repository**.
 
     ![Use this template button](images/use-template.png)
 
-3. For labs at Microsoft build, choose **Microsoft-Build-2025** as the GitHub organization. Set the repository name to **310-<YOUR_GITHUB_HANDLE>**, replacing **<YOUR_GITHUB_HANDLE>** with your GitHub handle. So if your handle was Mona, you'd use **310-Mona**.
+> [!IMPORTANT]
+> If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors for naming the repository.
+
+3. If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors. Otherwise, you can create the new repository in an organization where you have access to either GitHub Copilot Pro+ or GitHub Copilot Enterprise.
 
     ![Input the repository template settings](images/repository-template-settings.png)
 
-4. Make a note of the repository path you created, which will be **Microsoft-Build-2025/310-<YOUR_GITHUB_HANDLE>**, as you will be referring to this later in the lab.
+4. Make a note of the repository path you created (`organization-or-user-name/repository-name`), as you will be referring to this later in the lab.
 
 ## Creating a codespace
 
@@ -30,22 +33,12 @@ Next up, we will be using a codespace to complete the lab exercises. [GitHub Cod
 
     ![Create a new codespace](images/create-codespace.png)
 
-4. Wait for the codespace to be created. This may take a few minutes depending on the container image size, the number of extensions being installed and any post install scripts that are being run. Please be patient while the codespace is being created.
-
-    ![Screenshot showing the codespace when ready](images/codespace-startup.png)
-
-## Update and restart extensions
-
-The setup process for the codespace will install and setup [VS Code extensions](https://code.visualstudio.com/docs/configure/extensions/extension-marketplace). As with any software, updates may be needed. When your codespace is created we'll need to ensure everything is up-to-date.
-
-1. Select **Extensions** on the workbench on the left side of your codespace.
+The creation of the codespace will take several minutes, although it's still far quicker than having to manually install all the services! That said, we can use this time to take advantage of our ability to assign tasks to GitHub Copilot which it can perform asynchronously, which we'll turn our attention to next!
 
-    ![Screenshot of the extensions window with multiple extensions showing either Update or Reload Window buttons](images/extensions-updates.png)
+## Summary
 
-2. Select **Update** on any extensions with an **Update** button. Repeat as necessary.
-3. Select **Reload Window** on any extensions with a **Reload Window** button to reload the codespace.
-4. When prompted by a dialog, select **Reload** to reload the window. This will ensure the latest version is being used.
+Congratulations, you have created a copy of the lab repository! You also began the creation process of your codespace, which you'll use when you begin writing code. We're going to return back to this after the next lesson, so don't worry.
 
-## Setup Complete
+## Next step
 
-Congratulations, you have created a copy of the lab repository! Now, let's move on to the [next step](./1-mcp.md), utilizing Model Context Protocol (MCP) to provide GitHub Copilot Agent Mode access to a suite of tools.
+Since we've got a few minutes, let's get Copilot working on some tasks asynchronously for us! We can do this by [creating issues and assigning them ot Copilot coding agent](./1-copilot-coding-agent.md).