Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 29 additions & 60 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,79 +2,48 @@

According to the American Society for the Prevention of Cruelty to Animals (ASPCA), animal shelters receive about 3 million dogs annually - about 6 dogs per minute! While euthanasia rates have dropped, over 500,000 dogs are euthanized because they could not be matched with their original owners or an adoptive family.

Your team will aid a fictional adoption agency with deploying their website to the cloud. The application is designed to raise awareness of different dog breeds. A potential adopter can use the app to flip through pictures of various dogs and mark their favorites. Because each user will be marking various dogs as their favorites, they would like users to authenticate by using their Twitter accounts.
Your team will aid a fictional adoption agency with deploying their website to the cloud. The application is designed to raise awareness of different dog breeds. A potential adopter can use the app to flip through pictures of various dogs and come up with potential names for each dog. This can be a great way to get a family excited about the possibility of adopting a new pet!

The agency has already created the website using [Svelte](https://svelte.dev/) and [Svelte Kit](https://kit.svelte.dev/) for the front end, [Azure Functions](https://docs.microsoft.com/azure/azure-functions/functions-overview) and a [MongoDB API database](https://docs.mongodb.com/drivers/node/current/) for the back-end. They have provided documentation your team can review to gain an understanding of how it works, and run it locally for testing purposes.

## Resources

A series of resources will be provided to help your team determine the appropriate steps for completion. The resources provided should provide your team with enough information to achieve each goal. If you get stuck, you can always ask a mentor for additional help.

## Goals

Your team will deploy the application to the cloud, enable authentication, and create and configure the database. To confirm your team has completed each goal, your team will use an automated validation tool. As each goal is met the next one will be revealed.

### Goal 0: Run the application locally

The adoption agency's developers have provided full documentation on how to download and configure the application to run locally.

### Goal 1: Deploy website to Azure Static Web Apps

[Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview) is a service which builds and deploys full stack web apps to Azure from a code repository. It provides hosting for static files (HTML, CSS, JavaScript, etc.) and server-side code through serverless Azure Functions. Azure Static Web Apps can host applications written with any front-end framework, including React, Angular, Vue.js and Svelte. Azure Functions can be used to access server resources such as databases or other APIs. A site deployed to Azure Static Web Apps automatically scales, and can even have custom domains.

Success criteria:

- The shelter's site has been successfully deployed to Azure Static Web Apps
- You can open the index page on the newly created Azure Static Web App
## Prerequisites

Once this has been completed, you will enter the site's URL into the validation tool.
Each team member will need an Azure account. With [Azure for Students](https://aka.ms/a4s), you can access $100 in free credit, and a large suite of free services!

#### Deployment resources
Your team should be familiar with the following:

Your team might find these resources helpful:
- Git and GitHub
- [Forking](https://docs.github.com/github/getting-started-with-github/quickstart/fork-a-repo) and [cloning](https://docs.github.com/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository) repositories
- [Creating and managing branches](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/making-changes-in-a-branch/managing-branches)
- HTML, CSS and JavaScript

- [What is Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/overview)
- [Quickstart: Building your first static site - Visual Studio Code](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vanilla-javascript#create-a-static-web-app)
- [Quickstart: Create a static web app - Azure Portal](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript#create-a-static-web-app)
Each member of your team will also need the following software installed:

### Goal 2: Enable authentication
- [Git](https://git-scm.com/downloads)
- [Install git on macOS](https://git-scm.com/download/mac)
- [Install git on Windows](https://git-scm.com/download/win)
- [Install git on Linux](https://git-scm.com/download/linux)
- [Visual Studio Code](https://code.visualstudio.com/)
- [Node.js](https://nodejs.org/)
- [Install Node.js on Windows](https://docs.microsoft.com/windows/dev-environment/javascript/nodejs-on-windows)
- [Install Node.js on Linux or MacOS](https://github.com/nvm-sh/nvm#installing-and-updating)

Congratulations on deploying the application to Azure Static Web Apps! The shelter staff is thrilled to see their site on the internet!

The application is designed to allow potential adopters identify their favorite dog breeds, so we need a way to identify users. The shelter staff happy with either GitHub or Twitter authentication. Your team will enable authentication for the application.

Success criteria:

- The application is updated and redeployed to enable authentication via either GitHub or Twitter
- After the updated site is deployed, a user can authenticate using the selected provider by clicking the login link, and is then presented with the buttons to mark a dog as a favorite.

#### Authentication resources

Your team might find these resources helpful:

- [Azure Static Web Apps - Login](https://docs.microsoft.com/en-us/azure/static-web-apps/authentication-authorization#login)
- [Access user information in Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/user-information?tabs=javascript)
- [Configure Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/configuration)
- [Troubleshooting deployment and runtime errors](https://docs.microsoft.com/en-us/azure/static-web-apps/troubleshooting)

### Goal 3: Create and configure a cloud-based database

The shelter staff can't believe how close they are to seeing their prototype come to life! With authentication enabled, the last step is to enable a database.
## Resources

Because the application uses Mongo DB APIs to access the database, [Azure Cosmos DB](https://docs.microsoft.com/en-us/azure/cosmos-db/introduction) with the [API for MongoDB](https://docs.microsoft.com/en-us/azure/cosmos-db/introduction) is a great fit. With [Cosmos DB serverless](https://docs.microsoft.com/en-us/azure/cosmos-db/serverless) charges are based on usage. Your team will create a Cosmos DB account and configure the application to use your new Cosmos DB deployment.
A series of resources will be provided to help your team determine the appropriate steps for completion. The resources provided should provide your team with enough information to achieve each goal. If you get stuck, you can always ask a mentor for additional help.

Note: The application will automatically create a database and collection to store data. Your team only needs to [create an Azure Cosmos DB account](https://docs.microsoft.com/en-us/azure/cosmos-db/create-cosmosdb-resources-portal#create-an-azure-cosmos-db-account).
## Goals

Success criteria:
Your team will obtain the starter, deploy the application to the cloud, enable authentication, and create and configure the database.

- Your team creates a Cosmos DB account
- Clicking on the "Mark as favorite" button successfully saves an entry to the database and displays the next dog
- The *favorites* page of the application lists the links to all dogs marked as favorites
1. [Run the application locally](./goals/0-run-locally.md)
1. [Deploy to the cloud](./goals/1-deploy.md)
1. [Enable authentication](./goals/2-authentication.md)

#### Database resources
## Where do we go from here?

Your team might find these resources helpful:
This project is designed as a potential seed for future development. If you were to continue with this idea, your team could potentially:

- [Get the MongoDB connection string by using the quick start](https://docs.microsoft.com/en-us/azure/cosmos-db/connect-mongodb-account#get-the-mongodb-connection-string-by-using-the-quick-start)
- [Create an Azure Cosmos DB account](https://docs.microsoft.com/en-us/azure/cosmos-db/create-cosmosdb-resources-portal#create-an-azure-cosmos-db-account)
- [Configure application settings for Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/application-settings)
- Use the [Petfinder API](https://www.petfinder.com/developers/) to create an application to match potential adopters with dogs
- Use the [Bing Maps API](https://docs.microsoft.com/bingmaps/getting-started/) to search based on location
- Use [Custom Vision](https://azure.microsoft.com/services/cognitive-services/custom-vision-service/) to identify dog breeds
184 changes: 1 addition & 183 deletions api/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions api/starter-settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"IsEncrypted": false,
"Values": {
"AzureWebJobsStorage": "",
"FUNCTIONS_WORKER_RUNTIME": "node",
"MONGO_CONNECTION_STRING": "mongodb://localhost"
}
}

Loading