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.
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
- Solution URL: https://github.com/ereljapco/fem-github-user-search-app
- Live Site URL: https://github-user-search-app-erj.netlify.app/
- 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
- 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;
}
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
- Frontend Mentor - @ereljapco
- LinkedIn - /in/ereljapco
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!