{"id":19962800,"url":"https://github.com/mui/tech-challenge-design-engineer","last_synced_at":"2025-08-18T10:04:18.448Z","repository":{"id":152227886,"uuid":"614433849","full_name":"mui/tech-challenge-design-engineer","owner":"mui","description":"This challenge is part of the hiring process for some positions at MUI.","archived":false,"fork":false,"pushed_at":"2025-08-09T19:05:33.000Z","size":2944,"stargazers_count":21,"open_issues_count":0,"forks_count":8,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-08-18T10:02:35.615Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":"mui-org","ko_fi":null,"tidelift":null,"custom":null}},"created_at":"2023-03-15T15:18:22.000Z","updated_at":"2025-08-11T06:27:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"ff5d6ed6-657f-40dd-b933-8b82b6130aa6","html_url":"https://github.com/mui/tech-challenge-design-engineer","commit_stats":{"total_commits":16,"total_committers":3,"mean_commits":5.333333333333333,"dds":0.3125,"last_synced_commit":"59e5276404f55f213e49285f77691edaee35dccc"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mui/tech-challenge-design-engineer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-design-engineer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-design-engineer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-design-engineer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-design-engineer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mui","download_url":"https://codeload.github.com/mui/tech-challenge-design-engineer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-design-engineer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270975219,"owners_count":24678263,"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","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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:00.827Z","updated_at":"2025-08-18T10:04:18.314Z","avatar_url":"https://github.com/mui.png","language":"TypeScript","funding_links":["https://opencollective.com/mui-org"],"categories":[],"sub_categories":[],"readme":"# Design Engineer technical challenge @ MUI\n\nThis challenge is part of the hiring process for some positions at MUI.\nThe idea is to make as much progress as possible under a given time constraint of (3-4 hours).\n\n## Context\n\n### About the company\n\nMUI is a fully remote company with a team that spans the globe.\nThe majority of our work is asynchronous, and we rely on written communication to collaborate.\nWe're radically transparent: nearly all of our work happens in public.\n\nFor additional details about the culture, you can check our [careers](https://mui.com/careers/) and [about](https://mui.com/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b).\n\n### About the products\n\nMUI is best known for our flagship product, Material UI—but this is just one of three core component libraries we maintain.\nBase UI is our headless component library, and Joy UI is a sister library to Material UI that implements our own in-house Joy Design system.\nWe also host Design Kits and pre-built Templates.\n\nBeyond the core libraries, MUI X offers advanced components like the Data Grid, Date and Time Pickers, and Charts, for more complex user interactions and data visualization needs.\n\nWe're also making ambitious moves to incorporate our full suite of components into Toolpad, a low-code admin builder tool for assembling full-stack apps faster than ever.\n\nLearn more about MUI's products in this blog post: [An introduction to the MUI ecosystem](https://mui.com/blog/mui-product-comparison/).\n\n## The challenge\n\nGiven that the Design Engineer position sits right at the intersection between engineering and design, this challenge aims to simulate how a potential day-to-day situation plays out.\nOur challenge is to **develop a stacked Snackbar** component.\nWe'll review how you make design decisions and the quality of the written code.\n\nHere's an example design:\n\n\u003cimg alt=\"Snackbars example design\" src=\"./public/snackbar-reference.gif\" width=\"465\" height=\"392\" /\u003e\n\nWe encourage you to add your creative spin to the design—we want to see your design taste!\n\n### Requirements\n\n- **Stack:** Use the Base UI [Snackbar](https://mui.com/base-ui/react-snackbar/) or a similar headless component from a library of your choice as the foundation.\n- **Transitions:** the Snackbars should appear and disappear gracefully on the screen, using an animation.\n- **Dark mode:** make sure to support light and dark modes.\n- **Interactivity:**\n  - The other Snackbar instances should be visible after some interaction, either clicking a button or hovering over the stack.\n  - They should stay open when focused, and collapse when the focus moves away.\n  - Each instance should have a functional close button.\n  - _Bonus:_ Add an option to make the Snackbars close automatically after some configurable time interval. This should be compatible with [WCAG 2.2.1](https://www.w3.org/TR/WCAG21/#enough-time).\n\n### Work environment\n\nTo save you time, we created a working environment with Next.js, TypeScript, ESLint, and other complementary dependencies.\nFollow the steps:\n\n- Clone the repo: `git clone git@github.com:mui/tech-challenge-design-engineer.git`\n- Install the dependencies: `pnpm i`\n- Start Next.js: `pnpm dev`\n- Open http://0.0.0.0:3002/\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 `/.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-design-engineer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmui%2Ftech-challenge-design-engineer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmui%2Ftech-challenge-design-engineer/lists"}