Skip to content
Submitted over 3 years ago

GitHub User Search App with GitHub API, React & react-router-dom

accessibility, react, react-router, sass/scss, fetch
Yuko Horita•645
@Sloth247
A solution to the GitHub user search app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I spend a lot of time to look into the details and make sure app works correct. I added extra features;

  • loading message while fetching data
  • error message when user is not found or input field is empty

I have a few questions / issues;

  • I wanted to use react-router and useParams to get username from query and consume it in the result so that the url will be shown as http://domain/username, but I could not figure out how to do that on the same single page.

  • I have error in my vs code terminal that Line 21:6: React Hook useEffect has a missing dependency: 'getUser'. Either include it or remove the dependency array, regarding UserResult.jsx file. I am not sure I am using useEffect correctlt with context files. I put "octocat" in getUser() function as argument to set it as default (initial value), but is it correct thing to do?

  • error handling. I am not sure I am doing right for error shown when fetching data set in Github Context.jsx file.

I appreciate for any feedbacks, and help in those issues that I have.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • JibbyCodes•290
    @Kijimai

    Hello again Sloth!

    I really like the idea of adding the loading message as the user waits for fetch API to grab the user information so that slower internet speeds know at least that their input was being received and handled.

    I chose to store the theme in the user's local storage in the case that they decide to return to the app in the future, it saves their original preference.

    As far as the error handler issue that you have, I personally used state management to store and initialize an object containing a boolean and an empty placeholder String message.

    const [error, setError] = useState({show: false, message: ""})

    The main difference is that I can change the message to fit the necessary error type instead of hardcoding "No Result" to the page and showing it based on if the error state was set to true or not.

    Some minor things on the app and its styling: Of course the main dashboard element is missing the box-shadow present in the design but of course, that can be left up to designer preference :D React Router may be unnecessary for this particular challenge since it isn't really sending the user to a different route other than the main page for displaying the user they search for.

    Excellent work on this project! I hope you can make use of some of my suggestions and make even better projects in the future too, I sure learned a lot from looking over your submission!

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord