For this take home challenge, you'll be testing / debugging a React app that manages the books on your bookshelf.
We've just had the engineering team finish up a prototype for their new bookshelf app design. From a quick glance it looks fine but it's still very rough around the edges. The team needs you to run exploratory QA on this MVP so the engineering team can fix any bugs you might find before public release.
With the tight deadline, we don't want this to take more than 2 hours. Get as much done as you can within 2 hours and don't spend all day on it. If you don't finish, it's totally okay (you can show what you've got).
Diving in, go ahead and do the following:
- Open the prototype link in your browser of choice (it may be nice to test on different browsers but just pick your daily driver to start).
- Open the Figma doc so that you can have a good record of what the desired state of the app is.
- Gather any tools you may want to use for manual, blackbox QA testing. This could be certain developer tools or anything you may find useful.
The PM Slacked over a quick bulleted spec list along with the designs so that you know what to test.
- The index route should render the list of books and an
Add bookbutton. - The
Add bookbutton should bring up a form to add a new book. - The form should have 4 fields, "title", "author", "description", and "imageUrl" (see design).
- Submitting the form should add a new book to the database.
- Use the design file and try your best to match it.
It's not much, but it rarely is in startup land! The PM didn't have time to put together a testing plan so you really are starting from scratch basically.
Here's the deliverables we are looking for:
- Create a list of bugs found in the app. Hint: we've found a combination of CSS, HTML, and JS issues and there at least a dozen.
- For each bug, recommend either a possible solution or instructions to debug further.
- As you're going through the QA process, formulate a test plan for future testing passes.
Put all of these deliverables in a single, structured Markdown document and then move on to the walkthrough!
Once you've completed the challenge, record a quick video explaining what you've found. The video should be less than 10 minutes and should speak to the following things:
- Share your screen and walk through the app, calling out the bugs you've found visually. Make sure to discuss your process on how you found the bugs along the way.
- If you had more time, was there anything else you would have done to test the app?
- If you owned this project, what else would you add to it to make it even better?
Don't worry about the production quality of your video at all, this is just for us to get a sense of how you communicate asynchronously (since we're all over the place!). And by no means is it a requirement to have your face in the frame...we'll see you in the debrief either way!
Here's an example of what the video might look like (with a different app obviously).
Send us over the finished project Markdown file and your video. You can put everything in one place (like in a GH repo README) or have multiple links, either is fine. Just make sure everything is public so we can have the team look through it without needing a password.
Once we get your completed deliverables, we'll schedule a 45 minute debrief to go over everything. This will be with engineers and colleagues on the team that you'd be working with day-to-day and will mainly be used to answer questions we may have after looking at your video or report.
These are all the instructions we've got, so do your best to fill in the blanks however you want! We look forward to debriefing synchronously soon.