/devbook-devchallenge

devbook template for devchallenge

Primary LanguageHTMLMIT LicenseMIT

💻 📗 devBook

A bingo book of github devs

Welcome :)

DevChallenge allow you to improve your code skills!

Table of Contents

Challenge

Your challenge is to build a 3 pages website (home/landing page, search results and user details) consuming github and github stats public APIs.

Requirements

  • Homepage should have a search bar where user can search for github users
  • Homepage should have a carousel section that shows the top github users
  • Github user's card should have a name, username and bio.
  • When user performs a search, it should redirect to the results page where the best matches for that search is shown.
  • Whenever a user clicks in a github user card, it should redirects to that github user's page where is shown that user's github stats and repos

Techs

  • HTML
  • CSS
  • JS

You can also use React.js or any other framework you prefer.

Hints

  • You can create your own octocat here to use in your project. Don't forget to remove the white background of your octocat image on photoshop or any other image editor.
  • Use search params to generate dynamic pages for the search page. Example: https://book.dev/search?query=<lucas>

Bonus Points

  • Create light mode and a switch in the navbar to enable it
  • Add contact info of github users in the users' card and users' details
  • Create a filter for searching only the hireable ones
  • Create skeletons to be shown while data is fetching in order to improve the website UX. In the design files and figma you can find skeletons models for the cards.

Get started

1 - Use this template or download this repository with the starter code
2 - Read the instructions in readme.md
3 - Start coding!
4 - Share your results with the community :)

Feel free to use any workflow you are comfortable with :)

Design:

Check it out on figma or download the .fig file at ./design

Colors

  colors: {
    primary: '#6C80EA',
    secondary: '#A7A5EC',
    background: {
      main: 'linear-gradient(to bottom, #000, #00030f)',
      paper: 'rgba(255, 255, 255, 0.25)',
    },
  }

Typography

font-family: 'Ubuntu', sans-serif; /* logo and headline tags */
font-family: 'Roboto', sans-serif; /* paragraph, small and input tags */

Share!

Initialize your project with this template in your github as a public repository
Capture a screenshot, gif or video and share your result on Linkedin
Send me a feedback in Linkedin!