On the Innovation and Technology team here at Microsoft, our goal is to fairly evaluate all candidates and ensure that everyone has the best chance to show their potential. As a result, we’re doing a take home evaluation instead of a live coding portion within our interview. We hope this takes some of the stress and pressure off and allows you to operate more like you would during a normal day.
Given that this is a potentially complex thing to build, we are not asking that you bring a 100% production ready component or page. We want you to build out enough to show and discuss with the team. This challenge is intentionally meant to be ambiguous - we are not only testing your engineering skills but also how you think across design and engineering. If questions come up during the process, please proceed in the way that you best see fit. Be sure to note your questions, anything that stands out, and be prepared to talk through how you unblocked yourself and why.
Your time is valuable and we want to respect it. We know this could turn into a massive project or build so we don’t recommend going over 8 hours. We aren’t expecting perfection or even something entirely complete. Below we’ve listed the minimum we need to see to drive a discussion. We’ve also added some expand topics for you to think about or explore if you have some extra time. These can be left as discussion points for the presentation or during individual interviews.
Are you a dog lover who wants to learn more about the amazing diversity of canines? Do you wish you could see pictures of all the different types of dogs in the world, from the tiny Chihuahua to the majestic Great Dane? If so, you need to check out Woofer, the ultimate app for dog enthusiasts!
Woofer is a new and exciting app that lets you browse and discover all kinds of dog breeds and sub-breeds. You can select any breed from a menu and see its sub-breeds, along with pictures of each one. Woofer is more than just a fun and informative app. It is also a way to celebrate and appreciate the beauty and diversity of dogs, and to raise awareness about their conservation and welfare. By showing all dog breeds and sub-breeds, Woofer aims to promote respect and compassion for all dogs, regardless of their shape, size, or origin.
So what are you waiting for? Check out Woofer today and unleash your inner dog lover! 🐶
- Functional tree nav component populated from the Dog API (details below)
- Build to the design spec linked below
- Minimum light and dark theme.
- No established design systems to solve problems, we want to see your solution here only.
- Woofer places a great deal of importance on accessibility so please do consider how you would solve this in an accessible manner and be prepared to discuss it.
- Woofer knows that not everyone has the latest or fastest hardware, biggest screen, or best internet connections. Ensure you’re mindful and building with the broadest customer base in mind.
- Woofer places a high importance on UX and loves design.
- What else can the Dog API return that’s useful and what could you do with it to help Woofer in their mission?
- What might other HVDEs (high value dog enthusiasts) want to see?
- What limitations or issues came up during development?
Below we’ve provided you with a GitHub Codespaces template link that is pre-populated with TypeScript and React 18. This is a free service that provides up to 60 hours of usage and includes a preview pane all within the browser. No dev environment setup! All you need is a GitHub account and the link below. Once there, click the “Use this template” button in the top right and then “Open in a codespace”. After you open the template, it will start the app and you should see the Woofer logo. Before you get coding, open the source control tab and publish the branch to a public repo within your GitHub. That’s it! You should be ready to work. Happy coding and thanks for taking the time to show us what you can do!
https://github.com/brandonthomas/codespaces-uxe-challenge - you're here now
Password: woofwoof
We’ve placed the only assets you should need in the public folder. Exporting or other production design work shouldn’t be necessary.
- https://dog.ceo/api/breeds/list/all which returns all the information in JSON you should need to populate the navigation.
- For more information on the complete Dog API please see their documentation (it’s very simple which is great) Dog API
In the project directory, you can run:
We've already run this for you in the Codespaces: server terminal window below. If you need to stop the server for any reason you can just run npm start again to bring it back online.
Runs the app in the development mode.
Open http://localhost:3000/ in the built-in Simple Browser (Cmd/Ctrl + Shift + P > Simple Browser: Show) to view your running application.
The page will reload automatically when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.