React web app and Azure QnA bot to centralize learning resources

Ayca Bas

February 8th, 20221 0

Learn from the community is a series of articles to highlight real-life project scenarios covered in the Show & Tell interviews on our Microsoft 365 Developer YouTube channel. It’s a great opportunity for me to inspire you with the end-to-end solutions built on the Microsoft Cloud and help you on your next project with useful resources.

About Project Resourcium

A group of students from the University College London observed the struggle of having many different portals and websites that students are required to use during their study. They introduced us to the Project Resourcium that aims to support students’ education by centralizing resources for them in a single portal.

Project Resourcium was developed to simplify the processes for students by centralizing the learning materials for students, as well as providing support with the Wellbeing section and the QnA Bot to help students during their study.

Resourcium is designed as a React app that provides many features that aim to support students during their study including:

The two-factor authentication (2FA) is integrated to provide secure access to the app. This feature leverages:
- Azure Active Directory to enable single sign on functionality
- Azure Functions to generate a unique secret for each user
- Azure Cosmos DB to store a user’s information
- Microsoft Graph is consumed to get user profile and calendar details in this app.
The Wellbeing section is designed to facilitate forms for students to complete and describe their blockers that they need help with. This section works as follows:
- Completed student forms are automatically stored in a centralized SharePoint site by using Microsoft Power Automate flow.
- Centralized and stored form data is consumed in Power BI to generate a report by using another Power Automate flow and the generated report is then embedded in the SharePoint site.
The Student Help page provides students with the option to search for learning materials they are interested in. This page consumes both the Microsoft Learn API and LinkedIn Learning API to gather learning resources. This page also provides a QnA Bot to allow students to ask questions when they are not able to find what they are looking for. The QnA Bot is built by using the Azure Bot Service and QnA Maker.