Skip to main content

Overview

Clients use Blueprint in two ways: they use the Foundation app as a template or reference app (to copy-paste features into their own project), or they install our published packages in an existing project. In both cases you get:

  • The ability to reuse and update shared components and patterns
  • The ability to customise the app or integration for your project

Foundation​

The Foundation section describes the app we deliver—use it as a starter or as a reference to lift-and-shift features.

Packages​

The Packages section documents the various published packages that ship with Blueprint

Queries​

API queries are performed at the app level. This helps to prevent any mismatch between graphql schemas of Kraken instances.

Composition​

Pages in the Foundation app are composed of a mix of:

  • Core components
  • Core hooks
  • App-specific components
  • App-specific hooks

How do I make a brand new feature or customer journey?​

At a high level, before starting work on a new feature, we recommend the following:

  • Search this docs site for key words to see if it already exists, or if there is something similar,
  • Check the Kraken technical guide (ask your client delivery lead if you don't have access) to see if the concept exists in Kraken and learn about related concepts,
  • Look at your production or test Kraken to see if there is a similar feature or data to support your feature available there,
  • If Kraken already has a capability and you wish to add it to your consumer site, search the API schema for likely looking queries, mutations or field names that might be related. You can do this with the GraphiQL interface, which you'll find at something like https://api.clientcodehere-kraken.energy/v1/graphql/. You should also try out the Kraken feature in your test Kraken using test data and recipies where possible, and see what events are triggered if you need events to trigger other actions or understand how the data is displayed and held in order to identify query's and query fields to use.

Once you've tried these steps, you'll have a lot of great foundations from which to look for further support.

If you wish to build a new feature on into your consumer site, it's helpful to understand the API queries you'll need to use upfront. Try using the GraphiQL interface on your API site to make requests to a test account or other appropriate data structure to test your understanding of the data available. When you've done that, you can write your hooks for your feature.

If you're prototyping and don't have data available, you might find creating components and rendering them in Storybook to be a helpful.