Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

GitHub user search app

@JaroslavHosovsky

Desktop design screenshot for the GitHub user search app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I will be glad for any feedback.

Community feedback

Matt West 440

@matt-o-west

Posted

Hello! Thank you for submitting your solution! I have some feedback for you:

  • It looks like you're implementing this with both react and vanilla js patterns. I would recommend sticking with just one or the other, as there are some anti-patterns occurring because of the mix-matching. You shouldn't be accessing dom nodes as you are with query selectors in react, as the reason we use the tool is to create declarative and component-based ui.
  • With state variables, you really want to minimize their use as much as possible - any values you can 'derive' from the data without a state variable, you should do that. If you have a bunch of data that you want to manage in the client, you can set it as an object to a state variable and access it that way. Your code will be much cleaner and synchronous because of this! Believe me, when state variables get out of sync, react can do a lot of funky things that can be hard to track down 😅 below is a quick example I sketched out:
const [userData, setUserData] = useState({
  url: "https://api.github.com/users/octocat",
  image: "",
  name: "",
  login: "",
  created: "",
  bio: "",
  repos: "",
  followers: "",
  following: "",
  location: "",
  website: "",
  twitter: "",
  company: ""
});

Setting this state, you can use a function that is as simple as:

  ...prevState,
  name: "New Name"
}));
  • I'm not quite sure where the bug is occurring, but the theme doesn't not toggle on the initial click
  • Styling is responsive, but don't be afraid to add some padding especially on desktop and tablet
  • You can utilize semantic HTML landmarks in your JSX to add accessibility to the page and help users that rely on screenreaders or other features. Check out more information here.

You're solution above all is great, and I hope you learned a lot! Keep going and happy coding 🎉

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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