Welcome to the HDR UK Gateway Frontend, a Next.js React application that powers the user interface of the HDR UK Gateway. This application facilitates seamless interaction with the Gateway API using:
- fetch for efficient server-side communication.
- SWR for optimized client-side data fetching and state management.
- i18next for internationalization and multi-language support.
- Jest for unit and snapshot testing.
This project utilizes the App Router of Next.js, providing improved performance and flexibility over the traditional Pages Router.
Follow these steps to install and run the project on your local machine.
Ensure you have the following installed:
- Node.js (Latest LTS version recommended)
- npm or yarn (Package manager)
- Git (For cloning the repository)
Open a terminal and execute:
git clone https://github.com/HDRUK/gateway-webcd gateway-webCreate a .env.local file and populate it with appropriate values, using .env.example as a reference.
Run the following command to install the required packages:
npm installOnce dependencies are installed, start the application using:
npm run devBy default, the application will be available at http://localhost:3000.
In the project directory, you can run the following commands:
npm run dev– Starts the development server.npm run build– Builds the application for production.npm start– Runs the compiled production build.npm run lint– Runs ESLint to check for code quality issues.npm run lint:fix– Runs ESLint to automatically fix simple lint issues.npm test– Runs the Jest test suite.npm test:snapshot– Runs the Jest test suite to update snapshots.
For a full list of scripts, run npm run.
A brief overview of the project's folder structure:
├── app/ # Next.js pages/api routes/actions
├── components/ # Reusable React components
├── config/ # Reusable configuration throughout the gateway
├── const/ # Constant values
├── hooks/ # React hooks
├── interfaces/ # Types and interfaces
├── modules/ # Module components
├── pages/api # Legacy APIs that need adapting to App Router APIs
├── providers/ # Provider Wrappers, such as SWR, Snackbars...
├── public/ # Static assets (images, fonts, etc.)
├── seeded/ # Any seeded data during the build process, such as sitemap
├── services/ # Services and clients such as API calls
├── styles/ # Global styles and theme settings
├── types/ # Types and interfaces
├── utils/ # Helper functions and utilities
├── .env.local.example # Sample environment variables file
├── next.config.js # Next.js configuration
├── package.json # Project dependencies and scripts
└── README.md # Project documentation
This project uses i18next for multilingual support, allowing for seamless language switching and localization. Translations are managed within the /src/config/messages/ directory and integrated using the i18next library.
We use Jest for unit testing and React Testing Library for component testing. Snapshot testing is included to ensure UI consistency.
To run tests:
npm testTo update snapshots:
npm test:snapshot- Next.js Documentation
- React Documentation
- SWR Documentation
- i18next Documentation
- Jest Documentation
- HDR UK Gateway API
For further support, please reach out via HDR UK or raise a bug or even better raise a PR!