├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── banner.jpg └── tasks └── react-user-search ├── README.md └── react-user-search.jpg /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | - Using welcoming and inclusive language 12 | - Being respectful of differing viewpoints and experiences 13 | - Gracefully accepting constructive criticism 14 | - Focusing on what is best for the community 15 | - Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | - Trolling, insulting/derogatory comments, and personal or political attacks 21 | - Public or private harassment 22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | - Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at github@webman.pro. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions, questions, and comments pull requests are all welcome. 4 | If you want to change the structure, please open an issue to start a discussion. 5 | However, if you have interesting questions or answers, please make a pull request. 6 | 7 | ## Getting Started 8 | 9 | - Make sure you have a [GitHub account](https://github.com/signup/free) 10 | - Submit a Github issue for this Repo 11 | - Clearly describe the issue 12 | - Fork the repository on GitHub 13 | 14 | ## Making Changes 15 | 16 | - Fork repo 17 | - Create a branch (`git checkout -b fix/my_awesome_change`) 18 | - Make commits of logical and atomic units 19 | - Check for unnecessary whitespace with `git diff --check` before committing 20 | - Make sure your commit messages are in the proper format: 21 | - Short (less than 70) 22 | - Start the line with "Fix", "Add", "Change" instead of "Fixed", "Added", "Changed" 23 | - Capitalize the subject line 24 | - Push changes 25 | - Create Pull Request to `master` 26 | 27 | ## Available link tags 28 | 29 | To make links short and self-descriptive use special tags: 30 | 31 | - @blog - blog 32 | - @docs - webpage 33 | - @youtube 34 | - @docs - documentation format 35 | - @code - live code examples 36 | - @stackoverflow - link to answer/discussion on stackoverflow.com 37 | - @github - link some repo on github.com 38 | - @wiki - link to wikipedia.org 39 | 40 | Thanks to all these cool people :hand:: 41 | [Ken Hawkins](https://github.com/khawkins98) 42 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Problem description 2 | 3 | e.g.: "I have found that next question is not correct" 4 | 5 | ## Suggestions to Resolve the Problem 6 | 7 | e.g.: "I propose to change it with: ..." 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Dmytro Chumak, hello@webman.pro 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 | 3 | webman.pro 4 | 5 |
6 |

Front End Interview Questions and Answers

