⚛️ Design Engineer @ MUI: Technical challenge

This challenge is part of the hiring process at MUI for the Design Engineer position. The idea is to make as much progress as possible under a given time constraint (3-4 hours).

Why are we doing this?

At MUI, you'll frequently flesh out product requirements, turning them into implementations that take into account great design & code standards. This challenge aims at simulating how a potential day-to-day situation plays out. We'll review how you make design decisions and the quality of the written code.

Context about MUI

MUI's objective is to become the UI toolkit for React developers. We're unifying the fragmented ecosystem of dependencies into a single set of simple, beautiful, consistent, and accessible React components.

Our mission is then, ultimately, to make building great React UIs and web apps a breeze ⎯ quicker, simpler, and accessible to more people. At the end of the day, it's about writing less code.

Head over to our company Handbook to learn more!

Challenge summary

Given that the Design Engineer position sits right at the intersection between engineering and design, this challenge was tailored to elevate your skills in both areas. You’ll develop a stacked Snackbar component, and here’s the reference design:

Feel free to add your own creative spin to this design, tweaking it however you want to add more spice and personal taste. However, we do have a few requirements:

• Stack: use MUI Base’s UnstyledSnackbar component or even other headless/unstyled component libraries as the foundation for it.
• Expand & collapse interaction: the Snackbar sitting behind should be fully visible as you hover the stack. It then should collapse as you hover out of it.
• Dark mode: make sure to support light and dark modes.

Submission instructions

• DO NOT host your project on a public repository.
• Please send us a .zip file containing this project using the upload link that we have provided by email (with the .git folder).
• To significantly reduce the size of the archive, you can remove the /_node_modules_/ and /docs/.next/ folders.
• If you don't have the upload link, you can simply send it to job@mui.com.

We're excited and looking forward to seeing what you'll create! Good luck 🚀