diff --git a/trackAndTrace/frontend/global.d.ts b/trackAndTrace/frontend/global.d.ts
index a33ff82d..d4c48bb7 100644
--- a/trackAndTrace/frontend/global.d.ts
+++ b/trackAndTrace/frontend/global.d.ts
@@ -18,7 +18,7 @@ declare namespace NodeJS {
 /**
  * The configuration built into the application when served from the backend API
  */
-type Config = {
+interface Config {
     /** The URL of the node. Must have grpc-web enabled. */
     node: string;
     /** The contract address of the track and trace instance used. */
@@ -27,7 +27,7 @@ type Config = {
     network: TargetNetwork;
     /** The URL of the sponsored transaction backend API. */
     sponsoredTransactionBackend: string;
-};
+}
 
 /** The configuration built into the application when served from the backend API */
 declare const CONFIG: Config;
diff --git a/trackAndTrace/frontend/package.json b/trackAndTrace/frontend/package.json
index d7ff66be..9af229dc 100644
--- a/trackAndTrace/frontend/package.json
+++ b/trackAndTrace/frontend/package.json
@@ -6,7 +6,7 @@
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",
-        "lint": "eslint",
+        "lint": "eslint . --cache --max-warnings 0 --ext .ts,.tsx",
         "lint-fix": "yarn lint --fix",
         "fmt-check": "prettier --check .",
         "fmt": "prettier --write .",
diff --git a/trackAndTrace/frontend/src/App.tsx b/trackAndTrace/frontend/src/App.tsx
new file mode 100644
index 00000000..cda30f79
--- /dev/null
+++ b/trackAndTrace/frontend/src/App.tsx
@@ -0,0 +1,124 @@
+import { useEffect } from 'react';
+import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+import { Button } from 'react-bootstrap';
+
+import { WalletConnectionProps, useConnection, useConnect } from '@concordium/react-components';
+
+import './styles.scss';
+import { AdminCreateItem } from './components/AdminCreateItem';
+import { AdminChangeRoles } from './components/AdminChangeRoles';
+import { ChangeItemStatus } from './components/ChangeItemStatus';
+import { Explorer } from './components/Explorer';
+import { AddTransitionRule } from './components/AddTransitionRule';
+import * as constants from './constants';
+import { version } from '../package.json';
+
+export const App = (props: WalletConnectionProps) => {
+    const { setActiveConnectorType, activeConnectorError, activeConnector, connectedAccounts, genesisHashes } = props;
+
+    const { connection, setConnection, account } = useConnection(connectedAccounts, genesisHashes);
+    const { connect } = useConnect(activeConnector, setConnection);
+
+    useEffect(() => {
+        setActiveConnectorType(constants.BROWSER_WALLET);
+    }, [setActiveConnectorType]);
+
+    return (
+        <Router>
+            <div className="navbar">
+                <div>
+                    Track And Trace:{' '}
+                    <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={`https://github.com/Concordium/concordium-dapp-examples/tree/main/trackAndTrace`}
+                    >
+                        Version {version}
+                    </a>
+                    <br />
+                    Contract:{' '}
+                    <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={`https://${constants.NETWORK.name}.ccdscan.io/?dcount=1&dentity=contract&dcontractAddressIndex=${constants.CONTRACT_ADDRESS.index}&dcontractAddressSubIndex=${constants.CONTRACT_ADDRESS.subindex}`}
+                    >
+                        &lt;{Number(constants.CONTRACT_ADDRESS.index)},{Number(constants.CONTRACT_ADDRESS.subindex)}
+                        &gt;
+                    </a>
+                </div>
+                <Link className="secondary" to="/explorer">
+                    Explorer
+                </Link>
+                <Link className="secondary" to="/changeItemStatus">
+                    Admin1
+                </Link>
+                <Link className="secondary" to="/adminCreateItem">
+                    Admin2
+                </Link>
+                <Link className="secondary" to="/adminChangeRoles">
+                    Admin3
+                </Link>
+                <Link className="secondary" to="/addTransitionRule">
+                    Admin4
+                </Link>
+                <Button
+                    variant="primary"
+                    id="account"
+                    disabled={activeConnector && !account ? false : true}
+                    onClick={connect}
+                >
+                    {account
+                        ? account.slice(0, 5) + '...' + account.slice(-5)
+                        : activeConnector
+                          ? 'Connect Wallet'
+                          : 'Loading...'}
+                </Button>
+            </div>
+
+            <Routes>
+                <Route path="/explorer" element={<Explorer />} />
+                <Route
+                    path="/adminCreateItem"
+                    element={
+                        <AdminCreateItem
+                            activeConnectorError={activeConnectorError}
+                            connection={connection}
+                            accountAddress={account}
+                        />
+                    }
+                />
+                <Route
+                    path="/adminChangeRoles"
+                    element={
+                        <AdminChangeRoles
+                            activeConnectorError={activeConnectorError}
+                            connection={connection}
+                            accountAddress={account}
+                        />
+                    }
+                />
+                <Route
+                    path="/changeItemStatus"
+                    element={
+                        <ChangeItemStatus
+                            activeConnectorError={activeConnectorError}
+                            connection={connection}
+                            accountAddress={account}
+                        />
+                    }
+                />
+                <Route
+                    path="/addTransitionRule"
+                    element={
+                        <AddTransitionRule
+                            activeConnectorError={activeConnectorError}
+                            connection={connection}
+                            accountAddress={account}
+                        />
+                    }
+                />
+                <Route path="/" element={<div></div>} />
+            </Routes>
+        </Router>
+    );
+};
diff --git a/trackAndTrace/frontend/src/components/AddTransitionRule.tsx b/trackAndTrace/frontend/src/components/AddTransitionRule.tsx
index 9c8e372e..ec987291 100644
--- a/trackAndTrace/frontend/src/components/AddTransitionRule.tsx
+++ b/trackAndTrace/frontend/src/components/AddTransitionRule.tsx
@@ -28,12 +28,12 @@ const STATE_OPTIONS = [
 export function AddTransitionRule(props: Props) {
     const { connection, accountAddress, activeConnectorError } = props;
 
-    type FormType = {
+    interface FormType {
         address: string | undefined;
         fromStatus: 'Produced' | 'InTransit' | 'InStore' | 'Sold' | undefined;
         toStatus: 'Produced' | 'InTransit' | 'InStore' | 'Sold' | undefined;
         isUpdateAdd: boolean;
-    };
+    }
     const { control, register, formState, handleSubmit } = useForm<FormType>({ mode: 'all' });
 
     const [isUpdateAdd, fromStatus, toStatus, address] = useWatch({
diff --git a/trackAndTrace/frontend/src/components/AdminChangeRoles.tsx b/trackAndTrace/frontend/src/components/AdminChangeRoles.tsx
index 3d19ec78..74d3b5a4 100644
--- a/trackAndTrace/frontend/src/components/AdminChangeRoles.tsx
+++ b/trackAndTrace/frontend/src/components/AdminChangeRoles.tsx
@@ -20,10 +20,10 @@ interface Props {
 export function AdminChangeRoles(props: Props) {
     const { connection, accountAddress, activeConnectorError } = props;
 
-    type FormType = {
+    interface FormType {
         address: string | undefined;
         addAdmin: boolean;
-    };
+    }
     const { control, register, formState, handleSubmit } = useForm<FormType>({ mode: 'all' });
 
     const [addAdmin, address] = useWatch({
diff --git a/trackAndTrace/frontend/src/components/AdminCreateItem.tsx b/trackAndTrace/frontend/src/components/AdminCreateItem.tsx
index cc5fbcf5..e5ba61a9 100644
--- a/trackAndTrace/frontend/src/components/AdminCreateItem.tsx
+++ b/trackAndTrace/frontend/src/components/AdminCreateItem.tsx
@@ -23,16 +23,16 @@ interface Props {
     activeConnectorError: string | undefined;
 }
 
-type PartialItemCreatedEvent = {
+interface PartialItemCreatedEvent {
     item_id: number | bigint;
-};
+}
 
 export function AdminCreateItem(props: Props) {
     const { connection, accountAddress, activeConnectorError } = props;
 
-    type FormType = {
+    interface FormType {
         url: string | undefined;
-    };
+    }
     const { control, register, formState, handleSubmit } = useForm<FormType>({ mode: 'all' });
 
     const [url] = useWatch({
diff --git a/trackAndTrace/frontend/src/components/ChangeItemStatus.tsx b/trackAndTrace/frontend/src/components/ChangeItemStatus.tsx
index ae59da4e..792acd7e 100644
--- a/trackAndTrace/frontend/src/components/ChangeItemStatus.tsx
+++ b/trackAndTrace/frontend/src/components/ChangeItemStatus.tsx
@@ -27,7 +27,7 @@ const NEW_STATUS_OPTIONS = [
     { label: 'Sold', value: 'Sold' },
 ];
 
-async function generateMessage(
+function generateMessage(
     newStatus: 'Produced' | 'InTransit' | 'InStore' | 'Sold' | undefined,
     itemID: bigint,
     expiryTimeSignature: Date,
@@ -70,10 +70,10 @@ async function generateMessage(
 export function ChangeItemStatus(props: Props) {
     const { connection, accountAddress, activeConnectorError } = props;
 
-    type FormType = {
+    interface FormType {
         itemID: bigint | undefined;
         newStatus: 'Produced' | 'InTransit' | 'InStore' | 'Sold' | undefined;
-    };
+    }
     const { control, register, formState, handleSubmit } = useForm<FormType>({ mode: 'all' });
 
     const [newStatus, itemID] = useWatch({
@@ -134,12 +134,7 @@ export function ChangeItemStatus(props: Props) {
 
         if (connection && accountAddress) {
             try {
-                const [payload, serializedMessage] = await generateMessage(
-                    newStatus,
-                    itemID,
-                    expiryTimeSignature,
-                    nextNonce,
-                );
+                const [payload, serializedMessage] = generateMessage(newStatus, itemID, expiryTimeSignature, nextNonce);
 
                 const permitSignature = await connection.signMessage(accountAddress, {
                     type: 'BinaryMessage',
diff --git a/trackAndTrace/frontend/src/components/Explorer.tsx b/trackAndTrace/frontend/src/components/Explorer.tsx
index 72dd43a3..bac3a870 100644
--- a/trackAndTrace/frontend/src/components/Explorer.tsx
+++ b/trackAndTrace/frontend/src/components/Explorer.tsx
@@ -3,20 +3,20 @@ import { Alert, Button, Form } from 'react-bootstrap';
 import { useForm, useWatch } from 'react-hook-form';
 import * as constants from '../constants';
 
-type ChangeItem = {
+interface ChangeItem {
     block_time: string;
     transaction_hash: string;
     new_status: string;
-    additional_data: { bytes: Array<number> };
+    additional_data: { bytes: number[] };
     event_index: number;
     item_id: number;
-};
+}
 
-type CreateItem = {
+interface CreateItem {
     block_time: string;
     transaction_hash: string;
     event_index: number;
-};
+}
 
 /**
  * This function gets the historical ItemStatusChangedEvents for a given itemID.
@@ -29,7 +29,7 @@ async function getItemStatusChangedEvents(itemID: number, setItemChanged: Dispat
     const response = await fetch(`api/getItemStatusChangedEvents`, {
         method: 'POST',
         headers: new Headers({ 'content-type': 'application/json' }),
-        body:    JSON.stringify({
+        body: JSON.stringify({
             item_id: Number(itemID),
             limit: 30,
             offset: 0,
@@ -79,9 +79,9 @@ async function getItemCreatedEvent(itemID: number, setItemCreated: Dispatch<Crea
 }
 
 export function Explorer() {
-    type FormType = {
+    interface FormType {
         itemID: number | undefined;
-    };
+    }
     const { control, register, formState, handleSubmit } = useForm<FormType>({ mode: 'all' });
 
     const [itemID] = useWatch({
diff --git a/trackAndTrace/frontend/src/main.tsx b/trackAndTrace/frontend/src/main.tsx
index 102708a6..06df7e9c 100644
--- a/trackAndTrace/frontend/src/main.tsx
+++ b/trackAndTrace/frontend/src/main.tsx
@@ -1,128 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
-import { Button } from 'react-bootstrap';
 
-import { WithWalletConnector, WalletConnectionProps, useConnection, useConnect } from '@concordium/react-components';
+import { WithWalletConnector } from '@concordium/react-components';
 
 import './styles.scss';
-import { AdminCreateItem } from './components/AdminCreateItem';
-import { AdminChangeRoles } from './components/AdminChangeRoles';
-import { ChangeItemStatus } from './components/ChangeItemStatus';
-import { Explorer } from './components/Explorer';
-import { AddTransitionRule } from './components/AddTransitionRule';
 import * as constants from './constants';
-import { version } from '../package.json';
-
-const App = (props: WalletConnectionProps) => {
-    const { setActiveConnectorType, activeConnectorError, activeConnector, connectedAccounts, genesisHashes } = props;
-
-    const { connection, setConnection, account } = useConnection(connectedAccounts, genesisHashes);
-    const { connect } = useConnect(activeConnector, setConnection);
-
-    useEffect(() => {
-        setActiveConnectorType(constants.BROWSER_WALLET);
-    }, [setActiveConnectorType]);
-
-    return (
-        <Router>
-            <div className="navbar">
-                <div>
-                    Track And Trace:{' '}
-                    <a
-                        target="_blank"
-                        rel="noreferrer"
-                        href={`https://github.com/Concordium/concordium-dapp-examples/tree/main/trackAndTrace`}
-                    >
-                        Version {version}
-                    </a>
-                    <br />
-                    Contract:{' '}
-                    <a
-                        target="_blank"
-                        rel="noreferrer"
-                        href={`https://${constants.NETWORK.name}.ccdscan.io/?dcount=1&dentity=contract&dcontractAddressIndex=${constants.CONTRACT_ADDRESS.index}&dcontractAddressSubIndex=${constants.CONTRACT_ADDRESS.subindex}`}
-                    >
-                        &lt;{Number(constants.CONTRACT_ADDRESS.index)},{Number(constants.CONTRACT_ADDRESS.subindex)}
-                        &gt;
-                    </a>
-                </div>
-                <Link className="secondary" to="/explorer">
-                    Explorer
-                </Link>
-                <Link className="secondary" to="/changeItemStatus">
-                    Admin1
-                </Link>
-                <Link className="secondary" to="/adminCreateItem">
-                    Admin2
-                </Link>
-                <Link className="secondary" to="/adminChangeRoles">
-                    Admin3
-                </Link>
-                <Link className="secondary" to="/addTransitionRule">
-                    Admin4
-                </Link>
-                <Button
-                    variant="primary"
-                    id="account"
-                    disabled={activeConnector && !account ? false : true}
-                    onClick={connect}
-                >
-                    {account
-                        ? account.slice(0, 5) + '...' + account.slice(-5)
-                        : activeConnector
-                          ? 'Connect Wallet'
-                          : 'Loading...'}
-                </Button>
-            </div>
-
-            <Routes>
-                <Route path="/explorer" element={<Explorer />} />
-                <Route
-                    path="/adminCreateItem"
-                    element={
-                        <AdminCreateItem
-                            activeConnectorError={activeConnectorError}
-                            connection={connection}
-                            accountAddress={account}
-                        />
-                    }
-                />
-                <Route
-                    path="/adminChangeRoles"
-                    element={
-                        <AdminChangeRoles
-                            activeConnectorError={activeConnectorError}
-                            connection={connection}
-                            accountAddress={account}
-                        />
-                    }
-                />
-                <Route
-                    path="/changeItemStatus"
-                    element={
-                        <ChangeItemStatus
-                            activeConnectorError={activeConnectorError}
-                            connection={connection}
-                            accountAddress={account}
-                        />
-                    }
-                />
-                <Route
-                    path="/addTransitionRule"
-                    element={
-                        <AddTransitionRule
-                            activeConnectorError={activeConnectorError}
-                            connection={connection}
-                            accountAddress={account}
-                        />
-                    }
-                />
-                <Route path="/" element={<div></div>} />
-            </Routes>
-        </Router>
-    );
-};
+import { App } from './App';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
diff --git a/trackAndTrace/frontend/src/track_and_trace_contract.tsx b/trackAndTrace/frontend/src/track_and_trace_contract.tsx
index 2be7e332..f2ab6127 100644
--- a/trackAndTrace/frontend/src/track_and_trace_contract.tsx
+++ b/trackAndTrace/frontend/src/track_and_trace_contract.tsx
@@ -143,7 +143,7 @@ export async function updateStateMachine(
     accountAddress: AccountAddress.Type,
     updateStateMachineParameter: TrackAndTraceContract.UpdateStateMachineParameter
 ): Promise<string> {
-    let contractInvokeMetadata: ContractInvokeMetadata = {
+    const contractInvokeMetadata: ContractInvokeMetadata = {
         invoker: accountAddress,
     };
 
@@ -177,7 +177,7 @@ export async function updateStateMachine(
         maxContractExecutionEnergy,
     };
 
-    let webWalletParameter =
+    const webWalletParameter =
         TrackAndTraceContract.createUpdateStateMachineParameterWebWallet(updateStateMachineParameter);
 
     return connection.signAndSendTransaction(