Skip to content
OverviewSolutions
16
Comments
2

JibbyCodes

@Kijimai290 points

Animator, learning how to code

Latest solutions

View more solutions

Latest comments

  • JibbyCodes•290
    @Kijimai

    Overall the rating component works wonderfully. If you do want to center the component on the page, you can set a parent container as the flex parent with

    .flex_parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

    in this case, you could set the body element as the flex parent since this is an isolated project that only houses one component. On the other hand, you could set a dedicated parent container like a <div> as the flex parent and set it to this:

    .some_flex_parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

    setting the min-height of this parent element to 100vh ensures that it takes up the entire vertical width of the page to center the component properly.

    As for your script, it's best practice to use const rather than let to store variables that you do not want changed.

    Overall, nice work!

    Marked as helpful
  • 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