Let's pretend that Asana is actually a pet adoption agency. (Our SF office is so dog-friendly that it's not too far a stretch!) We need a web page that contains an image gallery of the pets we have available for adoption. We'd like you to build it.
To help you get started, we've included a few pre-built frontend components, a data file that you should use to populate the gallery, notes on intended user interactions, and guidance about how this gallery supports our efforts to get more pets adopted.
"These images should be displayed on the page as a set of thumbnails; clicking on a thumbnail should display a full-sized image to the user."
"Full-size photos should be able to be closed, and the user should be returned to the thumbnail gallery."
"Starting next month, we'll be partnering with a shelter that has 2000 pets available for adoption. We need this page to be able to handle that many listings."
"Most people find out about us from internet searches. We need this page to appear towards the top of search results."
They will be grading on five areas:
- Fidelity - How well does it work? Does it do what the design calls for?
- Robustness - Does the page work across modern web browsers on desktop and mobile?
- Maintainability - Is the project written cleanly, organized clearly and documented well?
- Performance - Is the page built to load fast and rank well in search engines?
- Your choice! Let us know which one (just one!) of these criteria we should use to evaluate your submission:
- Design Focus: How slick and polished are the page's UI and UX?
- Growth Focus: How did the questions from the team trying to boost adoption influence your technical choices?
- Tooling Focus: How did your use of build tools help you ship something high-quality faster?