New shopify Website with DVTK.
Hosted on Heroku

We're using Next.js to get a full server-side rendered app. See the config file at ./next.config.js or check the documentation.

$ yarn

$ yarn dev

$ yarn build

$ yarn start

$ yarn run storybook

We're using Shopify's storefront API to get/send data to the shop, using GraphQL and Apollo.

• Storefront API
• GraphQL
• Apollo
  
  

We're using Tailwind style system here to help us reduce the final stylesheet. Use it with CSSModules to compose existing classNames.

Example:

.element {
  composes: global(text-black) /* color: black; */ global(bg-white) /* background-color: white; */ global(p-2) /* padding: 20px; */;
}

See ./tailwind.config.js for the project's styleguide or check the documentation.

We're dividing components in 3 category:

Single UI elements, like <Heading /> that would display titles or <Spacing /> that would manage spacings.

Complex components that are made of multiple Atoms.

Components that fetch data and are made of Atoms and Molecules, they are mostly page specific but can be re-used across the app.

Everytime we build a new Atom or Molecule (not needed for Organisms) we create a story for that component. It makes it easier to keep track of each component and its props.

In the same component's folder just add a ComponentName.stories.js.

See storybook documentation

[email protected]