Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mouhametnd/react-github-dev-finder-web-app
This Github Dev Finder Web App is built with React, styled-components, local storage and Github API
https://github.com/mouhametnd/react-github-dev-finder-web-app
api localstorage reactjs styled-components
Last synced: 12 days ago
JSON representation
This Github Dev Finder Web App is built with React, styled-components, local storage and Github API
- Host: GitHub
- URL: https://github.com/mouhametnd/react-github-dev-finder-web-app
- Owner: mouhametnd
- Created: 2022-06-22T21:32:24.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-06-23T08:15:23.000Z (over 2 years ago)
- Last Synced: 2023-03-06T20:42:25.269Z (over 1 year ago)
- Topics: api, localstorage, reactjs, styled-components
- Language: JavaScript
- Homepage: https://mouhametnd-devfinder-app.netlify.app/
- Size: 2.51 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Welcome to the Github Dev Finder Web App! 🍃
This is a simple web app that allows you to search for a Github user and see their profile information.
This is a solution to the GitHub user search app challenge on Frontend Mentor with some additional features such as an `autocomplete` suggestion list and save preferences to `localStorage`. The app is built with `React.js`, `styled-components` and uses the `Github API`.
## Links
- My Linkedin [Linkedin](https://www.linkedin.com/in/mouhametndiaye/)
- My email [email protected]
- Live Project [ Github Dev Finder Web App](https://mouhametnd-devfinder-app.netlify.app/)
## 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
- Get an autocomplete suggestion for the user's username
- See relevant user information based on their search
- Switch between light and dark themes
- Save preferences to local storage
- Have the correct color scheme chosen for them based on their computer preferences (prefers-color-scheme)
### Built with
- React - JS library
- Styled Components
- Fetch
- LocalStorage
- Some javascript new features
- Mobile-first workflow
- Flexbox
- CSS custom properties
- Semantic HTML5 markup
## Expected behavior
- On the first load, show the profile information for `mouhametnd` (me).
- Handle errors when fetching user information, fetching autocomplete suggestions, no query entered, etc.
- If any of the location, website, Twitter, or company properties are empty, show the text "Not Available" with transparency added (as shown in the design).
## Preview of the App
