QMolSim

+ ); +} + +export default Background; diff --git a/src/GlobalVars.ts b/src/GlobalVars.ts new file mode 100755 index 0000000..e5a4244 --- /dev/null +++ b/src/GlobalVars.ts @@ -0,0 +1,11 @@ +export const baseUrl = "/quantum"; +export const baseDomain = "localhost"; +export const basePort = 8001; +export const keycloakURI = "http://auth.localhost"; +export const baseUri = `http://${baseDomain}:${basePort}`; +//AppShell vars +export const headerHeight = 50; +export const sideMenuWidth = 280; + +// Global Style vars +export const defaultAnimationDuration = 100; diff --git a/src/Modals/NewExperiment/NewExperiment.css b/src/Modals/NewExperiment/NewExperiment.css new file mode 100755 index 0000000..e69de29 diff --git a/src/Modals/NewExperiment/NewExperiment.tsx b/src/Modals/NewExperiment/NewExperiment.tsx new file mode 100755 index 0000000..f6e0013 --- /dev/null +++ b/src/Modals/NewExperiment/NewExperiment.tsx @@ -0,0 +1,116 @@ +import { + Button, + Center, + Modal, + Select, + Space, + Textarea, + TextInput, + Title, + UnstyledButton, +} from "@mantine/core"; +import { useEffect, useState, type ChangeEvent } from "react"; +import "./NewExperiment.css"; +import { useExperimentStore } from "Stores/ExperimentStore"; +import CustomButton from "Components/CustomButton/CustomButton"; + +interface NewExperimentModalProps { + isOpened: boolean; + setIsOpened: (opened: boolean) => void; +} + +export function NewExperimentModal(props: NewExperimentModalProps) { + const [name, setName] = useState(""); + const [description, setDescription] = useState(""); + const { addExperiment } = useExperimentStore(); + //reset on open dialog + useEffect(() => { + if (props.isOpened) { + setName(""); + setDescription(""); + } + }, [props.isOpened]); + + const handleClose = () => { + props.setIsOpened(false); + }; + + const handleCreateExperiment = () => { + //TODO: add logic for backend server + + addExperiment({ + id: 1, + name: name, + description: description, + team_id: 1, + tasks_ids: [], + date_created: new Date(), + experiment_status: "DRAFT", + experiment_type: "a", + }); + props.setIsOpened(false); + }; + + return ( + Новый эксперимент + centered + size="75%" + styles={{ + content: { paddingLeft: "10px" }, + title: { width: "100%" }, + }} + > + { + setName(event.currentTarget.value); + }} + > + + + +

