Contents

Cloud Lunch and Learn Official Website

Contents

As you may know, Cloud Lunch and Learn is a recent community initiative, doing its baby steps to become a better and stable initiative. Up to now, Cloud Lunch and Learn did not have a proper website, it was just a Github page, listing the scheduled sessions, in one of my Github repos. This page was meant to enable anyone to have access to the list of scheduled sessions and all relevant information related to each of these sessions.

And to be honest, it was serving the purpose during the first months of this initiative. But the team knew that we would need a proper website to promote the initiative in a better and proper way.

Plan

We started by defining a plan, considering our constraints, specially the time constraint. So, we decided to do not build the site from the scratch, but instead, just buy a HTML template and then change it to fit the requirements. So, we found a site with great templates available - themeforest.net, and we found a template that, with some adjustments, would fit our needs.
We had a huge help from Andressa Lombardo with everything related to UI and UX. A big shout-out to Andressa, since we have no one else with UI/UX skills in the team, and we were struggling to create nice materials to brand the site.
Also, myself and João Gonçalves took care of the environment to host the website, in the Cloud (of course!!), and we decided to take this opportunity to leverage Blazor WebAssembly and build a clean and simple website with minimal effort.
And to close with a cherry on top of the cake, we decided to use the Azure Static Web Apps (Preview) service.

Architecture

So, in terms of the architecture, it is quite simple to understand following the diagram below. We are using Github to store the source code, and by leveraging Github Actions, we are able to automate the workflow to deploy the site to the different environments we use.
In terms of hosting the website, as mentioned previously, we decided to use Azure Static Web Apps, specially due to the built-in integration with Github repositories that allows you to quickly implement CI/CD on your app. And in terms of technology, we are using Blazor WebAssembly and HTML + CSS to build a simple application.
As a data source, in the beginning we thought about using Sessionize API, since all the CLL sessions start to be managed on Sessionize, but due to some restrictions in terms of querying capabilities of the current APIs provided by Sessionize, we decided to implement a secondary data source that would provide those querying capabilities and would enable to automate the session management workflows. In this case, we opted to use Azure Cognitive Search.
/cloud-lunch-learn-new-website/cll-website-architecture.png

Resources

Follows a list of useful resources that you can use in case you want to build a web app using a similar architecture. I just want to highlight the article by Christopher Maneu, that explains us all details to create and configure a Blazor WebAssembly App using an Azure Static Web App.

Resource
Blazor WebAssembly apps to Azure Static Web Apps
How to use Azure Cognitive Search from a .NET Application
Blazor WebAssembly 3.2.0 now available