This prototype supports the identification of user needs and testing of user interactions and workflows for the NHS RIPT React POD product dashboard integrating the NHS FDP Design System.
This is a Next.js project that demonstrates:
- Performance Overview Dashboard (POD) functionality
- NHS Design System integration
- SPC (Statistical Process Control) chart visualisations
- Responsive navigation and data tables
You'll need a GitHub Personal Access Token with read:packages permission to install the NHS FDP Design System from GitHub Packages.
- Create a token at https://github.com/settings/tokens
- Select the
read:packagesscope - Copy the token
First, configure npm to authenticate with GitHub Packages. Create a .npmrc file in the project root:
echo "@fergusbisset:registry=https://npm.pkg.github.com" > .npmrc
echo "//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN" >> .npmrcReplace YOUR_GITHUB_TOKEN with your actual token.
Alternatively, you can use an environment variable by setting:
export NPM_TOKEN=YOUR_GITHUB_TOKENThen create .npmrc with:
echo "@fergusbisset:registry=https://npm.pkg.github.com" > .npmrc
echo "//npm.pkg.github.com/:_authToken=\${NPM_TOKEN}" >> .npmrcThis approach is more secure as it keeps the token out of the .npmrc file.
Then install dependencies:
npm installThen run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This prototype is configured to deploy to Heroku. Make sure the NPM_TOKEN environment variable is set for GitHub Packages authentication.
Unless stated otherwise, the codebase is released under the MIT License. This covers both the codebase and any sample code in the documentation.
Any HTML or Markdown documentation is © Crown Copyright and available under the terms of the Open Government Licence v3.0.