ereljapco / fem-github-user-search-app

Solution for FrontendMentor's challenge where the user can search for a Github user by their username and view their details.

Frontend Mentor - Notifications page 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

• Frontend Mentor - Notifications page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

Overview

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
• Have the correct color scheme chosen for them based on their computer preferences.
• Persist theme with localStorage

Screenshot

Links

• Solution URL: https://github.com/ereljapco/fem-github-user-search-app
• Live Site URL: https://github-user-search-app-erj.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Fetch API
• Github API
• date-fns - Modern JS date utility library

What I learned

• Components made it easier for me to focus on one feature at a time rather.
• Make the features work first before working on the design.
• Setting the background-color of input to transparent works well in Firefox, but with Chrome's autocomplete, it adds a background-color. Something to work on in the future 🛠️

.search-form__input {
  width: 100%;
  color: inherit;
  font-family: inherit;
  font-size: 0.78rem;
  background-color: transparent;
  border-color: transparent;
}

Continued development

Features in the Future:

• change the border-color of the .search-form if there are no results
• fix the background-color of the .search-form__input on Chrome

Useful resources

Author

• Frontend Mentor - @ereljapco
• LinkedIn - /in/ereljapco

Acknowledgments

I don't have a Frontend Mentor Pro account so I based the design from the photos available at the website and from NinjaInShade's live site. Thank you!