setInMolecule(e.currentTarget.value)}
+                  placeholder="Введите текст молекулы"
+                  classNames={{
+                    wrapper: "moleculeInputWrapper",
+                  }}
+                  onKeyDown={(e) => {
+                    // Stop arrow keys from reaching react-resizable-panels
+                    if (
+                      [
+                        "ArrowUp",
+                        "ArrowDown",
+                        "ArrowLeft",
+                        "ArrowRight",
+                      ].includes(e.key)
+                    ) {
+                      e.stopPropagation();
+                    }
+                  }}
+                />
+                <Space h="md" />
+                <Select
+                  value={inFormat}
+                  onChange={(value: string | null) => setInFormat(value)}
+                  searchable
+                  data={inOptions}
+                  placeholder="Выберите формат"
+                  classNames={{
+                    input: "selectInFormat",
+                    dropdown: "selectDropDown",
+                    option: "selectDropDownOption",
+                  }}
+                />
+                <Space h="md" />
+                <CustomButton
+                  color="accent"
+                  onClick={handleConvert}
+                  text="Преобразовать"
+                />
+              </div>
+            )}
+          </div>
+        </Stepper.Step>
+      </Stepper>
+    </Modal>
+  );
+}
diff --git a/src/Pages/DocumentationPage/DocumentationPage.css b/src/Pages/DocumentationPage/DocumentationPage.css
new file mode 100755
index 0000000..539770c
--- /dev/null
+++ b/src/Pages/DocumentationPage/DocumentationPage.css
@@ -0,0 +1,26 @@
+.DocumentationPage {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  padding-top: 25px;
+}
+
+.contents {
+  flex-grow: 1;
+}
+
+.tableOfContents {
+  position: sticky;
+  top: 60px;
+  width: 150px;
+  height: min-content;
+}
+
+.docTitle {
+  padding-bottom: 50px;
+}
+
+.hoverCard {
+  position: fixed;
+  bottom: 10px;
+}
diff --git a/src/Pages/DocumentationPage/DocumentationPage.tsx b/src/Pages/DocumentationPage/DocumentationPage.tsx
new file mode 100755
index 0000000..b1a452d
--- /dev/null
+++ b/src/Pages/DocumentationPage/DocumentationPage.tsx
@@ -0,0 +1,103 @@
+import {
+  ActionIcon,
+  Box,
+  Divider,
+  Menu,
+  TableOfContents,
+  Title,
+} from "@mantine/core";
+import "./DocumentationPage.css";
+import { IconMenu2 } from "@tabler/icons-react";
+import { Helmet } from "react-helmet";
+
+function DocumentationPage() {
+  return (
+    <>
+      <Helmet>
+        <title>Documentation | QMolSim</title>
+        <meta
+          name="description"
+          content="See the documentation on how to setup and use the qunatum computational system"
+        />
+      </Helmet>
+      <Title order={1} className="docTitle">
+        Документация
+      </Title>
+      <Divider />
+      <div className="DocumentationPage">
+        <Box className="tableOfContents" visibleFrom="md">
+          <TableOfContents
+            variant="light"
+            color="accent"
+            size="sm"
+            radius="sm"
+            scrollSpyOptions={{
+              selector: "section h2",
+            }}
+            getControlProps={({ data }) => ({
+              onClick: () =>
+                data
+                  .getNode()
+                  .scrollIntoView({ behavior: "smooth", block: "center" }),
+              children: data.value,
+            })}
+          />
+        </Box>
+        <Box className="hoverCard" hiddenFrom="md">
+          <Menu
+            width={280}
+            shadow="md"
+            openDelay={100}
+            closeDelay={100}
+            closeOnClickOutside
+            closeOnItemClick
+            floatingStrategy="fixed"
+          >
+            <Menu.Target>
+              <ActionIcon
+                aria-label="navigation"
+                variant="gradient"
+                gradient={{ from: "blue", to: "cyan", deg: 90 }}
+                radius={"50%"}
+                size={40}
+              >
+                <IconMenu2 size={25} />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <TableOfContents
+                variant="light"
+                color="accent"
+                size="sm"
+                radius="sm"
+                scrollSpyOptions={{
+                  selector: "section h2",
+                }}
+                getControlProps={({ data }) => ({
+                  onClick: () =>
+                    data
+                      .getNode()
+                      .scrollIntoView({ behavior: "smooth", block: "center" }),
+                  children: data.value,
+                })}
+              />
+            </Menu.Dropdown>
+          </Menu>
+        </Box>
+        <div className="contents">
+          <section id="introduction" style={{ height: 1000 }}>
+            <Title order={2}>Introduction</Title>
+          </section>
+          <section id="features" style={{ height: 1000 }}>
+            <Title order={2}>features</Title>
+          </section>
+          <section id="conclusion" style={{ height: 1000 }}>
+            <Title order={2}>Conslusion</Title>
+          </section>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default DocumentationPage;
diff --git a/src/Pages/ExperimentsPage/ExperimentPage.css b/src/Pages/ExperimentsPage/ExperimentPage.css
new file mode 100644
index 0000000..cf10508
--- /dev/null
+++ b/src/Pages/ExperimentsPage/ExperimentPage.css
@@ -0,0 +1,16 @@
+.ExperimentPage {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.experimentButtons {
+    display: flex;
+    gap: 20px;
+    flex-direction: row;
+    justify-content: right;
+    width: fit-content;
+    margin-left: auto;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+}
diff --git a/src/Pages/ExperimentsPage/ExperimentPage.tsx b/src/Pages/ExperimentsPage/ExperimentPage.tsx
new file mode 100644
index 0000000..c395437
--- /dev/null
+++ b/src/Pages/ExperimentsPage/ExperimentPage.tsx
@@ -0,0 +1,108 @@
+import { Alert, Center, Text } from "@mantine/core";
+import "./ExperimentPage.css";
+import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
+import { NewMoleculeModal } from "Modals/NewMolecule/NewMolecule";
+import { useState } from "react";
+import { Helmet } from "react-helmet";
+import { IconPlus, IconSettings } from "@tabler/icons-react";
+import { useParams } from "react-router";
+import {
+  useExperimentStore,
+  useSelectedExperiment,
+} from "Stores/ExperimentStore";
+import CustomButton from "Components/CustomButton/CustomButton";
+function ExperimentPage() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { experiment_id } = useParams();
+  const { selectedExperimentId, selectExperiment } = useExperimentStore();
+
+  if (
+    !selectedExperimentId ||
+    (Number(experiment_id) != selectedExperimentId && experiment_id)
+  ) {
+    console.log(Number(experiment_id));
+    selectExperiment(Number(experiment_id));
+  }
+
+  const experiment = useSelectedExperiment();
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {experiment
+            ? "Experiment " + experiment.id + " | QMolSim"
+            : "Error |QmolSim"}
+        </title>
+        <meta
+          name="description"
+          content="See the documentation on how to setup and use the qunatum computational system"
+        />
+      </Helmet>
+      {experiment && (
+        <div className="ExperimentPage">
+          <NewMoleculeModal
+            isOpened={isOpen}
+            setIsOpened={(toOpen: boolean) => setIsOpen(toOpen)}
+          />
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "10px",
+              marginBottom: "15px",
+            }}
+          >
+            <div className="experimentButtons">
+              <CustomButton
+                color="contrast"
+                onClick={() => {
+                  setIsOpen(true);
+                }}
+                icon={<IconPlus />}
+                text="Добавить задачу"
+              />
+              <CustomButton
+                color="contrast"
+                style="outline"
+                onClick={() => {
+                  setIsOpen(true);
+                }}
+                icon={<IconSettings />}
+                text="Параметры эксперимента"
+              />
+            </div>
+          </div>
+          {experiment.tasks_ids.length > 0 && (
+            <PaginationContainer>
+              {experiment.tasks_ids.map((task: ExperimentTask) => {
+                return <div>{task.data.name}</div>;
+              })}
+            </PaginationContainer>
+          )}
+          {experiment.tasks_ids.length == 0 && (
+            <Alert>
+              <Center>
+                <Text size={"xl"} c="contrast">
+                  Нет задач
+                </Text>
+              </Center>
+            </Alert>
+          )}
+        </div>
+      )}
+      {!experiment && (
+        <Alert color="red">
+          <Center>
+            {" "}
+            <Text c="contrast" size={"xl"} size="md">
+              Ошибка. Эксперимент не найден
+            </Text>{" "}
+          </Center>
+        </Alert>
+      )}
+    </>
+  );
+}
+
+export default ExperimentPage;
diff --git a/src/Pages/ExperimentsPage/ExperimentsPage.css b/src/Pages/ExperimentsPage/ExperimentsPage.css
new file mode 100644
index 0000000..2c63e84
--- /dev/null
+++ b/src/Pages/ExperimentsPage/ExperimentsPage.css
@@ -0,0 +1,14 @@
+.ExperimentsPage {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.experimentsButtons {
+    display: flex;
+    gap: 20px;
+    flex-direction: row;
+    justify-content: right;
+    width: fit-content;
+    margin-left: auto;
+}
diff --git a/src/Pages/ExperimentsPage/ExperimentsPage.tsx b/src/Pages/ExperimentsPage/ExperimentsPage.tsx
new file mode 100644
index 0000000..43b6182
--- /dev/null
+++ b/src/Pages/ExperimentsPage/ExperimentsPage.tsx
@@ -0,0 +1,67 @@
+import { Helmet } from "react-helmet";
+import "./ExperimentsPage.css";
+import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
+import { useState } from "react";
+import { IconMicroscope } from "@tabler/icons-react";
+import { NewExperimentModal } from "Modals/NewExperiment/NewExperiment";
+import ExperimentsListCard from "Components/ListCard/ExperimentsListCard";
+import { useExperimentStore } from "Stores/ExperimentStore";
+import type { Experiment } from "Types/Experiment/Experiment";
+import CustomButton from "Components/CustomButton/CustomButton";
+
+function ExperimentsPage() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { experiments, teams, tasks } = useExperimentStore();
+
+  return (
+    <>
+      <Helmet>
+        <title>Experiments Page | QMolSim</title>
+        <meta
+          name="description"
+          content="See the list of all of users experiments"
+        />
+      </Helmet>
+      <NewExperimentModal isOpened={isOpen} setIsOpened={setIsOpen} />
+      <div className="ExperimentsPage">
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "10px",
+            marginBottom: "20px",
+          }}
+        >
+          <div className="experimentsButtons">
+            <CustomButton
+              color="contrast"
+              onClick={() => {
+                setIsOpen(true);
+              }}
+              icon={<IconMicroscope />}
+              text="Создать эксперимент"
+            />
+          </div>
+        </div>
+        <PaginationContainer>
+          {experiments.map((exp: Experiment) => {
+            return (
+              <ExperimentsListCard
+                id={exp.id}
+                name={exp.name}
+                description={exp.description}
+                team_id={exp.team_id}
+                tasks_ids={exp.tasks_ids}
+                date_created={exp.date_created}
+                experiment_status={exp.experiment_status}
+                experiment_type="A"
+              />
+            );
+          })}
+        </PaginationContainer>
+      </div>
+    </>
+  );
+}
+
+export default ExperimentsPage;
diff --git a/src/Pages/ExperimentsPage/MoleculePage.css b/src/Pages/ExperimentsPage/MoleculePage.css
new file mode 100755
index 0000000..766a7d0
--- /dev/null
+++ b/src/Pages/ExperimentsPage/MoleculePage.css
@@ -0,0 +1,65 @@
+.MoleculeEdit {
+    height: 100%;
+    display: flex;
+}
+.MoleculeEditWrapper {
+    display: flex !important;
+    flex: 1 !important;
+    min-width: 0;
+    min-height: 0;
+    background-color: var(--mantine-color-secondary-filled);
+}
+
+.MoleculeEditLineNumber {
+    height: 100%;
+    padding-top: calc(1px + var(--input-padding-y, 0rem));
+    padding-bottom: calc(1px + var(--input-padding-y, 0rem));
+    font-family:
+        "Fira Code", "Courier New", Courier, monospace; /* Monospace fonts */
+    font-size: 14px; /* Comfortable size */
+    line-height: 1.5; /* Spacing like an editor */
+    letter-spacing: 0; /* Keeps punctuation aligned */
+    white-space: pre-line;
+    overflow: scroll;
+    scrollbar-width: none;
+    overscroll-behavior: none;
+    cursor: default;
+}
+
+.MoleculeEditInput {
+    font-family:
+        "Fira Code", "Courier New", Courier, monospace; /* Monospace fonts */
+    font-size: 14px; /* Comfortable size */
+    line-height: 1.5; /* Spacing like an editor */
+    letter-spacing: 0; /* Keeps punctuation aligned */
+    white-space: pre; /* preserves spaces & tabs */
+    overflow-x: auto; /* horizontal scroll when needed */
+    overflow-y: auto; /* vertical scroll when needed */
+    word-wrap: normal; /* prevent wrapping */
+    overscroll-behavior: none;
+    background-color: var(--mantine-color-secondary-filled);
+}
+
+.Separator {
+    width: 10px;
+}
+
+.moleculeInput {
+    height: 250px;
+}
+
+.moleculeInputWrapper {
+    height: 100%;
+}
+
+.moleculeInputWrapper > * {
+    height: 100%;
+}
+
+.tabPanel {
+    flex: 1;
+    padding: 10px;
+    border-left: 1px solid var(--tab-border-color);
+    border-right: 1px solid var(--tab-border-color);
+    border-bottom: 1px solid var(--tab-border-color);
+}
diff --git a/src/Pages/ExperimentsPage/MoleculePage.tsx b/src/Pages/ExperimentsPage/MoleculePage.tsx
new file mode 100755
index 0000000..21925bc
--- /dev/null
+++ b/src/Pages/ExperimentsPage/MoleculePage.tsx
@@ -0,0 +1,113 @@
+import MoleculeViewer from "Components/MoleculeViewer/MoleculeViewer";
+import {
+  Button,
+  Center,
+  Divider,
+  Tabs,
+  Text,
+  useMantineTheme,
+} from "@mantine/core";
+import { Group, Panel, Separator } from "react-resizable-panels";
+import "./MoleculePage.css";
+import {
+  IconCheck,
+  IconCode,
+  IconGripVertical,
+  IconList,
+  IconX,
+} from "@tabler/icons-react";
+import { useMoleculeEditStore } from "Stores/MoleculeEditStore";
+import { CodeTextArea } from "Components/CodeTextArea/CodeTextArea";
+import { Helmet } from "react-helmet";
+
+function MoleculeEditorPage() {
+  const {
+    currentMoleculeString,
+    setCurrentMoleculeString,
+    selectedAtom,
+    setSelectedAtom,
+  } = useMoleculeEditStore();
+  const theme = useMantineTheme();
+
+  return (
+    <>
+      <Helmet>
+        <title>Molecule Page | QMolSim</title>
+        <meta
+          name="description"
+          content="Edit the atomic structure of a molecule"
+        />
+      </Helmet>
+      <div className="experimentButtons">
+        <Button color="secondary" onClick={() => {}}>
+          <IconCheck style={{ marginRight: "10px" }} />
+          <Text c="contrast">Сохранить</Text>
+        </Button>
+        <Button color="contrast" onClick={() => {}}>
+          <IconX style={{ marginRight: "10px" }} color="black" />
+          <Text c="secondary">Отменить</Text>
+        </Button>
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", height: "85vh" }}>
+        <Divider style={{ margin: "10px" }} />
+        <Group style={{ flex: 1, gap: "5px" }}>
+          <Panel minSize={200} defaultSize={500}>
+            <Tabs
+              variant="outline"
+              style={{
+                height: "100%",
+                display: "flex",
+                flexDirection: "column",
+              }}
+              radius="lg"
+              defaultValue="code"
+              classNames={{ panel: "tabPanel" }}
+            >
+              <Tabs.List>
+                <Tabs.Tab value="code" leftSection={<IconCode size={12} />}>
+                  Код
+                </Tabs.Tab>
+                <Tabs.Tab value="list" leftSection={<IconList size={12} />}>
+                  Список
+                </Tabs.Tab>
+              </Tabs.List>
+
+              <Tabs.Panel value="code">
+                <CodeTextArea
+                  text={currentMoleculeString}
+                  onTextChange={(text: string) => {
+                    setCurrentMoleculeString(text);
+                  }}
+                />
+              </Tabs.Panel>
+
+              <Tabs.Panel value="list">
+                <></>
+              </Tabs.Panel>
+            </Tabs>
+          </Panel>
+          <Separator>
+            <Center
+              style={{
+                height: "100%",
+                background: theme.colors.dark[4],
+                borderRadius: "5px",
+              }}
+            >
+              <IconGripVertical size={12} />
+            </Center>
+          </Separator>
+          <Panel style={{ flexShrink: 0 }} minSize={200}>
+            <MoleculeViewer
+              moleculeData={currentMoleculeString}
+              selectedAtom={selectedAtom}
+              setSelectedAtom={setSelectedAtom}
+            />
+          </Panel>
+        </Group>
+      </div>
+    </>
+  );
+}
+
+export default MoleculeEditorPage;
diff --git a/src/Pages/MainPage/MainPage.css b/src/Pages/MainPage/MainPage.css
new file mode 100755
index 0000000..8be59dc
--- /dev/null
+++ b/src/Pages/MainPage/MainPage.css
@@ -0,0 +1,41 @@
+.background_holder {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    z-index: 0;
+}
+
+.slogan {
+    width: 100%;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 5vh;
+    padding-bottom: 10vh;
+    z-index: 1;
+}
+.slogan > * {
+    font-family: "Quicking";
+    text-align: center;
+    color: var(--mantine-color-contrast-filled);
+    z-index: 1;
+}
+
+.tiles {
+    width: 100%;
+    align-items: stretch;
+    gap: 40px 0px;
+}
+
+#documentationButton {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10vh;
+    text-decoration: underline;
+}
diff --git a/src/Pages/MainPage/MainPage.tsx b/src/Pages/MainPage/MainPage.tsx
new file mode 100755
index 0000000..0b13f9a
--- /dev/null
+++ b/src/Pages/MainPage/MainPage.tsx
@@ -0,0 +1,63 @@
+import { Title, Button, Group } from "@mantine/core";
+import Background from "Components/StripedBg/Background";
+import "./MainPage.css";
+import { Helmet } from "react-helmet";
+import ButtonWithText from "Components/CardWithButton/CardWithButton";
+import { Link } from "react-router";
+import { routes } from "Routes/Routes";
+function MainPage() {
+  return (
+    <div>
+      <Helmet>
+        <title>Landing Page | QMolSim</title>
+        <meta
+          name="description"
+          content="Description of the main functionaity of the QMolSim service"
+        />
+      </Helmet>
+
+      <div className="background_holder">
+        <Background />
+      </div>
+
+      <div className="slogan">
+        <Title size={50} textWrap="balance">
+          Quantum Chemistry Made easy
+        </Title>
+      </div>
+
+      <Group className="tiles" justify="space-evenly">
+        <ButtonWithText
+          title="Работа с молекулами"
+          text="Вводите информацию о молекулах любым удобным способом. Визуализируйте и
+        редактируйте молекулы в простом интерфейсе."
+          buttonText="Начать Эксперимент"
+          link={routes.ExperimentsPage.path}
+        />
+        <ButtonWithText
+          title="Параллельные вычисления"
+          text="Запускайте квантовые вычисления сразу на нескольких машинах.
+            Упарвляйте и следите за машинами в одном месте."
+          buttonText="Подключить Машину"
+          link={routes.MachinesPage.path}
+        />
+        <ButtonWithText
+          title="Работа в команде"
+          text="Создавайте команы с другими людьми и настраивайте доступ ко всем
+            аспектам работы"
+          buttonText="Создать Команду"
+          link={routes.TeamsPage.path}
+        />
+      </Group>
+      <Link className="invisible_link" to={routes.DocumentationPage.path}>
+        <div id="documentationButton">
+          <Button variant="subtle" color="secondaryContrast">
+             Документация 
+          </Button>
+        </div>
+      </Link>
+    </div>
+  );
+}
+
+export default MainPage;
diff --git a/src/Pages/TeamsPage/TeamsPage.css b/src/Pages/TeamsPage/TeamsPage.css
new file mode 100644
index 0000000..6bea27a
--- /dev/null
+++ b/src/Pages/TeamsPage/TeamsPage.css
@@ -0,0 +1,4 @@
+.TeamsPage {
+    flex-grow: 1;
+    display: flex;
+}
diff --git a/src/Pages/TeamsPage/TeamsPage.tsx b/src/Pages/TeamsPage/TeamsPage.tsx
new file mode 100644
index 0000000..2f753a5
--- /dev/null
+++ b/src/Pages/TeamsPage/TeamsPage.tsx
@@ -0,0 +1,22 @@
+import { Helmet } from "react-helmet";
+import "./TeamsPage.css";
+import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
+
+function TeamsPage() {
+  return (
+    <>
+      <Helmet>
+        <title>Teams Page | QMolSim</title>
+        <meta
+          name="description"
+          content="See the documentation on how to setup and use the qunatum computational system"
+        />
+      </Helmet>
+      <div className="TeamsPage">
+        <PaginationContainer />
+      </div>
+    </>
+  );
+}
+
+export default TeamsPage;
diff --git a/src/Pages/UserPage/UserPage.css b/src/Pages/UserPage/UserPage.css
new file mode 100644
index 0000000..876d721
--- /dev/null
+++ b/src/Pages/UserPage/UserPage.css
@@ -0,0 +1,12 @@
+.tabPanel {
+    flex-grow: 1;
+    padding: 10px;
+    border-left: 1px solid var(--tab-border-color);
+    border-right: 1px solid var(--tab-border-color);
+    border-bottom: 1px solid var(--tab-border-color);
+}
+
+.userPage {
+    flex-grow: 1;
+    display: flex;
+}
diff --git a/src/Pages/UserPage/UserPage.tsx b/src/Pages/UserPage/UserPage.tsx
new file mode 100644
index 0000000..aee6641
--- /dev/null
+++ b/src/Pages/UserPage/UserPage.tsx
@@ -0,0 +1,166 @@
+import {
+  Button,
+  Title,
+  Tabs,
+  TextInput,
+  SimpleGrid,
+  Chip,
+  Text,
+  Divider,
+  Switch,
+} from "@mantine/core";
+import {
+  IconChartCandle,
+  IconCheck,
+  IconUserFilled,
+  IconCancel,
+  IconSun,
+  IconMoonStars,
+} from "@tabler/icons-react";
+import keycloak from "Api/Keycloak/Keycloak";
+import { useEffect } from "react";
+import { Helmet } from "react-helmet";
+import { AuthenticationStore } from "Stores/AuthenticationStore";
+import "./UserPage.css";
+import { useUserPreferencesStore } from "Stores/PreferencesStore";
+import CustomButton from "Components/CustomButton/CustomButton";
+function UserPage() {
+  const { profile, token } = AuthenticationStore();
+  const { theme, set_theme } = useUserPreferencesStore();
+
+  useEffect(() => {
+    console.log(token);
+  }, []);
+  return (
+    <>
+      <Helmet>
+        <title>User Page | QMolSim</title>
+        <meta
+          name="description"
+          content="See the documentation on how to setup and use the qunatum computational system"
+        />
+      </Helmet>
+      <div className="userPage">
+        <Tabs
+          variant="outline"
+          style={{
+            display: "flex",
+            flexGrow: 1,
+            flexDirection: "column",
+          }}
+          radius="lg"
+          defaultValue="profile"
+          classNames={{ panel: "tabPanel" }}
+        >
+          <Tabs.List>
+            <Tabs.Tab
+              value="profile"
+              leftSection={<IconUserFilled size={20} />}
+            >
+              Профиль
+            </Tabs.Tab>
+            <Tabs.Tab
+              value="preference"
+              leftSection={<IconChartCandle size={20} />}
+            >
+              Предпочтения
+            </Tabs.Tab>
+          </Tabs.List>
+
+          <Tabs.Panel value="profile">
+            <SimpleGrid verticalSpacing="lg" cols={2}>
+              <Title size="lg">Имя пользователя:</Title>
+              <TextInput size="md" value={profile?.username} />
+              <Title size="lg">Почта:</Title>
+              <TextInput size="md" value={profile?.email} />
+              <CustomButton color="accent" text="Сохранить" />
+              <CustomButton color="error" text="Отменить" />
+            </SimpleGrid>
+            <Divider my="lg" />
+            <SimpleGrid verticalSpacing={"lg"} cols={2}>
+              <Title
+                size="lg"
+                style={{ display: "flex", alignItems: "center" }}
+              >
+                Почта верифицирована:{" "}
+                <Chip mx="lg" size="auto" checked={profile?.emailVerified}>
+                  {profile?.emailVerified ? (
+                    <div
+                      style={{
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                      }}
+                    >
+                      <IconCheck
+                        size={25}
+                        color={"green"}
+                        style={{ verticalAlign: "center", margin: "5px" }}
+                      />
+                    </div>
+                  ) : (
+                    <div
+                      style={{
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                      }}
+                    >
+                      <IconCancel
+                        size={25}
+                        color="red"
+                        style={{
+                          verticalAlign: "center",
+                          margin: "5px",
+                        }}
+                      />
+                    </div>
+                  )}
+                </Chip>
+              </Title>
+              {!profile?.emailVerified && (
+                <CustomButton
+                  style="outline"
+                  color="contrast"
+                  text="Подтвердить почту"
+                />
+              )}
+              {profile?.emailVerified && <div></div>}
+              <Title size="lg">Пароль:</Title>
+              <CustomButton
+                style="outline"
+                color="contrast"
+                text="Изменить пароль"
+              />
+            </SimpleGrid>
+          </Tabs.Panel>
+
+          <Tabs.Panel value="preference">
+            <Switch
+              size="xl"
+              onChange={(event) =>
+                set_theme(!event.currentTarget.checked ? "dark" : "light")
+              }
+              onLabel={
+                <IconSun
+                  size={16}
+                  stroke={2.5}
+                  color="var(--mantine-color-yellow-4)"
+                />
+              }
+              offLabel={
+                <IconMoonStars
+                  size={16}
+                  stroke={2.5}
+                  color="var(--mantine-color-blue-6)"
+                />
+              }
+            />
+          </Tabs.Panel>
+        </Tabs>
+      </div>
+    </>
+  );
+}
+
+export default UserPage;
diff --git a/src/Routes/Breadcrumbs/Breadcrumbs.css b/src/Routes/Breadcrumbs/Breadcrumbs.css
new file mode 100755
index 0000000..dcf61cc
--- /dev/null
+++ b/src/Routes/Breadcrumbs/Breadcrumbs.css
@@ -0,0 +1,10 @@
+.mantine-Breadcrumbs-root {
+    height: fit-content;
+    z-index: 5;
+    color: var(--mantine-color-secondaryContrast-filled) !important;
+}
+
+.highlighted_breadcrumb {
+    color: var(--mantine-color-contrast-filled);
+    text-decoration: underline;
+}
diff --git a/src/Routes/Breadcrumbs/Breadcrumbs.tsx b/src/Routes/Breadcrumbs/Breadcrumbs.tsx
new file mode 100755
index 0000000..97d6845
--- /dev/null
+++ b/src/Routes/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,104 @@
+import { Breadcrumbs } from "@mantine/core";
+import { type ReactElement } from "react";
+import { Link, type UIMatch } from "react-router";
+import "./Breadcrumbs.css";
+import { routes } from "Routes/Routes";
+import { useLocation } from "react-router";
+
+function getSubPaths(path: string) {
+  const parts = path.split("/").filter(Boolean);
+  const result = ["/"];
+
+  let current = "";
+  for (const part of parts) {
+    current += "/" + part;
+    result.push(current);
+  }
+
+  return result;
+}
+
+function testEqual(path: string, pattern: string) {
+  const patternParts = pattern.split("/").filter(Boolean);
+  const pathParts = path.split("/").filter(Boolean);
+
+  // Length must match
+  if (patternParts.length !== pathParts.length) {
+    return false;
+  }
+
+  for (let i = 0; i < patternParts.length; i++) {
+    const patternPart = patternParts[i];
+    const pathPart = pathParts[i];
+
+    // If pattern starts with ":" it's a variable → always matches
+    if (patternPart.startsWith(":")) {
+      continue;
+    }
+
+    // Otherwise must match exactly
+    if (patternPart !== pathPart) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function BreadCrumbs() {
+  const unique_matches: string[] = getSubPaths(useLocation().pathname);
+
+  console.log(unique_matches);
+  //find the breadcrumbs for the matched pathes
+  const elements: ReactElement[] = [];
+  for (const prop in routes) {
+    for (const u_match in unique_matches) {
+      if (testEqual(unique_matches[u_match], routes[prop].path)) {
+        console.log(unique_matches[u_match], routes[prop].path);
+        for (const i in routes[prop].breadcrumbs(unique_matches[u_match])) {
+          if (elements.length + 1 != unique_matches.length) {
+            elements.push(
+              <Link
+                className="invisible_link"
+                to={unique_matches[u_match]}
+                key={unique_matches[u_match]}
+              >
+                {routes[prop].breadcrumbs(unique_matches[u_match])[i]}
+              </Link>,
+            );
+          } else {
+            elements.push(
+              <div
+                className="highlighted_breadcrumb"
+                key={unique_matches[u_match]}
+              >
+                {routes[prop].breadcrumbs(unique_matches[u_match])[i]}
+              </div>,
+            );
+          }
+        }
+        //last breadcrumb
+      }
+    }
+  }
+
+  //wrong count of breadcrumbs found, meaning error
+  if (elements.length != unique_matches.length) {
+    elements.push(
+      <div className="highlighted_breadcrumb" key={routes.ErrorPage.path}>
+        {routes.ErrorPage.breadcrumbs("")}
+      </div>,
+    );
+  }
+
+  const isGood = elements.length > 1;
+
+  return (
+    <Breadcrumbs separator="/" mb="xs">
+      {isGood && elements}
+      {!isGood && <p></p>}
+    </Breadcrumbs>
+  );
+}
+
+export default BreadCrumbs;
diff --git a/src/Routes/ErrorPage.tsx b/src/Routes/ErrorPage.tsx
new file mode 100755
index 0000000..2187166
--- /dev/null
+++ b/src/Routes/ErrorPage.tsx
@@ -0,0 +1,17 @@
+import { Alert } from "@mantine/core";
+import { IconExclamationCircle } from "@tabler/icons-react";
+
+function ErrorPage() {
+  return (
+    <Alert
+      variant="filled"
+      color="red"
+      title="Page not found"
+      icon={<IconExclamationCircle />}
+    >
+      The page you are trying to access does not exist or has been moved.
+    </Alert>
+  );
+}
+
+export default ErrorPage;
diff --git a/src/Routes/RouterAuhGuard.tsx b/src/Routes/RouterAuhGuard.tsx
new file mode 100644
index 0000000..664937c
--- /dev/null
+++ b/src/Routes/RouterAuhGuard.tsx
@@ -0,0 +1,23 @@
+import keycloak from "Api/Keycloak/Keycloak";
+import { useEffect, useRef } from "react";
+import { Outlet } from "react-router";
+
+export default function AuthGuard() {
+  const loginStarted = useRef(false);
+
+  useEffect(() => {
+    if (!keycloak.authenticated && !loginStarted.current) {
+      loginStarted.current = true;
+
+      keycloak.login({
+        redirectUri: window.location.href,
+      });
+    }
+  }, []);
+
+  if (!keycloak.authenticated) {
+    return <div>Redirecting to login...</div>;
+  }
+
+  return <Outlet />;
+}
diff --git a/src/Routes/Routes.tsx b/src/Routes/Routes.tsx
new file mode 100755
index 0000000..1ff4f0d
--- /dev/null
+++ b/src/Routes/Routes.tsx
@@ -0,0 +1,99 @@
+import { createBrowserRouter } from "react-router";
+import MainPage from "Pages/MainPage/MainPage";
+import { baseUrl } from "../GlobalVars";
+import App from "../App";
+import ErrorPage from "./ErrorPage";
+import DocumentationPage from "Pages/DocumentationPage/DocumentationPage";
+import { IconHome } from "@tabler/icons-react";
+import type { ReactElement } from "react";
+import MoleculeEditorPage from "Pages/ExperimentsPage/MoleculePage";
+import TeamsPage from "Pages/TeamsPage/TeamsPage";
+import UserPage from "Pages/UserPage/UserPage";
+import ExperimentPage from "Pages/ExperimentsPage/ExperimentPage";
+import ExperimentsPage from "Pages/ExperimentsPage/ExperimentsPage";
+import AuthGuard from "./RouterAuhGuard";
+
+export const routes: {
+  [id: string]: { path: string; breadcrumbs: (path: string) => ReactElement[] };
+} = {
+  MainPage: { path: "/", breadcrumbs: () => [<IconHome />] },
+  DocumentationPage: {
+    path: "/documentation",
+    breadcrumbs: () => [<>Документация</>],
+  },
+  ExperimentsPage: {
+    path: "/experiments",
+    breadcrumbs: () => [<>Эксперименты</>],
+  },
+  ExperimentPage: {
+    path: "/experiments/:experiment_id",
+    breadcrumbs: (path: string) => [
+      <>Эксперимент #{path.split("/")[path.split("/").length - 1]}</>,
+    ],
+  },
+  MoleculePage: {
+    path: "/experiments/:experiment_id/:molecule_id",
+    breadcrumbs: (path: string) => [
+      <>Молекула #{path.split("/")[path.split("/").length - 1]}</>,
+    ],
+  },
+  MachinesPage: {
+    path: "/machines",
+    breadcrumbs: () => [<>Вычислительные системы</>],
+  },
+  TeamsPage: { path: "/teams", breadcrumbs: () => [<>Команды</>] },
+  ErrorPage: { path: "/*", breadcrumbs: () => [<>Ошибка</>] },
+  SettingsPage: { path: "/settings", breadcrumbs: () => [<>Настройки</>] },
+};
+
+const router = createBrowserRouter(
+  [
+    {
+      path: "/",
+      element: <App />,
+      children: [
+        {
+          path: routes.MainPage.path,
+          Component: MainPage,
+        },
+        {
+          path: routes.DocumentationPage.path,
+          Component: DocumentationPage,
+        },
+        {
+          path: routes.SettingsPage.path,
+          Component: UserPage,
+        },
+
+        {
+          element: <AuthGuard />, // 🔒 everything below requires auth
+          children: [
+            {
+              path: routes.ExperimentsPage.path,
+              Component: ExperimentsPage,
+            },
+            {
+              path: routes.ExperimentPage.path,
+              Component: ExperimentPage,
+            },
+            {
+              path: routes.MoleculePage.path,
+              Component: MoleculeEditorPage,
+            },
+            {
+              path: routes.TeamsPage.path,
+              Component: TeamsPage,
+            },
+          ],
+        },
+
+        {
+          path: routes.ErrorPage.path,
+          Component: ErrorPage,
+        },
+      ],
+    },
+  ],
+  { basename: baseUrl },
+);
+export default router;
diff --git a/src/Stores/AuthenticationStore.tsx b/src/Stores/AuthenticationStore.tsx
new file mode 100644
index 0000000..c81a3a4
--- /dev/null
+++ b/src/Stores/AuthenticationStore.tsx
@@ -0,0 +1,19 @@
+import type { KeycloakProfile } from "keycloak-js";
+import { create } from "zustand";
+
+interface AuthernticationStoreState {
+  token: string | undefined;
+  profile: KeycloakProfile | null;
+  set_profile: (profile: KeycloakProfile | null) => void;
+  set_token: (token: string | undefined) => void;
+}
+
+export const AuthenticationStore = create<AuthernticationStoreState>()(
+  (set) => ({
+    token: undefined,
+    profile: null,
+    set_profile: (profile: KeycloakProfile | null) =>
+      set(() => ({ profile: profile })),
+    set_token: (token: string | undefined) => set(() => ({ token: token })),
+  }),
+);
diff --git a/src/Stores/ExperimentStore.tsx b/src/Stores/ExperimentStore.tsx
new file mode 100644
index 0000000..d8628df
--- /dev/null
+++ b/src/Stores/ExperimentStore.tsx
@@ -0,0 +1,138 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+import type { Experiment, TaskData } from "Types/Experiment/Experiment";
+import type { Team } from "Types/User/User";
+
+interface ExperimentStoreState {
+  experiments: Experiment[];
+  tasks: TaskData[];
+  teams: Team[];
+
+  selectedExperimentId?: number;
+  selectedTaskId?: number;
+  selectedTeamId?: number;
+
+  selectExperiment: (id: number | undefined) => void;
+  selectTask: (id: number | undefined) => void;
+
+  addExperiment: (experiment: Experiment) => void;
+  updateExperiment: (id: number, data: Partial<Experiment>) => void;
+  removeExperiment: (id: number) => void;
+
+  addTask: (experimentId: number, task: TaskData) => void;
+  updateTask: (taskId: number, data: Partial<TaskData>) => void;
+  removeTask: (experimentId: number, taskId: number) => void;
+
+  addTeam: (team: Team) => void;
+  updateTeam: (teamId: number, data: Partial<TaskData>) => void;
+  removeTeam: (teamId: number) => void;
+}
+
+export const useExperimentStore = create<ExperimentStoreState>()(
+  immer((set) => ({
+    experiments: [],
+    tasks: [],
+    teams: [],
+
+    selectedExperimentId: undefined,
+    selectedTaskId: undefined,
+    selectedTeamId: undefined,
+
+    selectExperiment: (id) =>
+      set((state) => {
+        state.selectedExperimentId = id;
+      }),
+
+    selectTask: (id) =>
+      set((state) => {
+        state.selectedTaskId = id;
+      }),
+
+    addExperiment: (experiment) =>
+      set((state) => {
+        state.experiments.push(experiment);
+      }),
+
+    updateExperiment: (id, data) =>
+      set((state) => {
+        const exp = state.experiments.find((e) => e.id === id);
+        if (!exp) return;
+
+        Object.assign(exp, data);
+      }),
+
+    removeExperiment: (id) =>
+      set((state) => {
+        state.experiments = state.experiments.filter((e) => e.id !== id);
+
+        if (state.selectedExperimentId === id) {
+          state.selectedExperimentId = undefined;
+          state.selectedTaskId = undefined;
+        }
+      }),
+
+    addTask: (experimentId, task) =>
+      set((state) => {
+        const exp = state.experiments.find((e) => e.id === experimentId);
+        if (!exp) return;
+
+        exp.tasks_ids.push(task.id);
+        state.tasks.push(task);
+      }),
+
+    updateTask: (taskId, data) =>
+      set((state) => {
+        const task = state.tasks.find((t) => t.id === taskId);
+        if (!task) return;
+
+        Object.assign(task, data);
+      }),
+
+    removeTask: (experimentId, taskId) =>
+      set((state) => {
+        const exp = state.experiments.find((e) => e.id === experimentId);
+        if (!exp) return;
+
+        state.tasks = state.tasks.filter((t) => t.data.id !== taskId);
+        exp.tasks_ids = exp.tasks_ids.filter((t) => t !== taskId);
+
+        if (state.selectedTaskId === taskId) {
+          state.selectedTaskId = undefined;
+        }
+      }),
+
+    addTeam: (team) =>
+      set((state) => {
+        state.teams.push(team);
+      }),
+    updateTeam: (teamID, data) =>
+      set((state) => {
+        const team = state.teams.find((t) => t.id === teamID);
+        if (!team) return;
+
+        Object.assign(team, data);
+      }),
+    removeTeam: (teamID) =>
+      set((state) => {
+        state.teams = state.teams.filter((t) => t.id !== teamID);
+        state.experiments = state.experiments.filter(
+          (t) => t.team_id !== teamID,
+        );
+
+        if (state.selectedTeamId === teamID) {
+          state.selectedTeamId = undefined;
+        }
+      }),
+  })),
+);
+
+export const useSelectedExperiment = () =>
+  useExperimentStore((s) =>
+    s.experiments.find((e) => e.id === s.selectedExperimentId),
+  );
+
+export const useSelectedTask = () =>
+  useExperimentStore((s) => {
+    return s.tasks.find((t) => t.id === s.selectedTaskId);
+  });
diff --git a/src/Stores/LayoutStore.tsx b/src/Stores/LayoutStore.tsx
new file mode 100755
index 0000000..26aa126
--- /dev/null
+++ b/src/Stores/LayoutStore.tsx
@@ -0,0 +1,12 @@
+import { create } from "zustand";
+
+interface LayoutStore {
+  is_navbar_open: boolean;
+  set_navbar_open: (is_dark: boolean) => void;
+}
+
+export const useLayoutStore = create<LayoutStore>()((set) => ({
+  is_navbar_open: false,
+  set_navbar_open: (is_navbar_open) =>
+    set(() => ({ is_navbar_open: is_navbar_open })),
+}));
diff --git a/src/Stores/MoleculeEditStore.tsx b/src/Stores/MoleculeEditStore.tsx
new file mode 100755
index 0000000..a2c0302
--- /dev/null
+++ b/src/Stores/MoleculeEditStore.tsx
@@ -0,0 +1,17 @@
+import type { SelectedAtom } from "Types/Experiment/MoleculeEdit/MoleculeEdit";
+import { create } from "zustand";
+
+interface MoleculeEditState {
+  currentMoleculeString: string;
+  setCurrentMoleculeString: (setCurrentMoleculeString: string) => void;
+  selectedAtom: SelectedAtom | null;
+  setSelectedAtom: (selectedAtom: SelectedAtom | null) => void;
+}
+
+export const useMoleculeEditStore = create<MoleculeEditState>()((set) => ({
+  currentMoleculeString: "",
+  setCurrentMoleculeString: (molString) =>
+    set(() => ({ currentMoleculeString: molString })),
+  selectedAtom: null,
+  setSelectedAtom: (atom) => set(() => ({ selectedAtom: atom })),
+}));
diff --git a/src/Stores/PreferencesStore.tsx b/src/Stores/PreferencesStore.tsx
new file mode 100755
index 0000000..ad82248
--- /dev/null
+++ b/src/Stores/PreferencesStore.tsx
@@ -0,0 +1,17 @@
+import { create } from "zustand";
+
+interface UserPreferencesState {
+  show_hints: boolean;
+  set_show_hints: (is_dark: boolean) => void;
+  theme: "light" | "dark";
+  set_theme: (theme: "light" | "dark") => void;
+}
+
+export const useUserPreferencesStore = create<UserPreferencesState>()(
+  (set) => ({
+    show_hints: true,
+    set_show_hints: (show_hints) => set(() => ({ show_hints: show_hints })),
+    theme: "dark",
+    set_theme: (theme) => set(() => ({ theme: theme })),
+  }),
+);
diff --git a/src/Types/ApiCalls/ConvertBackendCallsTypes.tsx b/src/Types/ApiCalls/ConvertBackendCallsTypes.tsx
new file mode 100755
index 0000000..98697df
--- /dev/null
+++ b/src/Types/ApiCalls/ConvertBackendCallsTypes.tsx
@@ -0,0 +1,7 @@
+export interface ConvertSchema {
+  inputText: string;
+  inputFormat: string;
+  add_h: boolean;
+  make_3d: boolean;
+  optimize: boolean;
+}
diff --git a/src/Types/Experiment/Experiment.tsx b/src/Types/Experiment/Experiment.tsx
new file mode 100755
index 0000000..0581dd6
--- /dev/null
+++ b/src/Types/Experiment/Experiment.tsx
@@ -0,0 +1,41 @@
+//export interface Experiment {}
+
+import type { Team } from "Types/User/User";
+
+export type ExperimentStatus =
+  | "DRAFT"
+  | "QUEUE"
+  | "PROCESSING"
+  | "SUCCESS"
+  | "ERROR";
+
+export interface Experiment {
+  id: number;
+  name: string;
+  description: string;
+  team_id: number;
+  date_created: Date;
+  experiment_status: ExperimentStatus;
+  experiment_type: string;
+  tasks_ids: number[];
+}
+
+export interface TaskTypePlugin<TData = any> {
+  type: string;
+  // how it appears in the experiment task list
+  ListItem: React.ComponentType<TaskData<TData>>;
+  // full editor UI when clicking task
+  Editor: React.ComponentType<TaskEditorProps<TData>>;
+}
+
+export interface TaskData<TData = any> {
+  id: number;
+  name: string;
+  description: string;
+  data: TData;
+}
+
+export interface TaskEditorProps<TData = any> {
+  data: TData;
+  setData: (data: TData) => void;
+}
diff --git a/src/Types/Experiment/MoleculeEdit/MoleculeEdit.tsx b/src/Types/Experiment/MoleculeEdit/MoleculeEdit.tsx
new file mode 100755
index 0000000..cab4f73
--- /dev/null
+++ b/src/Types/Experiment/MoleculeEdit/MoleculeEdit.tsx
@@ -0,0 +1,5 @@
+export interface SelectedAtom {
+  serial: number;
+  name: string;
+  position: { x: number; y: number; z: number };
+}
diff --git a/src/Types/User/User.tsx b/src/Types/User/User.tsx
new file mode 100644
index 0000000..9137ff5
--- /dev/null
+++ b/src/Types/User/User.tsx
@@ -0,0 +1,20 @@
+export interface Team {
+  id: number;
+  name: string;
+  description: string;
+  creation_date: Date;
+  creator: TeamMember;
+  team_members: TeamMember[];
+}
+
+export interface TeamMember {
+  username: string;
+  email: string;
+  permissions: Permission[];
+  date_accepted: Date;
+}
+
+export interface Permission {
+  id: number;
+  name: string;
+}
diff --git a/src/index.css b/src/index.css
new file mode 100755
index 0000000..6d03b98
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,29 @@
+:root {
+    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+@font-face {
+    font-family: "Quicking"; /* Define a name for your font */
+    src: url("/Quicking.otf") format("opentype"); /* Specify the font file and format */
+    font-weight: normal; /* Optional: Define the weight of this font variant */
+    font-style: normal; /* Optional: Define the style of this font variant */
+}
+
+:root {
+    --mantine-color-body: var(--mantine-color-primary-filled) !important;
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100755
index 0000000..249d635
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,97 @@
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import "@mantine/core/styles.css";
+import { RouterProvider } from "react-router";
+import router from "Routes/Routes.tsx";
+import {
+  colorsTuple,
+  createTheme,
+  localStorageColorSchemeManager,
+  MantineProvider,
+  virtualColor,
+} from "@mantine/core";
+import keycloak from "Api/Keycloak/Keycloak";
+import { AuthenticationStore } from "Stores/AuthenticationStore";
+import { useUserPreferencesStore } from "Stores/PreferencesStore";
+
+const colorSchemeManager = localStorageColorSchemeManager({
+  key: "my-app-color-scheme",
+});
+
+const checkIsDarkSchemePreferred = () =>
+  window?.matchMedia?.("(prefers-color-scheme:dark)")?.matches ?? false;
+
+const theme = createTheme({
+  colors: {
+    primaryDark: colorsTuple("#212529"),
+    primaryLight: colorsTuple("#f1f3f5"),
+    secondaryDark: colorsTuple("#484d53"),
+    secondaryLight: colorsTuple("#b9bec4"),
+    contrastDark: colorsTuple("#f1f3f5"),
+    contrastLight: colorsTuple("#212529"),
+    secondaryContrastDark: colorsTuple("#b9bec4"),
+    secondaryContrastLight: colorsTuple("#484d53"),
+    primary: virtualColor({
+      name: "primary",
+      dark: "primaryDark",
+      light: "primaryLight",
+    }),
+    secondary: virtualColor({
+      name: "secondary",
+      dark: "secondaryDark",
+      light: "secondaryLight",
+    }),
+    contrast: virtualColor({
+      name: "contrast",
+      dark: "contrastDark",
+      light: "contrastLight",
+    }),
+    secondaryContrast: virtualColor({
+      name: "secondaryContrast",
+      dark: "secondaryContrastDark",
+      light: "secondaryContrastLight",
+    }),
+    accent: virtualColor({
+      name: "accent",
+      dark: "blue",
+      light: "blue",
+    }),
+  },
+});
+
+async function bootstrap() {
+  const authenticated = await keycloak.init({
+    onLoad: "check-sso",
+    pkceMethod: "S256",
+    silentCheckSsoRedirectUri:
+      "http://localhost:8001/quantum/silent-check-sso.html",
+  });
+
+  if (authenticated) {
+    const profile = await keycloak.loadUserProfile();
+
+    AuthenticationStore.setState({ token: keycloak.token, profile: profile });
+  }
+
+  useUserPreferencesStore.setState({
+    theme: checkIsDarkSchemePreferred() ? "dark" : "light",
+  });
+
+  createRoot(document.getElementById("root")!).render(<AppProviders />);
+}
+
+function AppProviders() {
+  const themePreference = useUserPreferencesStore((state) => state.theme);
+
+  return (
+    <MantineProvider
+      colorSchemeManager={colorSchemeManager}
+      forceColorScheme={themePreference}
+      theme={theme}
+    >
+      <RouterProvider router={router} />
+    </MantineProvider>
+  );
+}
+
+bootstrap();
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100755
index 0000000..7d0ff9e
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100755
index 0000000..e62bc50
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100755
index 0000000..460f5e0
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100755
index 0000000..d295d99
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100755
index 0000000..c8998d3
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { baseDomain, basePort, baseUrl } from "./src/GlobalVars";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+  server: {
+    host: baseDomain,
+    port: basePort,
+  },
+  base: baseUrl,
+});