This repository is the UI for JOD Yksilö. JOD Yksilö is part of the Digital Service Ecosystem for Continuous Learning (JOD) project.
The UI app is built using React, Vite, and TypeScript. React is a popular JavaScript library for building user interfaces, while Vite is a build tool that provides fast and efficient development experience. TypeScript is a superset of JavaScript that adds static type checking and other features to the language.
Together, these technologies provide a robust and efficient development environment for building modern web applications with a focus on user experience. The app is designed to be responsive and accessible.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
- First, ensure that you have NVM installed on your machine.
- Clone this repository to your local machine.
- Open a terminal window and navigate to the root directory of the project.
- Run the following command to install Node.js & NPM and the dependencies:
nvm install
nvm use
npm install- Take the steps in JOD Design System repository to get components of the design system work in hot reload mode.
- Once the installation is complete, run the following command to start the development server:
npm run dev- The app should now be running on http://localhost:8080/.
See instructions in JOD Yksilö backend repository and Wiki page.
Third-party assets such as images, fonts, and icons are stored in a S3 bucket. Guide to download assets is available in the infrastructure repository.
Run the following command to update the JOD Design System to the latest version:
npm update @jod/design-systemStart the JOD Yksilö locally and make sure it is running on http://localhost:9080/. Then run the following command to generate TypeScript types from the OpenAPI schema:
npx openapi-typescript http://localhost:9080/openapi/openapi.json -o src/api/schema.d.ts && npx prettier src/api/schema.d.ts --writeAxe is used automatically when run in development mode.
When starting the development server you can see findings of Axe, if any, on the console for e.g when missing <main>-tag:
New axe issues
moderate: Document should have one main landmark https://dequeuniversity.com/rules/axe/4.8/landmark-one-main?application=axeAPI
moderate: All page content should be contained by landmarks https://dequeuniversity.com/rules/axe/4.8/region?application=axeAPI
Useful browser extension to use