7 | 8 | Contributions 9 | 10 | 11 | Contributors 12 | 13 | 14 | License 15 | 16 |
17 |
18 | 19 | The goal is to provide candidates with the opportunity to test their knowledge before a real-world interview. 20 | Drawing on my experience and the experiences of other developers, this resource will help you achieve better interview results. 21 | 22 | **Rock your interview! :rocket:** 23 | ___ 24 | 25 | 26 | ## List of Content 27 | 28 | 1. [Common interview questions](#common-interview-questions) 29 | 1. [Common technical interview questions](#common-technical-interview-questions) 30 | 1. [HTML Interview Questions](#html-interview-questions) 31 | 1. [CSS Interview Questions](#css-interview-questions) 32 | 1. [Javascript Interview Questions](#javascript-interview-questions) ([junior](#js-junior), [middle](#js-middle), [senior](#js-senior)) 33 | 1. [Javascript Coding Questions](#javascript-coding-questions) 34 | 1. [React interview questions](#react-interview-questions) 35 | 1. [Typescript interview questions](#typescript-interview-questions) 36 | 1. [Security](#security) 37 | 1. [Testing Questions](#testing-questions) 38 | 1. :tada: [Recruiting tasks](#recruiting-tasks) 39 | 1. [GIT](#git) 40 | 1. [Funny Questions](#funny-questions) 41 | 1. [Contribution](#contribution) 42 | 43 | ## Common interview questions 44 | 45 | 1. What was the most interesting solution you implemented in your last project? 46 | 1. What's the latest programming book you've read? 47 | 1. How big was your team? 48 | 1. Have you worked in [Agile, Scrum or Kanban](https://www.smartsheet.com/agile-vs-scrum-vs-waterfall-vs-kanban) environments? 49 | 1. Are you a team player? 50 | 1. What makes you a good developer? 51 | 1. What skill do you want to improve next? 52 | 1. What values can you bring to a new team? 53 | 1. What problems are you most interested in solving? 54 | 1. Describe your most recent project, how you solved it, and what you learned. What technologies did you use? 55 | 1. What type of environment do you prefer to work in? Why? 56 | 1. What does your ideal role look like? 57 | 58 | ## Common technical interview questions 59 | 60 | 1. What is REST? - [@docs](https://restcookbook.com/) 61 | 2. What is the difference between imperative and declarative programming in JS? - [@blog](https://www.redotheweb.com/2015/09/18/declarative-imperative-js.html) 62 | 3. What is the difference between PUT and PATCH methods in REST? - [@stackoverflow](https://stackoverflow.com/questions/21660791/what-is-the-main-difference-between-patch-and-put-request) 63 | 4. Talk about the differences between [websockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), long polling and [SSE](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events). - [@stackoverflow](https://stackoverflow.com/questions/11077857/what-are-long-polling-websockets-server-sent-events-sse-and-comet) 64 | 5. What is CORS? - [@blog](https://www.maxcdn.com/one/visual-glossary/cors/), [@docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) 65 | 6. List the main things you can do to increase page speed loading? - [@blog](https://www.@blog/blog/speed-up-your-website/) 66 | 7. Progressive enhancement vs graceful degradation. What is the difference? - [@docs](https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement) 67 | 8. Do you use [Grunt](https://gruntjs.com/), [Gulp](https://gulpjs.com/), [Webpack](https://webpack.js.org/) or [Browserify](https://browserify.org/) in your projects? 68 | 9. What tools do you know or already use to improve your code? 69 | 10. What do you know about "60fps"? How can you achieve it? - [@github](https://github.com/vasanthk/browser-rendering-optimization) 70 | 11. What is the difference between layout, painting and compositing? - [@docs](https://developers.google.com/web/fundamentals/performance/rendering/?hl=en) 71 | 12. What is Web Components? - [@docs](https://developer.mozilla.org/en-US/docs/Web/Web_Components) 72 | 13. What is the difference between sessionStorage, localStorage and cookies? [@stackoverflow](https://stackoverflow.com/a/19869560/5513804) 73 | 14. Describe your perfect React/Angular/Vue application stack? 74 | 75 | ## HTML Interview Questions 76 | 77 | 1. Could you list major HTML5 tags? - [@docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 78 | 1. What does an 'optional' closing tag mean? - [@docs](https://www.w3.org/TR/REC-html40/index/elements.html) 79 | 1. When and how to preload resources? - [@blog](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) 80 | 1. What is the difference between id and class? - [@blog](https://css-tricks.com/the-difference-between-id-and-class/) 81 | 82 | ## CSS Interview Questions 83 | 84 | 1. What is the difference between 'mobile first' and 'desktop first' - [@blog](https://codemyviews.com/blog/mobilefirst)? 85 | 1. Which of [these](https://jsfiddle.net/thisman/9o8s2bdk/) selectors has the highest specificity. What color will be applied to the paragraph? 86 | 1. What does the pseudo-class `:root` refer to? 87 | 1. What preprocessor do you use? ([Sass](https://sass-lang.com/) or [Less](https://lesscss.org/)) 88 | 89 | ## Javascript Interview Questions 90 | 91 | #### JS Junior 92 | 93 | 1. Who is the author of JavaScript? 94 | 1. What is the best book for learning JavaScript and why? - [@github](https://github.com/wwwebman/js-books-backpack) 95 | 1. What is the type of NaN? How to check if a value is NaN? 96 | 1. What the reason that `window.window === window` return true? - [@docs](https://developer.mozilla.org/pl/docs/Web/API/Window/window) 97 | 1. What is the outcome of the JavaScript calculation? `1/0 = ?` 98 | 1. What is hoisting? [@docs](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) 99 | 1. What is the difference between bubbling and capturing? - [@stackoverflow](https://stackoverflow.com/a/4616720/5513804) 100 | 101 | #### JS Middle 102 | 103 | 1. What does `this` refer to? - [@blog](https://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/) 104 | 1. What is the JavaScript Event Loop? - [@blog](https://altitudelabs.com/blog/what-is-the-javascript-event-loop/), [@youtube](https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=1244s) 105 | 1. What is the Event Delegation? - [@blog](https://davidwalsh.name/event-delegate), [@code](https://jsfiddle.net/thisman/h2eqfsx6/) 106 | 1. What is the difference between e.target and e.currentTarget? - [@docs](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget), [@code](https://jsfiddle.net/thisman/gkdeocd6/) 107 | 1. What is [`Window.postMessage()`](https://davidwalsh.name/window-postmessage) and where it can be used? - [@docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) 108 | 1. Is there any difference between Promises and callbacks? Which is better? - [@blog](http://callbackhell.com/), 109 | 1. What is recursion? When is the use of recursion useful in Javascript? - [@blog](https://medium.com/@dis_is_patrick/practical-uses-for-recursive-javascript-b8f142552f8b) 110 | 1. What do you hear about DRY, KISS, YAGNI? - [@blog](https://thefullstack.xyz/dry-yagni-kiss-tdd-soc-bdfu) 111 | 1. What do you know about optional chaining operators? What benefits does it bring? [@docs](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining) 112 | 113 | #### JS Senior 114 | 115 | 1. What patterns do you know and successfully use in JavaScript? 116 | 1. What is the problem throttling and debouncing are resolved? What is the core difference between them? - [@blog](https://medium.com/@_jh3y/throttling-and-debouncing-in-javascript-b01cad5c8edf) 117 | 1. What is SOLID? [@wiki]() 118 | 1. What is the difference between inheritance and composition? What do you prefer? Why? [@blog](https://hackernoon.com/javascript-functional-composition-for-every-day-use-22421ef65a10), [@blog](https://medium.com/front-end-hacking/classless-javascript-composition-over-inheritance-6b27c35893b1) 119 | 120 | ## Javascript Coding Questions 121 | 122 |
123 | Write a `pipefy` function where a string received is returned, but with the "|" character between each character: 124 | 125 | ```js 126 | pipefy(); 127 | ``` 128 | 129 | [@code](https://jsfiddle.net/thisman/6ynaf3ot/) 130 | 131 |
132 |
133 | Write a currying function that returns a sum of two numbers: 134 | 135 | ```js 136 | sum(1)(2); 137 | ``` 138 | 139 | [currying function](https://medium.com/@adambene/currying-in-javascript-es6-540d2ad09400), 140 | 141 |
142 |
143 | Write a factorialfunction without side effect: 144 | 145 | ```js 146 | // Code below must return `true`. 147 | alert(factorial(3) === 6 && factorial(0) === 1); 148 | ``` 149 | 150 | [factorial](https://www.mathsisfun.com/numbers/factorial.html), 151 | [side effect](https://stackoverflow.com/a/8129277/5513804), 152 | [@code](https://jsfiddle.net/thisman/8v0h5oLq/) 153 | 154 |
155 | 156 |
157 | Which line of the below code will be executed with an error? Why? 158 | 159 | ```js 160 | 10 .toString(); 161 | (10).toString(); 162 | 10..toString(); 163 | ``` 164 |
165 |
166 | What is the order of alerts? 167 | 168 | ```js 169 | setTimeout(function () { 170 | alert('gorilla'); 171 | setTimeout(function () { 172 | alert('classical inheritance'); 173 | }, 0); 174 | alert('drumroll'); 175 | }, 0); 176 | 177 | alert('banana'); 178 | ``` 179 | 180 |
181 |
182 | What is the result after code execution: 1, 2 or 3? 183 | 184 | ```js 185 | var x = 1; 186 | var foo = { 187 | x: 2, 188 | bar: function () { 189 | x = 3; 190 | return this.x; 191 | }, 192 | }; 193 | var run = foo.bar; 194 | 195 | alert(run()); 196 | ``` 197 | 198 |
199 |
200 | What below code will return: `true` or `false`. What does each part of code return? 201 | 202 | ```js 203 | new String('a') instanceof String && 'b' instanceof String; 204 | ``` 205 |
206 |
207 | What the result of the following functions call? Is it the same? 208 | 209 | ```js 210 | const a = function (obj, val) { 211 | obj.val = { 212 | a: 1, 213 | b: 2, 214 | }; 215 | 216 | return obj; 217 | }; 218 | 219 | 220 | 221 | const b = function (obj, val) { 222 | return (obj.val = { 223 | a: 1, 224 | b: 2, 225 | }); 226 | }; 227 | 228 | a({}, 'val'); 229 | b({}, 'val'); 230 | ``` 231 | 232 |
233 |
234 | What would be the output of this code below? 235 | 236 | ```js 237 | (function () { 238 | console.log(a, b); 239 | var a = 1; 240 | const b = 2; 241 | })(); 242 | ``` 243 | 244 |
245 |
246 | Which one of the function expression below would be the best choice for the `prototype-constructor` pattern (a, b, c)? Why? 247 | 248 | ```js 249 | function Man(name) { 250 | this.name = name; 251 | } 252 | // a 253 | Man.prototype.getName = function () { 254 | return this.name; 255 | }; 256 | // b 257 | Man.prototype.getName = function getName() { 258 | return this.name; 259 | }; 260 | // c 261 | Man.prototype.getName = () => { 262 | return this.name; 263 | }; 264 | ``` 265 | 266 |
267 |
268 | Implement normalizeCase() function that converts "HELLO worLD" to "Hello world". 269 | 270 | ```js 271 | function normalizeCase(str) { 272 | // The magic happens here. 273 | } 274 | ``` 275 | 276 |
277 | 278 | ## React interview questions 279 | 280 | ### General 281 | 282 | 1. What is the difference between 'smart and dummy' components? 283 | 1. How to create a higher order component? 284 | 1. What is the difference between hoc, Renders Props and hooks patterns? 285 | 1. Why is it a good practice to render React Components in `
` over ``? 286 | 1. What does mean "Isomorphic React Application"? - [@blog](https://www.smashingmagazine.com/2015/04/react-to-the-future-with-isomorphic-apps/) 287 | 1. What happens when you execute `setState()` in the `render()` method? 288 | 1. What is the difference between `useState()` and `useRef()`? 289 | 1. How do lifecycle methods correspond to hooks? 290 | 1. Is it okay to call hooks inside loops or conditions? 291 | 1. How do you handle errors in React? 292 | 1. What is the difference between `useEffect()` and `useLayoutEffect()`? 293 | 294 | ### Redux 295 | 296 | 1. What is the difference between Mobx & Redux? - [@blog](https://www.robinwieruch.de/redux-mobx-confusion/) 297 | 1. What do you think about ajax request in reducer? 298 | 1. What architecture do you use to structure actions and reducers? 299 | 1. What is the difference between reducers and actions? 300 | 1. What is an action creator? 301 | 1. Is Redux still relevant in 2020? Can React context replace Redux? 302 | 1. What is middleware? Can you describe the use case where it can be used? 303 | 1. Have you used reselect? 304 | 305 | 306 | ## Typescript interview questions 307 | 308 | 1. Talk about the differences between public, private, and protected class access modifiers? [@docs](https://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers) 309 | 1. What typescript features do you use/know? 310 | 1. What is a generic type? [@docs](https://www.typescriptlang.org/docs/handbook/generics.html) 311 | 1. What Typescript utility types do you use/know (Omit, Partial)? [@docs](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype) 312 | 313 | ## Security 314 | 315 | 1. What are the most common types of web attacks? - [@blog](https://blog.sucuri.net/2014/11/most-common-attacks-affecting-todays-websites.html) 316 | 317 | ## Testing Questions 318 | 319 | 1. Explain the difference between unit tests and integration tests? - [@stackoverflow](https://stackoverflow.com/a/5357837/5513804) 320 | 1. Tell about TDD. What advantages or disadvantages of this concept you know? [@docs](https://en.wikipedia.org/wiki/Test-driven_development) 321 | 1. Which frameworks/platforms do you use for test you code? 322 | 1. List unit testing best practices principles. [@slides](https://www.slideshare.net/homespothq/unit-testing-concepts-and-best-practices) 323 | 324 | ## Recruiting tasks 325 | 326 | 1. [React user search](tasks/react-user-search) 327 | 328 | ## GIT 329 | 330 | 1. What is the main difference between `merge` and `rebase`? - [@blog](https://www.atlassian.com/git/tutorials/merging-vs-rebasing) 331 | 332 | ## Funny Questions 333 | 334 | 1. Do you like parties? 335 | 1. Do you know that we have a dress code? 336 | 1. Where do you see yourself in 5 years? 337 | 338 | ## Contribution 339 | 340 | It would be cool to find your Front End interview question on our list. 341 | Check out the contributing [guide](CONTRIBUTING.md) to get started. 342 | 343 | ## License 344 | 345 | MIT License, Copyright © 2017-present, [Dmytro Chumak](https://webman.pro). 346 | See [LICENSE](./LICENSE) for more information. 347 | -------------------------------------------------------------------------------- /banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wwwebman/front-end-interview-questions/62ec7eb8a806ab128d606bcb63de99bdd6f074d6/banner.jpg -------------------------------------------------------------------------------- /tasks/react-user-search/README.md: -------------------------------------------------------------------------------- 1 | # React user search task 2 | 3 | | Core Technology | Сomplexity | Estimation | Goal | 4 | | --------------- | ---------- | ---------- | ---- | 5 | | [React](https://reactjs.org/) | Medium | 4-12 hours | Check if a candidate can write reusable components, use best practices, work with asynchronous code using third-party API. | 6 | 7 | - If you are a **recruiter**, and the task doesn't fit the recruiting process ask your Tech Lead to modify the stack 8 | - If you are a **candidate**, don't copy/paste if you found a solution on the Internet. A technical person can catch you sooner or later. 9 | For both sides, it is time-wasting if you won't implement this by yourself. 10 | 11 | ## Task 12 | 13 | Develop a simple **React application** that allows **searching Github users** by login, name, or email. 14 | 15 | ### Starters 16 | 17 | Use one of the following starters: 18 | 19 | - [Next.js](https://github.com/zeit/next.js#quick-start) 20 | - [Create React App](https://github.com/facebook/create-react-app) 21 | - [Gatsby.js](https://www.gatsbyjs.com/docs/quick-start) 22 | - [Other](https://blog.bitsrc.io/11-react-application-boilerplates-for-2019-b49a8226ea54) 23 | 24 | ### Components 25 | 26 | Implement the following components: 27 | 28 | - `` 30 | - `` 31 | - `` 32 | - `` 33 | - ``, `useValidation` hook or utils (implement custom or native validation) 34 | 35 | _Please write your own components instead of using components from material-ui, antd, etc._ 36 | 37 | ### User path 38 | 39 | 1. A user chooses "Search by" option using `` component, and the following validation occurs: 41 | - "Search by" :point_right: "Name": 42 | - Required 43 | - Minimum 3 characters 44 | - "Search by" :point_right: "Login": 45 | - Required 46 | - Minimum 3 characters 47 | - "Search by" :point_right: "Email": 48 | - Required 49 | - Accepts only valid email format 50 | 1. A user clicks `` 51 | 1. A user gets `` with profile information or _"No users found."_ message. 52 | 53 | ### Required 54 | 55 | 1. Use React.js 56 | 1. Use any other libraries that can help you to implement the task 57 | 1. [RWD](https://en.wikipedia.org/wiki/Responsive_web_design) 58 | 1. Publish the task to your own Github account 59 | 1. Add a `README.md` file with instruction about installation and how to run the app 60 | 61 | ### Important! 62 | 63 | - You can use any other API instead of [Github](#github-api) if you think you can be more performant with it 64 | - Use any technology stack around your React application 65 | - State management: 66 | - [Apollo](https://www.apollographql.com/docs/react/) 67 | - [React context](https://reactjs.org/docs/context.html) 68 | - [Recoil.js](https://recoiljs.org/) 69 | - [Mobx](https://mobx.js.org/README.html) 70 | - [Redux](https://redux.js.org/) 71 | - [Xstate](https://github.com/davidkpiano/xstate) 72 | - Styling: 73 | - [JSS](https://cssinjs.org/react-jss/) 74 | - [Sass](https://sass-lang.com/) 75 | - [Styled-components](https://styled-components.com/) 76 | - [Tailwind](https://tailwindcss.com/) 77 | - Testing: 78 | - [Enzyme](https://enzymejs.github.io/enzyme/docs/api/) 79 | - [Jest](https://jestjs.io/) 80 | - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) 81 | 82 | ### Additional points 83 | 84 | Don't try to implement all these features and spend too much time on it. 85 | 86 | - Adding "Load more" functionality 87 | - Adding a profile page of particular user 88 | - Adding unit tests 89 | - Clean GIT commits history 90 | - UI/UX skills 91 | - Using Eslint 92 | - Using Prettier 93 | - Using Typescript 94 | - Using best practices (DRY, KISS, SOLID, etc.) 95 | 96 | ### Design example 97 | 98 | The following design is the only example that would give you a visual understanding of what is required by the task. 99 | It would be great if can make it look even better than in the following example: 100 | 101 |
102 | Show design 103 | 104 | ![react user search example](react-user-search.jpg) 105 | 106 |
107 | 108 | ### Github API 109 | 110 | #### GitHub GraphQL API 111 | 112 | Here are some details if you decide to use Github Graphql API: 113 | 114 | - [Documentation](https://developer.github.com/v4/) 115 | - [Explorer](https://developer.github.com/v4/explorer/) 116 | 117 | **Queries:** 118 | 119 | ``` 120 | query SearchUsers($query: String!, $first: Int!) { 121 | search(query: $query, type: USER, first: $first) { 122 | edges { 123 | node { 124 | ... on User { 125 | login 126 | } 127 | } 128 | } 129 | } 130 | } 131 | 132 | query GetUser($login: String!) { 133 | user(login: $login) { 134 | name 135 | bio 136 | websiteUrl 137 | } 138 | } 139 | ``` 140 | 141 | **Variables:** 142 | 143 | ```json 144 | { 145 | "query": "Dan Abramov", 146 | "first": 10, 147 | "login": "gaearon" 148 | } 149 | ``` 150 | 151 | #### GitHub REST API 152 | 153 | The [documentation](https://docs.github.com/en/free-pro-team@latest/rest/reference/users). 154 | -------------------------------------------------------------------------------- /tasks/react-user-search/react-user-search.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wwwebman/front-end-interview-questions/62ec7eb8a806ab128d606bcb63de99bdd6f074d6/tasks/react-user-search/react-user-search.jpg --------------------------------------------------------------------------------