6. Building the front-end part
In the previous sections, we prepared API endpoints to give us all the data we need to create the front-end part of Design Viewer. Since the main goal of this tutorial is to introduce the Open Design SDK, this part of the tutorial will be more condensed.
As a reminder, Design Viewer will display designs just like in the design tool it was created in. The app will have two screens. The first screen will be for entering the design ID and the second will display the design.
Creating Screen 1
Let's create the first screen for entering the design ID:
pagesfolder, replace the original
index.jswith the following:
Create a file called
styles/Style.module.csswith the following contents (from CodeSandbox):
And also replace the contents of
styles/globals.csswith the following contents (from CodeSandbox):
Creating Screen 2
Create a new file called
pages/design/[id].js. Note that this filename has brackets because that's how you define a dynamic route in Next.js. If you're interested in more, you can read about it here.
Paste in the following contents:
pages/api/artboards.jsto include the bounds of each artboard. It calls the
getBoundsmethod on each artboard and extend the artboard listing.
The code above has a few important parts to call out:
getServerSidePropsfunction calls the API endpoints we created in the earlier sections to pass the design data to the
DesignViewercomponent as props.
ArtboardPreviewcomponent is also important. We get the bounds (positioning data) from the modified Artboards endpoint.
Test it out
Head to http://localhost:3000, provide a design ID, and see if it works!
Was this article helpful?