{"id":19962809,"url":"https://github.com/mui/tech-challenge-react","last_synced_at":"2025-05-03T22:31:25.815Z","repository":{"id":39829706,"uuid":"327759466","full_name":"mui/tech-challenge-react","owner":"mui","description":"This challenge is part of the hiring process for some of the Software Engineer positions at MUI.","archived":false,"fork":false,"pushed_at":"2024-07-06T11:27:25.000Z","size":27827,"stargazers_count":33,"open_issues_count":1,"forks_count":11,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-10-30T00:55:23.983Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mui.com/careers/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mui.png","metadata":{"funding":{"github":null,"patreon":null,"open_collective":"mui-org","ko_fi":null,"tidelift":null,"custom":null},"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-08T00:42:29.000Z","updated_at":"2024-09-04T21:42:47.000Z","dependencies_parsed_at":"2023-01-17T18:31:10.568Z","dependency_job_id":"5f78ddfd-5f2c-4bd6-a0d4-98a78da19b59","html_url":"https://github.com/mui/tech-challenge-react","commit_stats":{"total_commits":53,"total_committers":5,"mean_commits":10.6,"dds":0.1132075471698113,"last_synced_commit":"1e48db92781a93d51eb9de49910ba10c36592a55"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mui","download_url":"https://codeload.github.com/mui/tech-challenge-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224374683,"owners_count":17300691,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T02:13:02.676Z","updated_at":"2024-11-13T02:13:03.159Z","avatar_url":"https://github.com/mui.png","language":"JavaScript","funding_links":["https://opencollective.com/mui-org"],"categories":[],"sub_categories":[],"readme":"# React technical challenge @ MUI\n\nThis challenge is part of the hiring process for some of the Software Engineer positions at MUI.\nThe idea is to make as much progress as possible under a given time constraint (3-4 hours).\n\n## Why are we doing this?\n\nAt MUI, because we are a DevTools company, you'll make product decisions.\nYou will flesh out product requirements and turn them into a technical design and implementation.\nThis challenge simulates that, we will review the product decisions you make, the quality of the code, as well as how you approach diving into a complex codebase.\nWe want to get a glimpse of how you will perform in the role.\n\n## Context about MUI\n\nMUI's objective is to become the UI toolkit for React developers.\nWe're unifying the fragmented ecosystem of dependencies into a single set of simple, beautiful, consistent, and accessible React components.\n\nOur mission is, ultimately, to make building great UIs and web apps a breeze ⎯ quicker, simpler, and accessible to more people.\nAt the end of the day, it's about [_writing less code_](https://youtu.be/GnO7D5UaDig?t=2451).\n\nHead to [our Handbook](https://mui-org.notion.site/Why-MUI-d8b8c142a6a44e3aa963f26edf4e03db) to learn more.\n\n## The challenge\n\nYour challenge is split into two phases:\n\n- In the **[first phase](#first-phase)**, your objective is to build a simplified version of a Combo Box.\n- In the **[second phase](#second-phase)**, your objective is to handle a fake GitHub issue of the [same Combo Box component](https://v4.mui.com/components/autocomplete/) that runs in production.\n\n## First phase\n\n###### _~2 hours - The basics_\n\n### Introduction\n\nA Combo Box is a component that combines a _text box_ with a _dropdown list_, allowing the users to choose among a long list of mutually exclusive values. For instance, Chrome's URL bar:\n\n\u003cimg src=\"/combo-box.png\" width=\"100%\" /\u003e\n\n### Objective\n\nThe goal of this first phase is to implement the above component:\n\n- [ ] no high-level primitives, e.g. without [`\u003cdatalist\u003e`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist), without pre-made React components\n- [ ] reproduce as much of the UX of Chrome's URL bar as possible. You can also benchmark with the UX of Google's main search bar to adjust the tradeoffs. The end goal is to be able to use the component for the same search use case.\n- [ ] use React hooks, no class components\n- [ ] be written in TypeScript, `any` and `@ts-ignore` are accepted but need to be justified (comments)\n- [ ] be performant, it can render 300 options without virtualization\n- [ ] be accessible, end-users could only use the keyboard, see [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) for guidance. Their [examples](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html) might be the most helpful.\n- [ ] looks great, has a beautiful UI\n- [ ] make the existing test pass, add tests for edge cases\n- [ ] has no linting errors (`yarn prettier \u0026\u0026 yarn eslint \u0026\u0026 yarn typescript`)\n- [ ] has an ergonomic API\n\nIn practice, such a solution would require dozens of hours to reach the high-quality bar we expect MUI components to have (if not \u003e 100 hours). To keep the challenge short, we will focus on solving a subset of the problem:\n\n- you may drop behaviors that have a too high time opportunity cost. Please **document the behaviors you drop and why**.\n- don't write documentation but enough to see how to use the component, e.g. one demo.\n- only one browser support (of your choice)\n- no touch screen support\n- no dark mode support\n- no right-to-left support\n- no npm publish\n\n### Work environment\n\nTo save you time, a working environment was created with Next.js/TypeScript/eslint/prettier/testing-library/Babel, etc.\nIt's a reproduction of the [mui/material-ui](https://github.com/mui/material-ui) repository.\nYou can install this environment by following these steps:\n\n- clone the repo: `git clone git@github.com:mui/tech-challenge-react.git`\n- install the dependencies: `yarn`\n- use a Node.js's version \u003e= 18.0.0 and \u003c 21.0.0\n- start Next.js: `yarn start`\n- open http://0.0.0.0:3002/components/phase1/\n\nYou can find the source of this URL at [`docs/pages/components/phase1.tsx`](https://github.com/mui/react-technical-challenge/blob/master/docs/pages/components/phase1.tsx), it already contains a data set of 248 countries.\n\nYou can find the existing test to make pass at [`docs/pages/components/ComboBox.test.js`](https://github.com/mui/react-technical-challenge/blob/master/docs/pages/components/ComboBox.test.js).\nThe tests in the file can be run with this command: `yarn t ComboBox`.\n\n## Second phase\n\n###### _~1-2 hours - The polish_\n\n### Introduction\n\nCongratulations, you have completed the first implementation of the component in the first phase. Now, it's time to push it to production!\n\nFast forward months and hours of iteration on the component, you might reach a state close to the same [Combo Box](http://0.0.0.0:3002/components/autocomplete/) component that we were running in production around January 2021.\n\nThis second phase is about handling a fake GitHub issue a developer has just opened.\n\n### Issue\n\n_Developers rarely spend the time to explain the pain point they face in detail nor provide context. Lucky for us, we received a reproduction we can leverage:_\n\n\u003e Hi, I'm facing problem, please help.\n\u003e\n\u003e #### Steps to reproduce 🕹\n\u003e\n\u003e 1. Open https://codesandbox.io/s/recursing-mclean-2dub0?file=/demo.tsx\n\u003e 2. Type \u003ckbd\u003e1\u003c/kbd\u003e in the textbox. Once the options are loaded, the component displays options filtered by input value. The callback `onHighlightChange` log correct value `option 1 1`.\n\u003e 3. Then type \u003ckbd\u003e2\u003c/kbd\u003e in the textbox. The textbox now contains `12`. The component displays options filtered by input value. The callback `onHighlightChange` log wrong value `option 1 1` instead of `option 2 12`.\n\u003e\n\u003e #### Environment\n\u003e\n\u003e `@material-ui/core@5.0.0-alpha.15`\n\n### Guidance\n\nThe repository you have cloned in the beginning includes a simplified version of https://github.com/mui/material-ui on v5.0.0-alpha.15.\n\n- The documentation of the Autocomplete component can be found at http://0.0.0.0:3002/components/autocomplete/. It's updating live with changes in the source.\n- The tests of the Autocomplete component can be found at [`packages/material-ui/src/Autocomplete/Autocomplete.test.js`](https://github.com/mui/react-technical-challenge/blob/master/packages/material-ui/src/Autocomplete/Autocomplete.test.js)\n- The tests of the Autocomplete component can be run with `yarn t Autocomplete`.\n- We expect the bug fix to come with a new test that will prevent regressions.\n- Fixing this bug might require breaking other tests, you should evaluate if the tradeoff is acceptable.\n\n### Objective\n\nThe goal of this second phase is to improve the component from v5.0.0-alpha.15 and hopefully solve most of the pain points of this developer.\n\n- [ ] Commit your changes in your fork\n- [ ] Explain the tradeoff taken, compared to the alternatives\n\n## Submission\n\nInstructions:\n\n- **DO NOT** fork / host your project on a public repository.\n- Please send us a zip file containing this project using the upload link that we have provided by email (**with** the _.git_ folder).\n- To significantly reduce the size of the archive, remove the `/_node_modules_/` and `/docs/.next/` folders.\n- If you don't have the upload link, you can send it to job@mui.com.\n\nWe're excited and looking forward to seeing what you'll create!\nGood luck 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmui%2Ftech-challenge-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmui%2Ftech-challenge-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmui%2Ftech-challenge-react/lists"}