|
|
|
The UnHIDE project, as mentioned in the READme covers two ways of interacting with the Helmholtz Knowledge Graph (HKG). The project provides a [web-UI](https://search.unhide.helmholtz-metadaten.de/) and a set of [web-APIs](https://search.unhide.helmholtz-metadaten.de/api/hello) to search the HKG.
|
|
|
|
|
|
|
|
## The Stack
|
|
|
|
|
|
|
|
- Framework and language for both interfaces: [NextJS](https://nextjs.org/) with [TypeScript](https://www.typescriptlang.org/docs/handbook/intro.html).
|
|
|
|
- Web-UI styling: [TailwindCSS](https://tailwindcss.com/) and [HeadlessUI](https://headlessui.com/) (where necessary)
|
|
|
|
- Linting and formatting: [ESLint](https://eslint.org/docs/latest/) and [Prettier](https://prettier.io/docs/en/)
|
|
|
|
- Pre-commit hooks: [Husky](https://github.com/typicode/husky#readme)
|
|
|
|
- Web-APIs testing: [Jest](https://jestjs.io/)
|
|
|
|
- Web-UI will soon be unit and component tested with [Jest + React Testing Library](https://nextjs.org/docs/app/building-your-application/testing/jest).
|
|
|
|
- Synchronizing our projects metadata files: [SoMeSy](https://materials-data-science-and-informatics.github.io/somesy/latest/)
|
|
|
|
|
|
|
|
## Solution Architecture
|
|
|
|
|
|
|
|
* [ ] add solution architecture diagram
|
|
|
|
|
|
|
|
The NextJS application that defines both the web-UI and web-API interfaces is bundled as a single service. The [SOLR service](https://codebase.helmholtz.cloud/hmc/hmc-public/unhide/data_harvesting) contains data from the HKG indexed specifically for optimized search. It acts as the database to this web application.
|
|
|
|
|
|
|
|
## Project Structure Overview
|
|
|
|
|
|
|
|
* [ ] add root project structure screenshot
|
|
|
|
|
|
|
|
Here we represent important files and folders at the root and (+1) level of the repository based on their functionality
|
|
|
|
|
|
|
|
- Pre-commit hook: `/.husky`
|
|
|
|
- Environment variables: `.env.development.local`, `.env.example`
|
|
|
|
- Linting and formatting config files: `.eslintrc.json`,`.prettierrc`
|
|
|
|
- Metadata files: `codemeta.json`, `CITATION.cff`, `.somesy.toml`, `LICENSE`
|
|
|
|
- Framework based config files: `tsconfig.json`(TypeScript),`tailwind.config.ts` (TailwindCSS), `jest.config.ts` (Jest)
|
|
|
|
- NextJS: `/public`, `/src` and some config files. Read about the importance of [project structure ](https://nextjs.org/docs/getting-started/project-structure#top-level-files) in NextJS for details on these.
|
|
|
|
|
|
|
|
* [ ] add src structure screenshot
|
|
|
|
|
|
|
|
* `/app` contains the entry point to both the web-UI and the web-API definitions
|
|
|
|
* web-UI definitions can be found under `/[locale]`
|
|
|
|
* web-API definitions can be found parallel to it under `/api`
|
|
|
|
|
|
|
|
details of each of these folders will be explained in their respective pages. Since in NextJS folder structure defines available routes in the application the above structure allows for the web-UI to be served in the two different languages we support - English ( `/` or `/en`, which is default) and German ( `/de`)\] routes respectively . The web-APIs are consequently served via the `/api/{API_Endpoint}` routes. Read the [routing fundamentals ](https://nextjs.org/docs/app/building-your-application/routing)in NextJS for more details.
|
|
|
|
* `/components` contains definitions of all components written in React. The way components are made available in this folder is directly proportional to the order in which they appear based on the structure in `/src/app/[locale]`
|
|
|
|
* `` /layout `` contains components and their respective child components that are used in`` `src/app/[locale]/layout.tsx` ``
|
|
|
|
* `` `/app` contains components used in `src/app/[locale]/page.tsx` at its root level. While the `/app/results` folder contains components and their consequent child components that are used in `src/app/[locale]/results/page.tsx` ``
|
|
|
|
* `/locales` contains two files that have translation definitions that are needed by the application to support two languages
|
|
|
|
* `/resources` contain all application specific status resources
|
|
|
|
* `/types` contain type definitions used throughout the applications
|
|
|
|
* `/utils` contains definitions that allow web-UI to talk to the the SOLR service in order to get data it requires for the front-end |
|
|
\ No newline at end of file |
