Skip to content

frontend

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

frontend

README.md

TAXONOMY MODEL APP

About

This is the frontend of the Taxonomy Model App.

Prerequisites

To develop the frontend locally, you must install the following:

Technologies

Installation

To develop this application locally, follow these steps:

  1. Ensure you have the prerequisites installed before proceeding.

  2. Clone the repository

  3. Navigate to the frontend directory:

    cd ./frontend

  4. Install the project's dependencies:

    yarn install

    After running the above command, the postinstall script in the package.json will also run, and it will build and link the api-specifications dependency.

  5. Make sure to set up a env.js file in the public/data directory. You can use the env.example.js file as a template. Please request the necessary environment variables from the project team.

Running the development server locally

After installing and setting up the project locally, run the development server with the following command:

yarn start

The server will run on port 3000, and you can preview the application in your browser by visiting http://localhost:3000.

NOTE: This project uses HashRouter for routing. HashRouter uses the URL hash to simulate a full URL so that the page won't be reloaded when you navigate between routes. More on of how to define routes using HashRouter.

Storybook

We use Storybook to test and demonstrate components in the browser. To run Storybook, execute the following command:

yarn storybook

Testing

To run the test cases for the application, execute the following command:

yarn test

Accessibility Testing

The application uses Storybook and Axe-Playwright to test the accessibility of the components.

To run the accessibility tests cases locally, execute the following commands, open a shell and start storybook:

yarn storybook

Then, open another shell and run:

yarn test-storybook

Alternatively, you can run the following command in a single shell:

yarn build-storybook && yarn test:accessibility

Failing to comply to WAG 2.0 A rules will generate errors.

Failing to comply to WAG 2.0 AA, WAG 2.0 AAA, or Best Practice Rules will only generate warnings.

See UI Guidlines for more information on accessibility.

Building

To build the React application, execute the following command:

yarn build

Linting

To run the linter, execute the following command:

yarn lint

Contributing

Contributions are highly valued in this project.

In addition to the contribution guidelines mentioned in the parent directory, please follow these specific rules while working on the frontend project: