├── LICENSE ├── README.md ├── assets └── octocat.png ├── design ├── dev.png ├── devbook.fig ├── home.png └── results.png ├── index.html └── static └── banner.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Lucas Miranda 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # :computer: :green_book: devBook 3 | 4 | A bingo book of github devs 5 | 6 | ![](/static/banner.png) 7 | 8 | # Welcome :) 9 | DevChallenge allow you to improve your code skills! 10 | 11 | # Table of Contents 12 | 13 | - [Challenge](#challenge) 14 | - [Requirements](#requirements) 15 | - [Techs](#techs) 16 | - [Hints](#hints) 17 | - [Bonus Points](#bonus-points) 18 | - [Get Started](#get-started) 19 | - [Design](#design) 20 | - [Colors](#colors) 21 | - [Typography](#typography) 22 | - [Share](#share) 23 | 24 | # Challenge 25 | Your challenge is to build a 3 pages website (home/landing page, search results and user details) consuming [github](https://docs.github.com/en/rest/reference/search) and [github stats](https://github.com/anuraghazra/github-readme-stats) public APIs. 26 | 27 | ## Requirements 28 | - Homepage should have a search bar where user can search for github users 29 | - Homepage should have a carousel section that shows the top github users 30 | - Github user's card should have a name, username and bio. 31 | - When user performs a search, it should redirect to the results page where the best matches for that search is shown. 32 | - 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 33 | 34 | ### Techs 35 | - HTML 36 | - CSS 37 | - JS 38 | 39 | You can also use React.js or any other framework you prefer. 40 | 41 | ## Hints 42 | - You can create your own octocat [here](https://myoctocat.com/build-your-octocat/) to use in your project. Don't forget to remove the white background of your octocat image on photoshop or any other image editor. 43 | - Use [search params](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) to generate dynamic pages for the search page. Example: `https://book.dev/search?query=` 44 | 45 | ## Bonus Points 46 | 47 | - Create light mode and a switch in the navbar to enable it 48 | - Add contact info of github users in the users' card and users' details 49 | - Create a filter for searching only the hireable ones 50 | - Create [skeletons](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a) 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. 51 | 52 | # Get started 53 | 1 - Use this template or download this repository with the starter code
54 | 2 - Read the instructions in readme.md
55 | 3 - Start coding!
56 | 4 - Share your results with the community :)
57 |
58 | 59 | 60 | Feel free to use any workflow you are comfortable with :) 61 | 62 | # Design: 63 | Check it out on [figma](https://www.figma.com/file/VEMlScBkM2J9lQ1dMayXpP/devbook?node-id=1%3A4) or download the [.fig file](https://github.com/lucas-lm/devbook-devchallenge/blob/master/design/devbook.fig) at `./design` 64 | 65 | ## Colors 66 | ```js 67 | colors: { 68 | primary: '#6C80EA', 69 | secondary: '#A7A5EC', 70 | background: { 71 | main: 'linear-gradient(to bottom, #000, #00030f)', 72 | paper: 'rgba(255, 255, 255, 0.25)', 73 | }, 74 | } 75 | ``` 76 | 77 | ## Typography 78 | ```css 79 | font-family: 'Ubuntu', sans-serif; /* logo and headline tags */ 80 | font-family: 'Roboto', sans-serif; /* paragraph, small and input tags */ 81 | ``` 82 | 83 | # Share! 84 | Initialize your project with this template in your github as a public repository
85 | Capture a screenshot, gif or video and share your result on Linkedin
86 | Send me a feedback in Linkedin!
87 | -------------------------------------------------------------------------------- /assets/octocat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucas-lm/devbook-devchallenge/63a8e4e16e7eca0aec46e9c9db8449a38a7a2b80/assets/octocat.png -------------------------------------------------------------------------------- /design/dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucas-lm/devbook-devchallenge/63a8e4e16e7eca0aec46e9c9db8449a38a7a2b80/design/dev.png -------------------------------------------------------------------------------- /design/devbook.fig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucas-lm/devbook-devchallenge/63a8e4e16e7eca0aec46e9c9db8449a38a7a2b80/design/devbook.fig -------------------------------------------------------------------------------- /design/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucas-lm/devbook-devchallenge/63a8e4e16e7eca0aec46e9c9db8449a38a7a2b80/design/home.png -------------------------------------------------------------------------------- /design/results.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucas-lm/devbook-devchallenge/63a8e4e16e7eca0aec46e9c9db8449a38a7a2b80/design/results.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | devBook 2 | Stalk people on github! 3 | Top users 4 | -------------------------------------------------------------------------------- /static/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucas-lm/devbook-devchallenge/63a8e4e16e7eca0aec46e9c9db8449a38a7a2b80/static/banner.png --------------------------------------------------------------------------------