To understand the test, first you need to know two concepts:
- Document: a Sketch file that contains a design. A document can have N artboards, among other things that are not relevant to this test.
- Artboard: a type of layer that is used to contain other layers and displays a fixed frame on the Canvas. Usually they have a preset size. For instance, an iPhone X artboard has the size of an iPhone screen so you can place layers that builds your design in the artboard as they were on an iPhone.
A document usually has several artboards, each per a relevant page design: home screen, sign in screen, sign up screen, settings screen...
We want you to develop a document viewer for Sketch documents in the cloud with the following requirements.
This viewer must have two screens:
- Document page: Here, the user sees all artboards in the document. You need to show the artboards as thumbnails.
- Artboard page: Here, the user sees a particular artboard in a bigger size than in the document view.
Interactions:
- When the user views the document page and clicks on an artboard's thumbnail, the artboard page is loaded. The app shows the artboard full size, as described before.
- The user can navigate through the different artboards using the navigation controls in the top bar.
- The user can return to the document view clicking on the Close button in the left side of the top bar.
Notes:
- If the artboard image is bigger than the space available, it must get shrunk to fit on the screen.
- If the artboard image fits in the available space, show it in its original size.
You can check the design at https://www.sketch.com/s/26343997-bb48-43ff-a2f7-bd6bc7ef976c (see Document
and Artboard
artboards.)
You can play the prototype to get a better idea of what to develop.
You can download it, but there's no need to open it in the Sketch app. Implement the design in your web app the best you can.
Here you'll find the icon assets of the design. assets.zip
The document that you must show has the id e981971c-ff57-46dc-a932-a60dc1804992
Our API is based on GraphQL. The endpoint of our GraphQL API is https://graphql.sketch.cloud/api
You don't have to study the schema. Use the following query to get all the data that you need to render the application.
{
share(id: "e981971c-ff57-46dc-a932-a60dc1804992") {
identifier
version {
document {
name
artboards {
entries {
name
isArtboard
files {
url
height
width
scale
thumbnails {
url
height
width
}
}
}
}
}
}
}
}
The requested document is a historical collection of different screens. An iPhone 3 home screen, a Xerox Alto screen, a Window vista screen... Each of those screens are on its own artboard, each one with its original size.
- The application has to be developed using React.
- For styling, you can use whatever you want. We use styled components at Sketch, but feel free to use what you're more comfortable with.
- You can upload your solution to GitHub, GitLab, or the service of your preference. If, for privacy reasons, you don't want to publish anything, send us the repo in a ZIP file. Even if you send the code within a ZIP file, make sure it's a GIT repository, and we can see your gradual commits.
- We won't accept Pull Requests in this repo. Send us the link to your own repo or ZIP file as mentioned above to the mail address at the bottom of this file.
- Add a README.md file with the decisions you took, any information you want to share with us (possible improvements, for example), and the installation instructions. The app must work as expected following your instructions.
- We value our team life-work balance. Take the time you need to feel comfortable with your solution and do it at your own pace. If you feel that it's taking too much, stick to a basic implementation and tell us in the README.md how would you improve the code.
- A nice architecture. Code is read more than it is written, so the easier it gets to follow your code, folder structure, etc... the better.
- Your UI composition. We'll check how you connect the different components of the application between them and how the data/state flows. Again, the easier for us to read it, the better.
If you've finished the application as it's stated above, send us the code with no problems. But in case you want more challenges, you can add a couple of features (working on the bonus points won't necessarily make us value better your solution):
- Tests.
- Load different documents depending on the URL. In addition to the default document above, you can query for the one with the id
40432a93-5434-4059-87b9-545fd1ad6ee0
If you have any doubt, don't hesitate and send us an email (ivan@sketch.com or joanna@sketch.com)
We can't wait to see what you come up with! Thanks for your time!