/Github-User-Search-App

In this project, I've used the GitHub users API to pull profile data and display it. It's a great challenge if you're looking to practice working with a 3rd-party API. It's Fully Functional with some decent Animation, Pre-Loader, and Hover effects.

Primary LanguageCSS

DevFinder - GitHub user search app solution

This is a solution to the GitHub user search app challenge on Frontend Mentor.

Table of contents

Overview

The challenge

Users should be able to:

  • Switch between light and dark themes.
  • Search for GitHub users by their username.
  • See relevant user information based on their search.
  • See hover states for all interactive elements on the page.
  • If a user doesn't exists, then show a alert or message of no result.
  • View the optimal layout for the app depending on their device's screen size.

Screenshot

Design Preview for the GitHub User Search App Solution

Links

My process

  • So, First I started this project by studying the provided Figma file. Once I was done with it, I started setting up the custom properties for everything like(Colors, Background, DarkMode- Colors, Font-size, Font-weight, Transition, Font-Family, etc) And Some Utility Classes.
  • After that, Finished setting up the rough structuring for HTML.
  • Started working on styling and responsiveness of the app and I took a Moblie First approach here while developing this project.
  • Took me nearly, 1-2 days to finish styling (2-3 hours).
  • Then, the next step was building up the logic and API connection using Vanilla Javascript.
  • I used Fetch API in this project and Github User API.
  • Once, It was working alright, I started fixing the small problems and trying to add some extra features to it (Like the No User Found Page).
  • And In the end, added all the loading Animation, Formatted the code to make it clean, readable, and added some comments to make it easy for others to understand.
  • Also, added a page pre-loader in it, but it's of no use as it barely comes in action.

Built with

  • FlexBox
  • CSS Grid
  • ES6 Pratices
  • CSS Animation
  • CSS Custom Properties
  • Mobile First Workflow
  • Semantic HTML5 Markup

What I learned

  • First an most crucial lesson, I learned while doing this project was about APIs.
  • Also, It was my first time using SVGs in SVG Form rather than using SVG in IMG tag.
  • Learned more about CSS Custom Properties.
  • Learned more about logic building in javascript.
  • Learned more about CSS Animation and Bezier Curves.
  • And Yeah, Just more on position absolute, before pseudo-class, and some hover effects before class.

Continued development

  • Obviously, Gonna focus more on API and Fetching data from APIs.
  • Focus more on UI Animation and In General UI Design.
  • Responsive Layout and Optimal Format.

Author

Acknowledgments

  • Credits to Google for helping throughout this project.