github-user-search-app

Frontend Mentor - GitHub user search app solution

This is a solution to the GitHub user search app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

Screenshot

My process

Built with

What I learned

I learned to use CSS Grid to position items in a 2-dimensional format. I also learned to use fetch and asynchronous programming to get data from an API and make use of the data. Also, I learned to use the prefers-color-scheme property of CSS to customize the look of the web app according to the user’s system preferences.

@media (prefers-color-scheme: light) {
    #light {
        display: none;
    }
    #dark {
        display: block;
    }

    body {
        background-color: #f6f8ff;
        color: #697c9a;
    }

async function getUserInformation(username) {
    const response = await fetch(`https://api.github.com/users/${username}`);
    if (!response.ok) throw Error("No response returned") 
    const data = await response.json();
    return data;
}

Continued development

I wanna go deeper into learning async-await and its uses, and also, I want to continue learning about CSS Grid and thus solidify my knowledge of it. I want to learn TailwindCSS and use it effectively and also ReactJS and use both of them in upcoming projects.

Useful resources

Author