Scaffolding the codebases
Time to get knee-deep in coding, which we will kick-start by using a bit of boilerplate that we're going to scaffold.
Let's revisit the plan a bit.
We are setting up a pipeline to supercharge our capability of producing design, turning it into code, and putting it out there in a live environment for real users to enjoy.
We need several things to be in place for this to happen:
Infrastructure and services, for example, GitHub. Most of this we have handled already.
A codebase for the component library, from which we can share our work.
A codebase for some application to use our components.
The two last parts are what we'll act on in this lesson.
As I have previously told you, the tech stack for our apps will be React, Styled Components, and Storybook.
Install degit#
Degit is a convenient tool to do something that's always been bugging me: when you clone something, you don't necessarily want all the history and branches of whatever you cloned. Using degit
, you only get a "shallow clone" of a repo containing the most recent code—perfect for downloading a template!
In your terminal or editor, we need to first install degit
on your machine. Run npm install -g degit
to make it globally available.
The application#
Next, navigate somewhere on your machine where it's okay to put the two codebases.
Then go ahead and clone the application repository:
npx degit mikaelvesavuori/acmecorp-potted-plants-app my-app
Feel free to change my-app
to anything you like better.
Verify functionality#
We need to get things running. Run npm install
. It will take a moment or two for it to install the dependencies.
Now, run npm start
to fire up the Webpack development server. The app will start at the /demo
path.
It may not yet be worthy of the Awwwards, but at least we have a skeleton structure in place.

There is also the products view at localhost:8080/products
:

And the checkout view (localhost:8080/checkout
):

Good job!
Structure#
Take a look at the structure of the project.

This page is a preview of The newline Guide to React Component Design Systems with Figmagic