Skip to main content

Overview

Blueprint uses Turborepo to build and deploy multiple apps from the same repo.

This structure has a number of advantages, most notably:

  • The ability to reuse and update core components across multiple apps
  • The ability to customise each app individually

Apps​

The architecture section has a full list of starter apps that ship with Blueprint

Packages​

The architecture section documents the various shared 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 apps 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.