Skip to content
Submitted over 1 year ago

GitHub user search app [using jQuery]

Jo Young•840
@Jo-cloud85
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

Another API challenge completed! This is much tougher than the advice API generator app challenge because of the number of errors or conditions to check for, against each user's GitHub data.

Unlike the advice API, this GitHub API requires an authentication key thus for security reasons (because I have not learned enough about the backend side), I have removed my auth. key temporarily so the search will not work on your side. Technically, with .gitignore, you can hide your key but any script that is stored on the client side instead of the server side, with a link to a key, is still not very safe. Thus, if you want to test the code, you gotta get your own auth key from GitHub and add it to a config.js file.

Nevertheless, the light and dark toggle and the media queries should still work. I will come back to modify it once I learn the backend side.

Cheers!

Community feedback

  • Edvvard•140
    @edvvarrdPosted over 1 year ago

    Hello!

    GitHub API doesn't require a key. I just did the same challenge without auth and it worked well. Key might be needed in the case when you want to do specific actions (like make some changes on your repos) or need much more responses from the API, because there are some limits without it. You can check how it works without a key on my profile.

    Except of that, the app looks good. After a quick clicking in it, I would recommend to add 'cursor: pointer' on changing theme button and do some testing with media queries, because it seems to be not working perfectly.

    Have a nice day!

    Marked as helpful
    1
    Jo Young•840
    @Jo-cloud85Posted over 1 year ago

    Hi @edvvarrd! Yea...I realized the key is not required for this challenge as we are only accessing the public profile so I adjusted my code already. I also added the cursor and modified the CSS such that the responsiveness for different media sizes should be better now. Thanks for the tips!

    0
  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Hey,

    great job again!

    I don't understand why it requires auth from you, this should simply work without any auth; https://api.github.com/users/visualdenniss I've also just tested it now by entering this link in URL bar in an incognito browser and it returns the data as usual without me having logged in at all.

    1
    Jo Young•840
    @Jo-cloud85Posted over 1 year ago

    Hi @visualdenniss, silly me. I didn't read the API docs clearly enough. The authentication key token is required if I want to retrieve private profile information which is not required for this challenge. I removed the auth. portion already. It should be working now. 😄

    1
  • Marvellous Obatale•520
    @MARVELGARRPosted over 1 year ago

    i think you can hide the key in a env ... read up on that

    1
    Jo Young•840
    @Jo-cloud85Posted over 1 year ago

    Hi @MARVELGARR! Ah I tried to hide the key in an env file and use import before the submission but perhaps there was something missing from my code, the console kept throwing me a dotenv link error. Gonna take time to look it up again and hopefully figure it out. Then again, I read that the most secure way for authentication is still to run the javascript on the server side rather than the client side. But, thanks anyway!

    0
    Marvellous Obatale•520
    @MARVELGARRPosted over 1 year ago

    @Jo-cloud85 hmmmm okay

    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