> For the complete documentation index, see [llms.txt](https://nccr-liri.gitbook.io/annotation-web-interface-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nccr-liri.gitbook.io/annotation-web-interface-docs/technical/publish-your-docs.md).

# Frontend Architecture

The Callmark Frontend is written in React Javascript library. If you are new to react, it is recommended to get yourself familiar with the [basics of React](https://react.dev/learn), to better understand some of the core concepts and terminology used in this documentation.

Like every React app, Callmark Frontend is built of multiple components. An overarching `App.jsx` component encapsulates all subcomponents. There are two types of subcomponents: 

\
**Singular subcomponents** only exist once per instance. Some important one's: `SpeciesMenu.jsx`, `GlobalConfig.jsx`, `ImportCSV.jsx`, `Export.jsx`\
\
**Plural subcomponents** can have multiple instances, for example: `Track.jsx` and it's subcomponents. The user can freely create or remove these components from the Virtual DOM.\
\
Or visually conceptualized: 

<figure><img src="/files/2ZXEQVVanHr655ioyDxR" alt="Diagram of the App Architecture"><figcaption><p>Diagram of the App architecture</p></figcaption></figure>

There are more types of components, but for the sake of visual simplicty I have omitted some.