Frontend Mentor - GitHub user search app solution

This is my solution to the GitHub user search app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects. Live site here.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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

• Bonus: Have the correct color scheme chosen for them based on their computer preferences. Hint: Research prefers-color-scheme in CSS.

  I have met all the user stories listed about along with the bonus challenge of checking to see if the user has set a light or dark theme preference and setting the app theme appropriately.

  I have also have the app load a default GitHub user card on loading, the Octocat, instead of just having the search bar on load. Having a card displayed on load gives the user an idea of what to expect on how to use and what information will be available with this app.

Screenshot

Links

• Solution URL: GitHub Repo
• Live Site URL: Via GitHub Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox
• CSS Grid
• Mobile-first workflow
• Vue 3 - JS Library
• Vite - Vite Frontend Tooling
• SCSS - CSS Extension Language

What I learned

• How to change the app theme with a custom attribute and javascript.
• More practice with flexbox and grid; I'm trying to figure out when to use one or the other.
• More practice with building an app from a design file (Figma).
• Reading the user's preference for light or dark themes to set the theme of the app appropriately.
• I am using CSS Grid more often to better understand when I would use grid vs flexbox; in general, grid is nice for elements of consistent size while flex is good for elements differing in size and flowing elements (also good for vertically aligning elements within a div vertically).
• One of the more frustrating aspects of this project, and most of the interactive projects on Frontend Mentor, is that the user stories are not really detailed enough for me. Is there a default profile to be loaded by default? In the Figma design file, the pointer icons show interactivity, which can be ambiguous in its implementation. However, I can see where this ambiguity leaves room for imagination, so I had fun adding little flairs and app flow.

Useful resources

• Ocktokit and isomorphic-fetch - The Ocktokit API was given by the project outline as a resource to interact with the GitHub user API. To use it in my client-side app, I had to install another npm package. This thread helped me to determine what I needed and how to implement the Ocktokit API.

• Using custom html attribute and CSS variables to set color theme - I used this article as a launch point in implementing dark and light themes for the app.

• Serving the static site on GitHub Pages using gh-pages - I always forget how to serve the app build from a subtree, so like most challenges I find -- there's a npm package for that ;) For my use case, I only need to install and save the package, and then add "deploy": "npm run build && gh-pages --dist 'dist' --branch 'release'" under the "scripts" object in my package.json file.

• Not Using 'px' for font-size and line-height - In trying to keep the site accessible for all devices, I found that I needed to use 'rem' instead of 'px' in size-based CSS properties. However, I was still using 'px' for font-size and line-height, which is inconsistent and can hamper the user's accessibility experience.

• And instead use a SCSS function to help deal with 'rem' - I used this function to help deal with the rem issue of constantly dividing design elements giving in pixels to rem by hand. Since SCSS does not offer math functions that return float numbers, I found another function that does return a float number with a ceiling or flooring options. These functions are found in /src/assets/scss/functions.scss

Author

• Website - Bradley Smith
• Frontend Mentor - @bradleyhop