Skip to content

Commit

Permalink
adding contoso real estate workshop
Browse files Browse the repository at this point in the history
  • Loading branch information
cyz committed Aug 14, 2023
1 parent ec384e5 commit ca0ed26
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 14 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Welcome to the [Next Generation Team's Workshop Library](presentation.pptx), bui
2️⃣ | [Get Started with Django](./full/django-get-started/README.md) | Christopher Harrison | 1-1.5 hours | Build a web app with Django | [🎥](https://youtu.be/H3dDiVNY_ks) | Python, [Get started with Django](https://docs.microsoft.com/learn/modules/django-get-started/?WT.mc_id=academic-56601-chrhar)|
2️⃣ | [Build a Mood Journal Progressive Web App](./full/mood-journal-progressive-web-app/README.md) | Beth Pan | 1.5 hours | Build a Mood Journal for Mental Health as a Progressively-Enhanced Web app | [🎥](https://youtu.be/12THeQreSQ0) | JavaScript|
2️⃣ | [Build an API with Data API Builder for your Static Web Apps](./full/smart-shopping-planner-app/README.md) | Julia Muiruri | 1 hour | Smart Shopping Planner is a React project, that uses an Azure SQL database and uses Data API Builder to provide REST endpoints to connect to the database. | [🎥](https://youtu.be/9N1Z9KPbeEY) | JavaScript, Data API Builder (Static Web Apps database connections)|
2️⃣ | [Exploring Contoso Real Estate project with Codespaces and Azure Static Web Apps](./short/explore-art-rest-api/README.md) | Cynthia Zanoni and Glaucia Lemos | 1 hour | This workshop introduces Contoso Real Estate, a JavaScript project that showcases a composite architecture for scalable web solutions. You will learn how to set up your development environment using Codespaces and Azure Static Web Apps CLI, and how to deploy the project to Azure Static Web Apps. | 🎥 (*comming soon*) | JavaScript, Codespaces, Azure Static Web Apps |
2️⃣ | [Exploring Contoso Real Estate project with Codespaces and Azure Static Web Apps](./full/exploring-contoso-real-estate-codespaces-aswa-cli/README.md) | Cynthia Zanoni and Glaucia Lemos | 1 hour | This workshop introduces Contoso Real Estate, a JavaScript project that showcases a composite architecture for scalable web solutions. You will learn how to set up your development environment using Codespaces and Azure Static Web Apps CLI, and how to deploy the project to Azure Static Web Apps. | [🎥](https://www.youtube.com/watch?v=W_35cOyBexA) | JavaScript, Codespaces, Azure Static Web Apps |

---
<details>
Expand Down
11 changes: 8 additions & 3 deletions full/exploring-contoso-real-estate-codespaces-aswa-cli/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ The project demonstrates best development practices such as the use of monorepo

## 📚 About this workshop
- **Duration:** 60 minutes
- **Slides:** [slides](./slides.pptx)
- **Slides:** [slides](https://github.com/microsoft/Reactors/tree/main/devops-devtools/contoso-real-estate/content/presentation)

### ⭐️ Learning objectives

Expand Down Expand Up @@ -45,8 +45,13 @@ You can also configure your development container to run a specific runtime and

This workshop includes the setup needed for you to deploy **free** to [Azure Static Web Apps](https://azure.microsoft.com/products/app-service/static/?WT.mc_id=academic-101248-cyzanon).

## Video

## 📚 Resources
<iframe width="560" height="315" src="https://www.youtube.com/embed/W_35cOyBexA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

> 🎥 Click to watch Cynthia and Glaucia walk you through the workshop material and to gain some tips about delivering this workshop.
## 📚 Pre-learning Resources

* [🎥 Codespaces Tutorial](https://aka.ms/CodespacesVideoTutorial)
* [Codespaces](https://github.com/features/codespaces)
Expand All @@ -55,6 +60,6 @@ This workshop includes the setup needed for you to deploy **free** to [Azure Sta

## 🔎 Feedback

Be sure to give [feedback about this workshop](https://forms.office.com/r/MdhJWMZthR/?WT.mc_id=academic-80067-sagibbon)!
Be sure to give [feedback about this workshop](https://forms.office.com/r/MdhJWMZthR)!

[Code of Conduct](../../CODE_OF_CONDUCT.md)
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@

# JavaScript Portfolio Site with GitHub Codespaces
# Exploring Contoso Real Estate project with Codespaces and Azure Static Web Apps

## Workshop Source

https://github.com/microsoft/codespaces-project-template-js
https://github.com/microsoft/Reactors/tree/main/devops-devtools/contoso-real-estate

## Stage 1: Desired Results

Students will be skilled on how to use Codespaces through using a template project to deploy their own portfolio web application in React.
Students will be skilled on how to use Codespaces, understand the Contoso Real Estate project, Azure Static Web App CLI and how to deploy to Azure Static Web Apps.

Includes:

* Utilizing Codespaces for development, using only web browser
* Learn web development
* Deploy to GitHub Pages
* Understand composable architecture
* Use basic Linux commands to manipulate files
* Use Azure Static Web Apps CLI
* Deploy to Azure Static Web Apps

## Stage 2: Evidence

Students will have a customized and deployed portfolio web application they can continue to use to highlight their contributions as they complete additional projects.
Students will have to create a new `portal` component. Challenge them to customize the site, making few changes to the CSS and HTML using GitHub Copilot and deploy to Azure Static Web Apps.

## Stage 3: Learning Plan

* Create own repository from template repository
* Create a fork of the Contoso Real Estate project
* Launch project within Codespaces
* Customize site to their information within Codespaces
* Customize site with GitHub Copilot
* Run the web application within their Codespace
* Deploy web application (portfolio site) to Azure Static Web Apps or GitHub pages
* Browse the deployed app in a browser
* Deploy to Azure Static Web Apps
* Browse the deployed app in a browser

0 comments on commit ca0ed26

Please sign in to comment.