Skip to content
Submitted almost 3 years ago

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

Yuko Horita•645
@Sloth247
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...GitHub user search app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

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.

Community feedback

  • JibbyCodes•290
    @KijimaiPosted almost 3 years ago

    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
    0
    Yuko Horita•645
    @Sloth247Posted almost 3 years ago

    @Kijimai Thank you very much for your feedback! I haven't put the codes for user preference of theme, so I definetely work on that from now!

    Your statemanagement idea sounds interesting, I have never tried and learnt but I will try it.

    Yeah your're right, I don't need to set router in this project but I tried to use searchParams to make the url change everytime showing different user. However I don't think that's necessary in this project.

    Your comments are helpful and I am looking forward to see your future projects too.

    0

Please log in to post a comment

Log in with GitHub

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