Integrating GitHub User and Repo Data into WebSpark's GitHubSpark Section

In this tutorial, we'll walk through how to use GitHub's API and asynchronous programming in .NET to create a responsive and interactive interface for displaying GitHub user and repository data in the GitHubSpark section of WebSpark. We will also make use of Bootstrap 5 to design a polished and user-friendly interface.

Why Use Async Programming?

Asynchronous programming is crucial when working with external APIs, like GitHub's, because it ensures the web page remains responsive while waiting for the API responses. The async/await pattern in .NET helps make non-blocking API calls and ensures that the user experience is not interrupted, enhancing the smoothness and efficiency of your web application.

Fetching GitHub Data Asynchronously

First, we will create a method that fetches GitHub user and repository data asynchronously using the HttpClient class. This allows us to make non-blocking HTTP requests to the GitHub API.

public async Task<GitHubCacheViewModel> GetGitHubDataAsync(string username, string repoName)
{
    var user = await _httpClient.GetFromJsonAsync<GitHubUser>($"https://api.github.com/users/{username}");
    var repo = await _httpClient.GetFromJsonAsync<GitHubRepo>($"https://api.github.com/repos/{username}/{repoName}");

    return new GitHubCacheViewModel
    {
        User = user,
        RepoInfo = repo
    };
}

In the code above, we use the await keyword to make sure the API requests to GitHub are handled asynchronously, improving the efficiency of our application by not blocking the main thread.

Creating the View Model

Next, we define a view model, GitHubCacheViewModel, to store the user and repository data. This helps to separate the data fetching logic from the view.

public class GitHubCacheViewModel
{
    public GitHubRepo? RepoInfo { get; set; }
    public GitHubUser? User { get; set; }
}

With this model, we can easily pass data from our controller to the view and render it in the UI.

Building the Bootstrap-Powered View

We can now create a Bootstrap-powered view to display the GitHub user and repository data. Bootstrap 5's responsive components make it easy to create an attractive and functional UI that works across different screen sizes. Below is an example of how to display the GitHub user's information in a card component.

<div class="card shadow-sm">
    <div class="card-header bg-dark text-white">
        <h5 class="card-title mb-0">
            <i class="bi bi-person-circle"></i> GitHub User
        </h5>
    </div>
    <div class="card-body text-center">
        <img src="@Model.User?.ResponseResults?.AvatarUrl" alt="Avatar" class="rounded-circle img-thumbnail mb-3">
        <h5 class="card-title">@Model.User?.ResponseResults?.Login</h5>
        <p class="text-muted">@Model.User?.ResponseResults?.Bio</p>
        <a href="@Model.User?.ResponseResults?.HtmlUrl" class="btn btn-primary" target="_blank">
            <i class="bi bi-github"></i> View Profile
        </a>
    </div>
</div>

In this example, we used Bootstrap's card component along with Bootstrap Icons to create a user-friendly and aesthetically pleasing UI for displaying GitHub user data.

Handling Asynchronous Fetching with Grace

When working with asynchronous data fetching, it's essential to provide feedback to the user. If the GitHub API request fails or data is unavailable, displaying an error message can enhance the user experience.

@if (Model.User == null)
{
    <div class="alert alert-danger" role="alert">
        Could not retrieve GitHub user data. Please try again later.
    </div>
}

This ensures that the UI remains engaging, even if the external API call fails.

Conclusion

Integrating GitHub user and repository data into the GitHubSpark section of WebSpark demonstrates the power of asynchronous programming in .NET. Not only does it show how easily external APIs can be consumed, but it also highlights how to build a responsive, user-friendly interface using Bootstrap 5.

Asynchronous programming ensures that the page loads smoothly, even when waiting for external resources like GitHub's API. Combining clean async code with polished Bootstrap design, WebSpark illustrates how developers can benefit from both performance and aesthetics in real-world applications.