Frontend Mentor - GitHub user search app

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.

Here is the live preview site: https://gazdagb.github.io/github-users-app/

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
  • Built with
  • What I learned
  • Continued development

Overview

This page is used for querying github users. It uses the Githubg User API in order to fetch user data. This is just a project to build my portfolio and experiment with REST APIs.

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Search for GitHub users by their username
• See relevant user information based on their search
• Switch between light and dark themes
• Bonus: Have the correct color scheme chosen for them based on their computer preferences. Hint: Research prefers-color-scheme in CSS.

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

Built with

• TAILWIND CSS
• JQUERY
• Flexbox
• CSS Grid
• Anime js
• Mobile-first workflow
• SVG Injector

What I learned

• In this section i learned that SVG's imported in an img tag cannot be styled with CSS (In order to make it work you have to use a so called SVGInjector)
• Experimented with Tailwind responsive querries
• SVG Morphing Animation
• DARK/LIGHT mode animation

Continued development

In the future i would like to authenticate the API calls so its not just 60 fetches/ hour. And also add some cool animations to the page.