Skip to content
Submitted about 2 years ago

Github Search App

Mario Martinez•50
@marioBytes
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

Feedback welcome

  • I had difficulty setting up the styling for light and dark themes. I used a theme detector hook and I also stored the theme in localStorage. Is there an easier way to accomplish this?
  • The useThemeDectecor hook. It works, but my text editor detects addListener and removeListener as deprectated. What should be used in place of these?
  • No

Community feedback

  • David•8,000
    @DavidMorgadePosted about 2 years ago

    Buenas Mario, enorabuena por finalizar el challenge! te quedo bastante bien la App buen trabajo.

    Me gustaría darte algunos consejos sobre lo que preguntas, ya que en su día yo tambien me enfrente a este proyecto.

    La manera más sencilla de hacer light and dark en react es usando Styled components, esta forma de estilar tus componentes (CSS in JS), trae incorporado un 'Theming' muy sencillo de utilizar, en el cual defines tus temas en un archivo Javascript y los pasas a tus componentes mediante props.

    Te recomiendo que uses Styled components ya no solo por eso, si no por la facilidad que te da de usar estilos con props, usarlos condicionalmente y además que te quedará un código mucho más limpio que tienendo todo el CSS en tu index.css

    Si quieres puedes revisar mi solución aqui, lo hice con styled components y usando un custom hook useDarkMode que además de guardar el tema en local storage, usa el tema de preferencia del navegador / sistema operativo del usuario en el primer login.

    Si tienes cualquier duda o lo que sea no dudes en preguntarme, pero de verdad que merece la pena meterle caña a los styled components, es un antes y un despues en react.

    Espero que mi feedback te sea de ayuda, un saludo!

    Marked as helpful
    1

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