Your assessment is to build out this GitHub user search web app using the GitHub users API and get it looking as close to the design as possible given the following layout for both desktop and tablet design (one layout) and mobile layout (one layout)
If you wish to download a copy of the figma file and import it to your Drafts, click here
All icons for the web app are located in the public/images route, you can use the Image component from Next JS App Router
If you are familiar with Tailwind CSS it is recommended to use it, however, plain CSS would be also accepted
- Display an error message and clean every label if a user is not found.
- If a GitHub user hasn't added their name, show their username where the name would be without the
@. - If a GitHub user's bio is empty, show the text "This profile has no bio".
- If a Github user's profile picture is empty use the default picture for empty profile (no_image.png)
- If any of the location, website, Twitter, or company properties are empty, show the text "Not Available" with grey font color.
- Website, Twitter, and company information should all be links to those resources by opening in a new tab when a user clicks in it.
- Take in consideration when doing the assessment, the public Github API Search has a limit of 60 attempts for every hour as described in the following link. Do not hit it frecuently to avoid getting time out from Github (API rate limit exceeded)