Microsoft student ambassador Learning Hub

When I joined the Microsoft Learn Student Ambassadors (MLSA) program, I wanted a simpler way to find the learning resources relevant to my journey as an ambassador.

I created MLSA Learning Hub to bring these resources together in one accessible interface. Rather than searching across different pages and links, users can browse an organized collection of learning materials and quickly navigate to the resources they need.

The project focuses on resource discovery and accessibility, with a configurable catalogue that can evolve as new learning materials become relevant to the community.

Live application: msambassador.netlify.app

Core functionality

• Centralized resource catalogue: Brings learning resources together in a single interface.
• Categorized navigation: Organizes resources into categories defined in a dedicated data file.
• Direct access to learning materials: Provides links that allow users to navigate to the relevant learning resources.
• Customizable content: Makes it possible to update resource categories and links without restructuring the application.
• Configurable presentation: Includes a dedicated hero section and a customizable visual identity.

Technical implementation

The application is built with React 18, Vite, Tailwind CSS 3, and Lucide React.

A key implementation choice is separating resource data from the presentation layer. The learning catalogue is maintained in src/data/resources.js, while the interface is organized into React components.

This structure keeps the application lightweight and makes resource maintenance straightforward: adding a learning link or updating a category does not require redesigning the entire interface.

Resource catalogue

The src/data/resources.js file centralizes the resource categories and their associated links.

This configuration-driven approach is particularly useful for a learning portal because the content can change independently of the UI. It also provides a simple foundation for expanding the catalogue as the program evolves.

The following example illustrates how a categorized resource catalogue could be structured. It is illustrative code, not a verified reproduction of the repository's implementation.

const resources = [
  {
    category: "Cloud Computing",
    items: [
      {
        title: "Explore Microsoft Azure",
        url: "https://learn.microsoft.com/azure/",
      },
    ],
  },
];
 
export default resources;

Keeping content in a dedicated data structure makes resource organization easier to maintain and allows React components to render categories and links dynamically.

Interface and deployment

Tailwind CSS 3 provides the styling utilities, while Lucide React supplies icons for the interface. The project also includes a dedicated hero visual in public/hero.svg, which can be replaced with a custom image.

Vite handles local development and production builds. The application is configured for deployment on Netlify, with deployment settings maintained in netlify.toml.

The development workflow is straightforward:

npm install
npm run dev
npm run build

What this project demonstrates

• Problem-driven development: Turning a personal learning-resource discovery need into a dedicated web application.
• React component architecture: Separating interface components from the resource catalogue.
• Content organization: Structuring learning links into categories for easier navigation and maintenance.
• Frontend tooling: Using React 18, Vite, Tailwind CSS 3, and Lucide React.
• Deployment readiness: Preparing a frontend application for hosting on Netlify.

MLSA Learning Hub reflects a practical approach to developer community participation: identifying friction in the learning experience and building a focused tool to make resource discovery simpler.