https://github.com/abmanaf/github-user-search

https://github.com/abmanaf/github-user-search

Last synced: 2 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/abmanaf/github-user-search
• Owner: abmanaf
• Created: 2024-08-16T20:27:00.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-29T06:01:21.000Z (3 months ago)
• Last Synced: 2024-08-29T23:47:47.069Z (3 months ago)
• Language: JavaScript
• Homepage: https://github-account-fetch.netlify.app/
• Size: 476 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Frontend Mentor - GitHub user search app solution

This is a solution to the [GitHub user search app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/github-user-search-app-Q09YOgaH6). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#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

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

### Screenshot

![Mobile View](./GitHubUserSearchAppMobile.png)

![Desktop View](./GitHubUserSearchAppDesktop.png)

### Links

- Solution URL: [Add solution URL here](https://your-solution-url.com)

- Live Site URL: [Add live site URL here](https://your-live-site-url.com)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- Mobile-first workflow

- [React](https://reactjs.org/) - JS library

### What I learned

- React Hooks

### Continued development

- Responsive Design

- React Hooks

### Useful resources

- [My Custom CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/) - This article explains why we should include custom CSS reset in our project and the breakdown of information was helpful to my understanding of why CSS reset are important.

- [How to add Sass support to a Vite React app](https://dev.to/hexcube/how-to-add-sass-support-to-a-vite-react-app-37p) - This is an amazing article explained how import and add scss files to your React. I'd recommend it to anyone having issue on how t0 add scss files to the vite react app.

- [How to import and use an image in a React component] () -This blog post explains how to implement image into your react component.

- [The Complete Guide to Days.js](https://mirzaleka.medium.com/the-complete-guide-to-day-js-fb835a5d945a) - This article explains how Days.js library works and how to use it in your project. I'd recommend it to anyone who wants to learn how to use Days.js library.

- [JavaScript Dates – How to Use the DayJS Library to work with Date and Time in JS](https://www.freecodecamp.org/news/javascript-date-time-dayjs/#howtoinstallthedayjslibrary) - Another great article on how to use Days.js library.

## Author

- Frontend Mentor - [@mayor-creator](https://www.frontendmentor.io/profile/mayor-creator)

- Threads - [@mayor_creator](https://www.threads.net/@mayor_creator)

## Acknowledgments