Bricking It

Bricking It was a single page website designed for Prismic’s Slice Machine competition. The competition was to build a single or two page website themed around a startup, real or imaginary. I based mine around the idea of a mobile phone app which uses the camera to scan real life objects, and turn them into a Lego model with building instructions.

The other requirements for the competition was to use Slice Machine, a workflow tool built by Prismic which lets you build Slices locally rather than using their website. Slice Machine came with additional advantages such as auto generating the model file as well as mock files. These mock files included auto populated data related to the model, such as randomised text for RichText areas, as well as images from Unsplash for Image areas. Slices generated from SliceMachine could be stored as a library so they could be used for future projects, as well they can be shared back to Prismic and store in a teams Shared Slices library.

These slices were ready to be styled within Next.js, and could be previewed with another workflow tool called Storybook. Storybook is a tool that lets you view components in isolation. This was a perfect tool to be pair with slices, as it lets you view each slice with all its styling, without getting lost among the other slices.

Paired together, Slice Machine and Storybook created an extremely quick development experience. Models and mock data could be generated within minutes, while Storybook provided a way to style the components without having to launch a Next.js dev server and import the data. Slice Machine currently lacks a few features, such as content relationships which makes it unsuitable for production websites, but they will be included in future releases.