README.md

Octopus UI

The Octopus UI is a Next.js project bootstrapped with create-next-app.

---

Getting started

Create a .env file inside ~/ui using cp .env.example .env. Update it to add your ORCID (the same one you used in the api .env file):

# set to same as ORCID_ID in api .env file
NEXT_PUBLIC_ORCID_APP_ID=PUT_ORCID_APP_ID_HERE

Leave the rest of the file as is.

To start the UI, in the UI directory run:

$ ~/ui$ npm i
$ ~/ui$ npm run dev

Open https://localhost:3001 with your browser to see the result.

To view any dynamic pages, you will also need to start the API. More information can be found in the API readme.

---

Working with the UI

If you add a new static page to the site, remember to add it to the array of static page names in the static pages sitemap at src/pages/sitemaps/static.xml.tsx.

---

Technologies

Languages

• TypeScript - See config

Frameworks

• Next.js - See config
• Tailwind CSS - See config

Libraries

• Framer Motion
• Luxon
• PostCSS
• SWR
• Zustand

Linting

• ESLint - See config
• Prettier - See config

---

Testing

UI tests use Jest and React Testing Library.

To run the tests, run the command npm run test.

---

Workflows on push

We have a job which utilises Lighthouse CI to run an accessibility audit on all pages - See config. If the accessibility score falls below 95, the action will fail and all accessibility failures will be outputted.

---