Azure Administration

Final Project Description for Azure Static Web App

For my final project, I chose to create a website using Azure's Static Web Apps service. I had previously written an article featuring robotic cat images and decided to use those visuals as the foundation for this project. The goal was to build a gallery-style website where users could browse robotic cat images and also upload their own images with a description.

I developed the website using HTML, CSS, and JavaScript, and hosted the source code on GitHub. By connecting the GitHub repository directly to Azure Static Web Apps, I enabled continuous deployment — allowing the site to update automatically with every push to the main branch.

Azure Resources Used

Here’s an overview of the Azure resources I created and used to support the project:

1. Resource Group – FinalProjectResources

All services related to the project were grouped under this resource group, making it easier to manage and monitor the project infrastructure in one place.

2. Static Web App – technokittieswebsite

This is the core hosting service for the website. It pulls the latest version of the website from my GitHub repository and serves it as a production-ready static application.

3. Storage Account – storageforfinalproject

This account was configured with Blob Storage, and a container named catimages was created to hold all the robotic cat images and the site logo. It serves as the media storage layer of the application.

4. Azure Function App – technokittiesuploadfunction

This serverless Function App is designed to handle HTTP-triggered uploads from users. It receives image files via POST requests and routes them to Blob Storage. While the integration has been coded, it's still in testing and not yet fully functional.

5. SQL Database – CatImageDatabase

Planned to store metadata about uploaded images (such as user-provided descriptions), this database is set up and ready to be connected to the Function App. The integration between the front-end upload and database write is still in progress.

Project Outcome

This project successfully demonstrates:

Hosting a front-end site with Azure Static Web Apps
Version control and automated deployment with GitHub
Static asset management with Azure Blob Storage
Backend automation with a Function App
Future-ready architecture for storing user uploads in a SQL Database

Although the upload-to-database flow is not yet complete, the backend architecture is already in place to support it. Below, I’ve included screenshots and summaries of each Azure component to provide a detailed walkthrough of the implementation.

Resource Group - FinalProjectResources

This resource group organizes all the Azure services used in the project, including storage accounts, the static web app, function app, and supporting services. It provides a central location for managing and monitoring the project components.

Storage Account - storageforfinalproject

This Azure Storage Account manages the Blob container that stores the robotic cat images and logo. It is configured with locally redundant storage (LRS) to ensure high availability of the uploaded image assets.

3. Storage Container - catimages

This Blob Storage container holds the initial set of robotic cat images and the project logo. It serves as the primary storage location for static image assets displayed on the website.

4. Azure Function App - technokittiesuploadfunction

This Function App was created to handle HTTP-triggered file uploads from the website. The Python script processes the uploaded file and connects directly to the Azure Blob Storage container (catimages) to store the images. This function represents the core logic for automating image transfers, though the feature is still in progress.

5. SQL Database - CatImagesDatabase

This SQL Database was created to store metadata and user-uploaded image information for the project. Although the connection between the Function App and this database is not yet fully operational, it is intended as the backend for managing uploaded content in future updates.

6. GitHub Repository - AzureWebsiteFinalProject

This GitHub repository hosts the full codebase for the static website, including HTML, CSS, and JavaScript files. It is directly connected to Azure Static Web Apps for automatic deployment on code changes.

JavaScript File - app.js (Upload Logic)

The app.js file contains the JavaScript logic that handles the image upload process. It sends the uploaded image from the front end to the Azure Function App for storage.

Styling - styles.css

The styles.css file provides the design and layout for the website, including button styles, gallery formatting, and page structure. It ensures consistent presentation across different devices.

Page updated

Google Sites

Report abuse