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 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 and Svelte Kit for the front end, Azure Functions and a MongoDB API database 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.
Each team member will need an Azure account. With Azure for Students, you can access $100 in free credit, and a large suite of free services!
Your team should be familiar with the following:
- Git and GitHub
- Forking and cloning repositories
- Creating and managing branches
- HTML, CSS and JavaScript
Each member of your team will also need the following software installed:
-
Azure Functions Core Tools, which can be installed by running the following command (after Node.js and npm are installed)
npm i -g azure-functions-core-tools@3 --unsafe-perm true
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.
A sample of the site has been deployed so you can see how it looks in action.
There are two key folders for the application: src/routes, which contains the Svelte files used for the front-end, and api, which contains the Azure Functions used for the back-end. The flow of the application is as follows:
- A user navigates to the page and is presented with the option to login (and sees a picture of a cute dog)
- User authenticates using their GitHub credentials
- After authenticating, the user can now name dogs. Each time they name a dog, it's saved to a Mongo API database.
- The user can click on the "named dogs" link to review the list of dogs they've named
Note: No updates to the application code will be made during this workshop. Your team will be able to successfully complete the workshop without any experience with Svelte. The only file your team will modify is staticwebapp.config.json.
Your team will obtain the starter, deploy the application to the cloud, enable authentication, and create and configure the database.
- Obtain the source code: The first step when working with any codebase is to download it. Your team's first goal will be to obtain the code from GitHub.
- Deploy to the cloud: Because the pet shelter wants the application to be publicly available, your team will need to deploy the application. For this workshop, your team will use Azure Static Web Apps, which is able to host the application and run the Azure Functions.
- Enable authentication: A key component of the app is allowing users to name dogs and have the names saved to a list. This requires authentication, which is built-in to Azure Static Web Apps. To achieve this goal, your team will configure the application so only GitHub authentication is enabled.
- Add a database: Saving information typically requires a database, and this application is no different. The code has already been added to use a Mongo API database, which is available through Cosmos DB on Azure. Your team will create a Cosmos DB account, and then update the application on Azure Static Web Apps to use your newly created database.
This workshop is designed to be a goal-oriented self-exploration of Azure and related technologies. Your team can use the validation tool to confirm the Deploy to the cloud and Enable authentication goals have been met. Validating the final goal of Add a database will be manual - you'll use the application your team deployed and confirm it works as expected.
This project is designed as a potential seed for future development. If you were to continue with this idea, your team could potentially:
- Use the Petfinder API to create an application to match potential adopters with dogs
- Use the Bing Maps API to search based on location
- Use Custom Vision to identify dog breeds
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.