diff --git a/web-interface/.cta.json b/web-interface/.cta.json
new file mode 100644
index 0000000..38d1229
--- /dev/null
+++ b/web-interface/.cta.json
@@ -0,0 +1,15 @@
+{
+ "projectName": "web-interface",
+ "mode": "file-router",
+ "typescript": true,
+ "packageManager": "bun",
+ "includeExamples": false,
+ "tailwind": true,
+ "addOnOptions": {},
+ "envVarValues": {},
+ "git": false,
+ "routerOnly": true,
+ "version": 1,
+ "framework": "react",
+ "chosenAddOns": ["eslint"]
+}
diff --git a/web-interface/.gitignore b/web-interface/.gitignore
new file mode 100644
index 0000000..8b25bb5
--- /dev/null
+++ b/web-interface/.gitignore
@@ -0,0 +1,13 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.env
+.nitro
+.tanstack
+.wrangler
+.output
+.vinxi
+__unconfig*
+todos.json
diff --git a/web-interface/.prettierignore b/web-interface/.prettierignore
new file mode 100644
index 0000000..5322d7f
--- /dev/null
+++ b/web-interface/.prettierignore
@@ -0,0 +1,3 @@
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
\ No newline at end of file
diff --git a/web-interface/.vscode/settings.json b/web-interface/.vscode/settings.json
new file mode 100644
index 0000000..00b5278
--- /dev/null
+++ b/web-interface/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+ "files.watcherExclude": {
+ "**/routeTree.gen.ts": true
+ },
+ "search.exclude": {
+ "**/routeTree.gen.ts": true
+ },
+ "files.readonlyInclude": {
+ "**/routeTree.gen.ts": true
+ }
+}
diff --git a/web-interface/README.md b/web-interface/README.md
new file mode 100644
index 0000000..9a60c82
--- /dev/null
+++ b/web-interface/README.md
@@ -0,0 +1,201 @@
+Welcome to your new TanStack Start app!
+
+# Getting Started
+
+To run this application:
+
+```bash
+bun install
+bun --bun run dev
+```
+
+# Building For Production
+
+To build this application for production:
+
+```bash
+bun --bun run build
+```
+
+## Testing
+
+This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
+
+```bash
+bun --bun run test
+```
+
+## Styling
+
+This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
+
+### Removing Tailwind CSS
+
+If you prefer not to use Tailwind CSS:
+
+1. Remove the demo pages in `src/routes/demo/`
+2. Replace the Tailwind import in `src/styles.css` with your own styles
+3. Remove `tailwindcss()` from the plugins array in `vite.config.ts`
+4. Uninstall the packages: `bun install @tailwindcss/vite tailwindcss -D`
+
+## Linting & Formatting
+
+This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
+
+```bash
+bun --bun run lint
+bun --bun run format
+bun --bun run check
+```
+
+## Routing
+
+This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.
+
+### Adding A Route
+
+To add a new route to your application just add a new file in the `./src/routes` directory.
+
+TanStack will automatically generate the content of the route file for you.
+
+Now that you have two routes you can use a `Link` component to navigate between them.
+
+### Adding Links
+
+To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
+
+```tsx
+import { Link } from '@tanstack/react-router'
+```
+
+Then anywhere in your JSX you can use it like so:
+
+```tsx
+About
+```
+
+This will create a link that will navigate to the `/about` route.
+
+More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
+
+### Using A Layout
+
+In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you render `{children}` in the `shellComponent`.
+
+Here is an example layout that includes a header:
+
+```tsx
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+ head: () => ({
+ meta: [
+ { charSet: 'utf-8' },
+ { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+ { title: 'My App' },
+ ],
+ }),
+ shellComponent: ({ children }) => (
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+ ),
+})
+```
+
+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
+
+## Server Functions
+
+TanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components.
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+
+const getServerTime = createServerFn({
+ method: 'GET',
+}).handler(async () => {
+ return new Date().toISOString()
+})
+
+// Use in a component
+function MyComponent() {
+ const [time, setTime] = useState('')
+
+ useEffect(() => {
+ getServerTime().then(setTime)
+ }, [])
+
+ return
Server time: {time}
+}
+```
+
+## API Routes
+
+You can create API routes by using the `server` property in your route definitions:
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { json } from '@tanstack/react-start'
+
+export const Route = createFileRoute('/api/hello')({
+ server: {
+ handlers: {
+ GET: () => json({ message: 'Hello, World!' }),
+ },
+ },
+})
+```
+
+## Data Fetching
+
+There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
+
+For example:
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/people')({
+ loader: async () => {
+ const response = await fetch('https://swapi.dev/api/people')
+ return response.json()
+ },
+ component: PeopleComponent,
+})
+
+function PeopleComponent() {
+ const data = Route.useLoaderData()
+ return (
+