Initial commit

.gitignore

@@ -0,0 +1,2 @@
+nim-codex/
+nim-codex-updated/

Dockerfile.api

@@ -0,0 +1,9 @@
+FROM python:3.9
+WORKDIR /api
+
+COPY api/requirements.txt api/api.py ./
+RUN pip install -r ./requirements.txt
+ENV FLASK_ENV production
+
+EXPOSE 5000
+CMD ["gunicorn", "-b", ":5000", "api:app"]

Dockerfile.client

@@ -0,0 +1,14 @@
+# Build step #1: build the React front end
+FROM node:18 as build-step
+WORKDIR /frontend
+ENV PATH /frontend/node_modules/.bin:$PATH
+COPY frontend/package.json frontend/yarn.lock frontend/tsconfig.json frontend/webpack.config.js ./
+COPY frontend/src ./src
+COPY frontend/public ./public
+RUN yarn install
+RUN yarn build --production
+
+# Build step #2: build an nginx container
+FROM nginx:stable-alpine
+COPY --from=build-step /frontend/build /usr/share/nginx/html
+COPY deployment/nginx.default.conf /etc/nginx/conf.d/default.conf

README.md

@@ -0,0 +1,39 @@
+# Codex Frontend
+
+A frontend for codex made with Flutter.
+
+## Features
+
+- Upload file
+- View file Uploaded
+- Download file
+- Download with correct file name and extension
+- Persist the state (save recent upload list)
+- Upload multiple files at once
+
+## Planned Features
+
+- Upload to codex nodes
+- Settings for the connection
+- Dockerize frontend
+- Add support for marketplace endpoints
+- Show status of locally running codex node
+- Show status of connection to codex peers
+
+## How To Run It
+
+```console
+git clone https://github.com/Kayvon-Martinez/codex-frontend
+cd codex-frontend
+docker build -f Dockerfile.api -t codex-frontend-api .
+docker build -f Dockerfile.client -t codex-frontend-client .
+docker compose up
+```
+
+Go to [localhost:3000](http://localhost:3000)
+
+## Screenshots
+
+![Data page: Upload](https://github.com/Kayvon-Martinez/codex-frontend/blob/master/screenshots/upload-page.png)
+![Data page: Upload (with uploads)](https://github.com/Kayvon-Martinez/codex-frontend/blob/master/screenshots/upload-page-uploads.png)
+![Data page: Download](https://github.com/Kayvon-Martinez/codex-frontend/blob/master/screenshots/download-page.png)

api/.gitignore

@@ -0,0 +1,160 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/

api/api.py

@@ -0,0 +1,38 @@
+from flask import Flask, request, jsonify
+from flask_cors import CORS
+import requests
+
+app = Flask(__name__)
+CORS(app)
+
+
+@app.route('/')
+def root():
+    return jsonify({'message': 'Welcome to the API!'})
+
+
+@app.route('/upload', methods=['POST'])
+def upload():
+    print(request.headers.get('Content-Type'))
+    if request.headers.get('Content-Type') == 'application/octet-stream':
+        bytes = request.data
+        base_url = request.headers.get('Base-Url')
+        auth_string = request.headers.get('Auth-String')
+        # print(request.data)
+        response = requests.post(
+            f'{base_url}/api/codex/v1/upload',
+            data=bytes,
+            headers={
+                'Content-Type': 'application/octet-stream'
+            },
+            auth=(auth_string.split(':')[0], auth_string.split(':')[1])
+        )
+        print(response.status_code)
+        print(response.text)
+        return jsonify({'cid': response.text.strip()})
+    else:
+        return jsonify({'message': 'Error!'})
+
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=5000)

api/requirements.txt

@@ -0,0 +1,4 @@
+requests
+flask
+gunicorn
+flask-cors

deployment/nginx.default.conf

@@ -0,0 +1,22 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    root   /usr/share/nginx/html;
+    index index.html;
+    error_page   500 502 503 504  /50x.html;
+
+    location / {
+        try_files $uri /index.html;
+        add_header Cache-Control "no-cache";
+    }
+
+    location /static {
+        expires 1y;
+        add_header Cache-Control "public";
+    }
+
+    location /uploads {
+        proxy_pass http://localhost:5000;
+    }
+}

docker-compose.yml

@@ -0,0 +1,14 @@
+services:
+  api:
+    build:
+      context: .
+      dockerfile: Dockerfile.api
+    image: codex-frontend-api
+    network_mode: "host"
+  client:
+    build:
+      context: .
+      dockerfile: Dockerfile.client
+    image: codex-frontend-client
+    ports:
+      - "3000:80"

frontend/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

frontend/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@mui/joy": "^5.0.0-beta.9",
+    "@mui/material": "^5.14.12",
+    "@mui/styled-engine-sc": "^5.14.12",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/file-saver": "^2.0.6",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.58",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.11",
+    "axios": "^1.5.1",
+    "form-data": "^4.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-icons": "^4.11.0",
+    "react-router-dom": "^6.16.0",
+    "react-scripts": "5.0.1",
+    "styled-components": "^6.0.8",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4",
+    "zustand": "^4.4.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "resolutions": {
+    "styled-components": "^5"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  }
+}

frontend/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

frontend/src/App.tsx

@@ -0,0 +1,77 @@
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import NavigationRail from "./components/layout/partials/NavigationRail";
+import styled from "styled-components";
+import DataPage from "./pages/data/DataPage";
+import DebugPage from "./pages/debug/DebugPage";
+import SettingsPage from "./pages/settings/SettingsPage";
+
+function PlacehoderPage(props: { name: string }) {
+  return (
+    <PlacehoderPageWrapper>
+      <p
+        style={{
+          color: "#fff",
+        }}
+      >
+        {props.name}
+      </p>
+    </PlacehoderPageWrapper>
+  );
+}
+
+export default function App() {
+  return (
+    <Router>
+      <AppWrapper>
+        <NavigationRail />
+
+        <Routes>
+          <Route path="/" element={<SettingsPage />} />
+          <Route
+            path="/marketplace"
+            element={PlacehoderPage({ name: "Marketplace" })}
+          />
+          <Route path="/data" element={<DataPage />} />
+          <Route path="/node" element={PlacehoderPage({ name: "Node" })} />
+          <Route path="/debug" element={DebugPage()} />
+        </Routes>
+
+        <header id="header-mobile">
+          <h1>Dexy</h1>
+        </header>
+      </AppWrapper>
+    </Router>
+  );
+}
+
+const PlacehoderPageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const AppWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+
+  #header-mobile {
+    display: none;
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: column-reverse;
+
+    #header-mobile {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      height: 75px;
+      width: 100%;
+      background-color: #141414;
+      padding: 16px;
+    }
+  }
+`;

frontend/src/components/layout/dropDownList/DropDownList.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { MdExpandMore, MdExpandLess } from "react-icons/md";
+
+function DropDownList(props: { title: string; children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <DropDownListWrapper>
+      <div id="title">
+        <h3>{props.title}</h3>
+
+        {(open && (
+          <MdExpandLess size={28} onClick={() => setOpen(!open)} />
+        )) || <MdExpandMore size={28} onClick={() => setOpen(!open)} />}
+      </div>
+      <div
+        id="items"
+        style={{
+          display: open ? "flex" : "none",
+        }}
+      >
+        {open && props.children}
+      </div>
+    </DropDownListWrapper>
+  );
+}
+
+export default DropDownList;
+
+const DropDownListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  #title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  #items {
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+  }
+
+  #items > * {
+    border: 2px dashed #9e9e9e;
+    border-radius: 8px;
+  }
+`;

frontend/src/components/layout/partials/Header.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "styled-components";
+
+function Header(props: { title: string }) {
+  return (
+    <HeaderWrapper>
+      <h1>{props.title}</h1>
+    </HeaderWrapper>
+  );
+}
+
+export default Header;
+
+const HeaderWrapper = styled.header`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 75px;
+  width: 100%;
+  background-color: #141414;
+  padding: 16px;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;

frontend/src/components/layout/partials/NavigationItem.tsx

@@ -0,0 +1,49 @@
+import { IconType } from "react-icons";
+import { Link, useLocation } from "react-router-dom";
+import styled from "styled-components";
+
+function NavigationItem(props: { name: string; icon: IconType; link: string }) {
+  let activeNow = useLocation().pathname === props.link;
+
+  return (
+    <Link
+      to={props.link}
+      state={{
+        activeNow: window.location.pathname === props.link,
+      }}
+    >
+      <NavigationItemWrapper>
+        <props.icon size={24} color={activeNow ? "#6f11db" : "#9e9e9e"} />
+        <span
+          style={{
+            color: activeNow ? "#6f11db" : "#9e9e9e",
+          }}
+        >
+          {props.name}
+        </span>
+      </NavigationItemWrapper>
+    </Link>
+  );
+}
+
+export default NavigationItem;
+
+const NavigationItemWrapper = styled.li`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+
+  svg {
+    margin-bottom: 5px;
+  }
+
+  span {
+    font-size: 0.8rem;
+    text-align: center;
+  }
+`;

frontend/src/components/layout/partials/NavigationRail.tsx

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+import NavigationItem from "./NavigationItem";
+
+import {
+  MdOutlineSettings,
+  MdStore,
+  MdDataUsage,
+  MdDeviceHub,
+  MdBugReport,
+} from "react-icons/md";
+
+function NavigationRail() {
+  return (
+    <NavigationRailWrapper>
+      <h1>Dexy</h1>
+      <ul>
+        <NavigationItem name="Settings" icon={MdOutlineSettings} link="/" />
+        <NavigationItem name="Marketplace" icon={MdStore} link="/marketplace" />
+        <NavigationItem name="Data" icon={MdDataUsage} link="/data" />
+        <NavigationItem name="Node" icon={MdDeviceHub} link="/node" />
+        <NavigationItem name="Debug" icon={MdBugReport} link="/debug" />
+      </ul>
+    </NavigationRailWrapper>
+  );
+}
+
+export default NavigationRail;
+
+const NavigationRailWrapper = styled.nav`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 100vh;
+  width: 100px;
+  background-color: #141414;
+  padding: 16px;
+  z-index: 1;
+
+  ul {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    height: 100%;
+  }
+
+  a:link {
+    text-decoration: none;
+  }
+
+  a:visited {
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  a:active {
+    text-decoration: none;
+  }
+
+  a {
+    color: #fefefe;
+    font-size: 0.8rem;
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: row;
+    height: 80px;
+    width: 100%;
+    padding: 0;
+
+    ul {
+      flex-direction: row;
+    }
+
+    h1 {
+      display: none;
+    }
+  }
+`;

frontend/src/components/layout/tabBarView/TabBarView.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { IconType } from "react-icons";
+import styled from "styled-components";
+
+function TabBarView(props: {
+  tabIcons: IconType[];
+  children: React.ReactNode[];
+}) {
+  const [activeTab, setActiveTab] = React.useState(0);
+
+  return (
+    <TabBarViewWrapper>
+      <div id="tab-wrapper">
+        {props.tabIcons.map((icon, index) => (
+          <button
+            style={{
+              color: activeTab === index ? "#6f11db" : "#9e9e9e",
+              borderBottom: activeTab === index ? "2px solid #6f11db" : "none",
+            }}
+            onClick={() => setActiveTab(index)}
+            key={index}
+          >
+            {icon({ size: 24 })}
+          </button>
+        ))}
+      </div>
+      <div id="tab-view">{props.children[activeTab]}</div>
+    </TabBarViewWrapper>
+  );
+}
+
+export default TabBarView;
+
+const TabBarViewWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+
+  #tab-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+    list-style: none;
+    padding: 0;
+    margin-bottom: 10px;
+    width: 100%;
+  }
+
+  #tab-wrapper button {
+    flex: 1;
+    background-color: #141414;
+    color: #9e9e9e;
+    border: none;
+    padding: 24px;
+    cursor: pointer;
+    font-size: 1rem;
+  }
+
+  #tab-view {
+    height: 100%;
+    width: 100%;
+  }
+
+  @media (min-width: 768px) {
+    height: 100vh - 300px !important;
+  }
+`;

frontend/src/components/nodeInfoItem/NodeInfoItemComponent.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import styled from "styled-components";
+import { DebugNodeInfoModel } from "../../data/models/DebugNodeInfoModel";
+import DropDownList from "../layout/dropDownList/DropDownList";
+
+function NodeInfoItemComponent(props: {
+  data: DebugNodeInfoModel | undefined;
+}) {
+  return (
+    (props.data && (
+      <NodeInfoItemComponentWrapper>
+        <div id="info-row">
+          <p>
+            <span>Adresses: </span>
+            {props.data.addrs.join(", ")}
+          </p>
+          <p>
+            <span>Codex Version: </span>
+            {`${props.data.codex.version} (${props.data.codex.revision})`}
+          </p>
+        </div>
+        <div id="info-row">
+          <p>
+            <span>ID: </span>
+            {props.data.id}
+          </p>
+          <p>
+            <span>Repo: </span>
+            {props.data.repo}
+          </p>
+        </div>
+        <div id="info-row">
+          <p>
+            <span>SPR: </span>
+            {props.data.spr}
+          </p>
+        </div>
+        <div>
+          <h3>Local Node</h3>
+          <div id="info-row">
+            <p>
+              <span>Address: </span>
+              {props.data.table.localNode.address}
+            </p>
+            <p>
+              <span>Node ID: </span>
+              {props.data.table.localNode.nodeId}
+            </p>
+          </div>
+          <div id="info-row">
+            <p>
+              <span>Peer ID: </span>
+              {props.data.table.localNode.peerId}
+            </p>
+            <p>
+              <span>Seen: </span>
+              {`${props.data.table.localNode.seen
+                .toString()[0]
+                .toUpperCase()}${props.data.table.localNode.seen
+                .toString()
+                .slice(1)}`}
+            </p>
+          </div>
+        </div>
+        <DropDownList title="Nodes">
+          {props.data.table.nodes.map((node, index) => (
+            <div key={index}>
+              <h3>Node {index + 1}</h3>
+              <div id="info-row">
+                <p>
+                  <span>Address: </span>
+                  {node.address}
+                </p>
+                <p>
+                  <span>Node ID: </span>
+                  {node.nodeId}
+                </p>
+              </div>
+              <div id="info-row">
+                <p>
+                  <span>Peer ID: </span>
+                  {node.peerId}
+                </p>
+                <p>
+                  <span>Seen: </span>
+                  {`${node.seen.toString()[0].toUpperCase()}${node.seen
+                    .toString()
+                    .slice(1)}`}
+                </p>
+              </div>
+            </div>
+          ))}
+        </DropDownList>
+        <DropDownList title="Record">
+          <div id="info-row">
+            <p>
+              <span>Record: </span>
+              {props.data.table.localNode.record}
+            </p>
+          </div>
+        </DropDownList>
+      </NodeInfoItemComponentWrapper>
+    )) || <></>
+  );
+}
+
+export default NodeInfoItemComponent;
+
+const NodeInfoItemComponentWrapper = styled.div`
+  background-color: #1e1e1e;
+  border-radius: 8px;
+  padding: 10px;
+  width: 100%;
+
+  #info-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 8px;
+    margin: 5px;
+  }
+
+  h3 {
+    padding: 8px;
+    margin: 5px;
+    font-style: italic;
+  }
+
+  div p:nth-child(1) {
+    text-align: start;
+  }
+
+  div p:nth-child(2) {
+    text-align: end;
+  }
+
+  p {
+    flex: 1;
+    font-size: 1rem;
+    text-align: start;
+    word-break: break-all;
+  }
+
+  p span {
+    font-weight: bold;
+  }
+
+  #cid {
+    flex: 2;
+  }
+`;

frontend/src/components/uploadedItem/UploadedItemComponent.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import styled from "styled-components";
+
+import { CircularProgress } from "@mui/material";
+import { MdCheck, MdError } from "react-icons/md";
+import UploadedItemModel, {
+  UploadedItemStatus,
+} from "../../data/models/UploadedItemModel";
+import constants from "../../util/Constants";
+
+function UploadedItemComponent(props: { item: UploadedItemModel }) {
+  return (
+    <UploadedItemComponentWrapper>
+      <div>
+        <p>
+          <span>Name: </span>
+          {props.item.fileName}
+        </p>
+        <p>
+          <span>File size (bytes): </span>
+          {props.item.fileSize}
+        </p>
+      </div>
+      <div>
+        <p>
+          <span>Last Modified: </span>
+          {props.item.lastModified}
+        </p>
+        <p>
+          <span>Type: </span>
+          {props.item.type}
+        </p>
+      </div>
+      <div>
+        <p id="cid">
+          <span>CID: </span>
+          {(props.item.status === UploadedItemStatus.UPLOADING &&
+            "Uploading...") ||
+            (props.item.status === UploadedItemStatus.FAILED && (
+              <span style={{ color: constants.errorColor }}>Upload failed</span>
+            )) || (
+              <span
+                style={{
+                  color: constants.successColor,
+                  wordBreak: "break-all",
+                }}
+              >
+                {props.item.cid}
+              </span>
+            )}
+        </p>
+        <p>{props.item.status}</p>
+        {(props.item.status === UploadedItemStatus.UPLOADING && (
+          <CircularProgress size={24} />
+        )) ||
+          (props.item.status === UploadedItemStatus.UPLOADED && <MdCheck />) ||
+          (props.item.status === UploadedItemStatus.FAILED && <MdError />)}
+      </div>
+    </UploadedItemComponentWrapper>
+  );
+}
+
+export default UploadedItemComponent;
+
+const UploadedItemComponentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: ${constants.surfaceColor};
+  border-radius: 8px;
+  padding: 10px;
+  width: 80%;
+  margin-top: 20px;
+
+  div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin: 5px;
+  }
+
+  div p:nth-child(1) {
+    text-align: start;
+  }
+
+  div p:nth-child(2) {
+    text-align: end;
+  }
+
+  p {
+    flex: 1;
+    font-size: 1rem;
+    text-align: start;
+    margin: 5px;
+  }
+
+  p span {
+    font-weight: bold;
+  }
+
+  #cid {
+    flex: 2;
+  }
+
+  @media (max-width: 1180px) {
+    width: 85%;
+  }
+
+  @media (max-width: 768px) {
+    width: 90%;
+  }
+
+  @media (max-width: 450px) {
+    width: 95%;
+  }
+`;

frontend/src/data/models/DebugNodeInfoModel.ts

@@ -0,0 +1,37 @@
+export interface DebugNodeInfoModel {
+  id: string;
+  addrs: string[];
+  repo: string;
+  spr: string;
+  table: Table;
+  codex: Codex;
+}
+
+export interface Codex {
+  version: string;
+  revision: string;
+}
+
+export interface Table {
+  localNode: Node;
+  nodes: Node[];
+}
+
+export interface Node {
+  nodeId: string;
+  peerId: string;
+  record: string;
+  address: string;
+  seen: string;
+}
+
+// Converts JSON strings to/from your types
+export class Convert {
+  public static toDebugNodeInfoModel(json: string): DebugNodeInfoModel {
+    return JSON.parse(json);
+  }
+
+  public static debugNodeInfoModelToJson(value: DebugNodeInfoModel): string {
+    return JSON.stringify(value);
+  }
+}

frontend/src/data/models/UploadedItemModel.ts

@@ -0,0 +1,17 @@
+enum UploadedItemStatus {
+  UPLOADING = "UPLOADING",
+  UPLOADED = "UPLOADED",
+  FAILED = "FAILED",
+}
+
+type UploadedItemModel = {
+  cid: string;
+  fileName: string;
+  fileSize: number;
+  lastModified: string;
+  type: string;
+  status: UploadedItemStatus;
+};
+
+export default UploadedItemModel;
+export { UploadedItemStatus };

frontend/src/index.css

@@ -0,0 +1,35 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: black;
+  color: #fefefe;
+  height: 100vh;
+  width: 100%;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+#root > div > div {
+  height: 100%;
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  #root > div > div {
+    height: calc(100vh - 155px);
+    overflow-y: scroll;
+  }
+}

frontend/src/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

frontend/src/pages/data/DataPage.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import TabBarView from "../../components/layout/tabBarView/TabBarView";
+import styled from "styled-components";
+
+import { MdFileUpload, MdFileDownload } from "react-icons/md";
+import UploadTab from "./tabs/upload/UploadTab";
+import DownloadTab from "./tabs/download/DownloadTab";
+
+function DataPage() {
+  return (
+    <div>
+      <TabBarView tabIcons={[MdFileUpload, MdFileDownload]}>
+        <UploadTab />
+        <TabBarViewPage>
+          <DownloadTab />
+        </TabBarViewPage>
+      </TabBarView>
+    </div>
+  );
+}
+
+export default DataPage;
+
+const TabBarViewPage = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+`;

frontend/src/pages/data/tabs/download/DownloadTab.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import constants from "../../../../util/Constants";
+import styled from "styled-components";
+import { useDexyStore } from "../../../../store";
+
+function DownloadTab() {
+  const { ftdCid, setFtdCid, nodeInfo } = useDexyStore();
+
+  const [filename, setFilename] = useState("file");
+
+  function download(cid: string) {
+    console.log(filename);
+    console.log(cid);
+    fetch(
+      `${
+        nodeInfo.nodeToConnectTo || nodeInfo.baseUrl
+      }/api/codex/v1/download/${cid}`,
+      {
+        headers:
+          (nodeInfo.auth && {
+            Authorization:
+              (nodeInfo.auth && "Basic " + btoa(nodeInfo.auth)) || "",
+          }) ||
+          {},
+      }
+    )
+      .then((response) => response.blob())
+      .then((blob) => {
+        const url = window.URL.createObjectURL(new Blob([blob]));
+        const link = document.createElement("a");
+        link.href = url;
+        link.setAttribute("download", filename);
+        document.body.appendChild(link);
+        link.click();
+        link.parentNode?.removeChild(link);
+      });
+  }
+
+  return (
+    <DownloadTabWrapper>
+      <input
+        type="text"
+        placeholder="CID"
+        onChange={(e) => {
+          setFtdCid(e.target.value);
+        }}
+        value={ftdCid}
+      />
+      <div id="divider"></div>
+      <input
+        type="text"
+        placeholder="Filename"
+        onChange={(e) => setFilename(e.target.value)}
+      />
+      <button onClick={() => download(ftdCid)}>Download</button>
+    </DownloadTabWrapper>
+  );
+}
+
+export default DownloadTab;
+
+const DownloadTabWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 75%;
+
+  input {
+    flex: 3;
+    height: 60px;
+    padding: 10px 20px;
+    border: none;
+    background-color: ${constants.surfaceColor};
+    color: ${constants.onSurfaceColor};
+    width: 100%;
+  }
+
+  input:focus {
+    outline: none;
+    border: 2px solid ${constants.primaryColor};
+  }
+
+  input:nth-child(1) {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+
+  #divider {
+    width: 2.5px;
+    height: 60px;
+    background-color: #555555;
+  }
+
+  button {
+    flex: 2;
+    height: 60px;
+    border: none;
+    background-color: ${constants.primaryColor};
+    color: ${constants.onPrimaryColor};
+    font-size: 1rem;
+    cursor: pointer;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+    width: 100%;
+  }
+
+  @media (max-width: 1180px) {
+    width: 80%;
+  }
+
+  @media (max-width: 768px) {
+    width: 85%;
+  }
+
+  @media (max-width: 450px) {
+    width: 90%;
+  }
+`;

frontend/src/pages/data/tabs/upload/UploadTab.tsx

@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useDropzone } from "react-dropzone";
+import styled from "styled-components";
+import UploadedItemModel, {
+  UploadedItemStatus,
+} from "../../../../data/models/UploadedItemModel";
+import UploadedItemComponent from "../../../../components/uploadedItem/UploadedItemComponent";
+import axios from "axios";
+
+import { useDexyStore } from "../../../../store";
+import constants from "../../../../util/Constants";
+
+function UploadTab() {
+  const { uploads, setUploads, nodeInfo } = useDexyStore();
+  var filesCopy = useRef<UploadedItemModel[]>(uploads);
+
+  useEffect(() => {
+    console.log(uploads);
+    // setUploads([]);
+  }, [uploads]);
+
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
+      console.log(acceptedFiles);
+      for (let i = 0; i < acceptedFiles.length; i++) {
+        new Promise(async (resolve, reject) => {
+          let cid: string = (Math.random() * 1000000).toString();
+          console.log(cid + acceptedFiles[i].name);
+          filesCopy.current.push({
+            cid: cid,
+            fileName: acceptedFiles[i].name,
+            fileSize: acceptedFiles[i].size,
+            lastModified: new Date(
+              acceptedFiles[i].lastModified
+            ).toLocaleString(),
+            type: acceptedFiles[i].type,
+            status: UploadedItemStatus.UPLOADING,
+          });
+          setUploads(filesCopy.current);
+
+          var bytes = await acceptedFiles[i].arrayBuffer();
+          bytes = new Uint8Array(bytes);
+
+          var newCid = "";
+          try {
+            await axios
+              .post(`${constants.testApiBaseUrl}/upload`, bytes, {
+                headers: (nodeInfo.auth && {
+                  "Base-Url": nodeInfo.nodeToConnectTo || nodeInfo.baseUrl,
+                  "Content-Type": "application/octet-stream",
+                  "Auth-String": nodeInfo.auth,
+                }) || {
+                  "Base-Url": nodeInfo.nodeToConnectTo || nodeInfo.baseUrl,
+                  "Content-Type": "application/octet-stream",
+                },
+              })
+              .then((response) => {
+                console.log(response.data);
+                newCid = response.data.cid;
+              });
+            console.log(newCid);
+
+            filesCopy.current = filesCopy.current.filter(
+              (file) => file.cid !== cid
+            );
+            filesCopy.current.push({
+              cid: newCid,
+              fileName: acceptedFiles[i].name,
+              fileSize: acceptedFiles[i].size,
+              lastModified: new Date(
+                acceptedFiles[i].lastModified
+              ).toLocaleString(),
+              type: acceptedFiles[i].type,
+              status: UploadedItemStatus.UPLOADED,
+            });
+            setUploads(filesCopy.current);
+            console.log("filesCopy");
+            console.log(filesCopy.current);
+          } catch (error) {
+            console.log(error);
+            filesCopy.current = filesCopy.current.filter(
+              (file) => file.cid !== cid
+            );
+            filesCopy.current.push({
+              cid: "Failed",
+              fileName: acceptedFiles[i].name,
+              fileSize: acceptedFiles[i].size,
+              lastModified: new Date(
+                acceptedFiles[i].lastModified
+              ).toLocaleString(),
+              type: acceptedFiles[i].type,
+              status: UploadedItemStatus.FAILED,
+            });
+            console.log("filesCopy failed");
+            console.log(filesCopy.current);
+            setUploads(filesCopy.current);
+          }
+          console.log(cid + acceptedFiles[i].name);
+          resolve("done");
+        });
+      }
+    },
+    [setUploads, filesCopy, nodeInfo]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  return (
+    <UploadTabWrapper>
+      <div
+        id="dropzone"
+        {...getRootProps()}
+        style={{
+          minHeight: uploads.length > 0 ? "33%" : "100%",
+        }}
+      >
+        <input {...getInputProps()} />
+        {isDragActive ? (
+          <p>Drop the files here ...</p>
+        ) : (
+          <p>Drag 'n' drop some files here, or click to select files</p>
+        )}
+      </div>
+      <div
+        id="uploaded-items-wrap"
+        style={{
+          maxHeight: uploads.length > 0 ? "60vh" : "0%",
+        }}
+      >
+        {uploads.map((file) => (
+          <UploadedItemComponent item={file} key={file.cid} />
+        ))}
+      </div>
+    </UploadTabWrapper>
+  );
+}
+
+export default UploadTab;
+
+const UploadTabWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  padding: 16px;
+
+  #dropzone {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    border: 2px dashed #9e9e9e;
+    border-radius: 8px;
+  }
+
+  p {
+    font-size: 1rem;
+    text-align: center;
+  }
+
+  #uploaded-items-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+    width: 100%;
+    overflow-y: scroll;
+    margin-top: 16px;
+  }
+`;

frontend/src/pages/debug/DebugPage.tsx

@@ -0,0 +1,70 @@
+import axios from "axios";
+import React, { useEffect } from "react";
+import styled from "styled-components";
+import {
+  Convert,
+  DebugNodeInfoModel,
+} from "../../data/models/DebugNodeInfoModel";
+import NodeInfoItemComponent from "../../components/nodeInfoItem/NodeInfoItemComponent";
+import Header from "../../components/layout/partials/Header";
+import { useDexyStore } from "../../store";
+
+function DebugPage() {
+  const { nodeInfo } = useDexyStore();
+
+  const [statusInfo, setStatusInfo] = React.useState<
+    DebugNodeInfoModel | undefined
+  >();
+
+  useEffect(() => {
+    axios
+      .get(
+        `${
+          nodeInfo.nodeToConnectTo || nodeInfo.baseUrl
+        }/api/codex/v1/debug/info`,
+        {
+          headers: {
+            Authorization:
+              (nodeInfo.auth && "Basic " + btoa(nodeInfo.auth)) || "",
+          },
+        }
+      )
+      .then((response) => {
+        setStatusInfo(
+          Convert.toDebugNodeInfoModel(JSON.stringify(response.data))
+        );
+      });
+  }, [nodeInfo]);
+
+  console.log(statusInfo);
+  return (
+    <DebugPageWrapper>
+      <Header title="Node Info" />
+      <main>{statusInfo && <NodeInfoItemComponent data={statusInfo!!} />}</main>
+    </DebugPageWrapper>
+  );
+}
+
+export default DebugPage;
+
+const DebugPageWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+
+  main {
+    margin-top: auto;
+    margin-bottom: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+  }
+
+  .scroll {
+  }
+`;

frontend/src/pages/settings/SettingsPage.tsx

@@ -0,0 +1,238 @@
+import React from "react";
+import styled from "styled-components";
+import Header from "../../components/layout/partials/Header";
+import constants from "../../util/Constants";
+import { useDexyStore } from "../../store";
+
+function SettingsPage() {
+  const { nodeInfo, setNodeInfo } = useDexyStore();
+
+  const [nodeInfoInput, setNodeInfoInput] = React.useState({
+    nodeBaseUrl: nodeInfo.baseUrl,
+    nodeToConnectTo: nodeInfo.nodeToConnectTo,
+    nodeId: nodeInfo.id,
+    // nodeIp: nodeInfo.ip,
+    nodeAddress: nodeInfo.address,
+    auth: nodeInfo.auth,
+  });
+
+  async function connectOnSave(params: {
+    baseUrl: string;
+    nodeToConnectTo: string | null;
+    id: string | null;
+    // ip: string | null;
+    address: string | null;
+    auth: string | null;
+  }): Promise<void> {
+    if (
+      params.id === null ||
+      // params.ip === null ||
+      params.address === null
+    ) {
+      return;
+    }
+    try {
+      await fetch(
+        `http://localhost:8080/api/codex/v1/connect/${encodeURIComponent(
+          params.id
+        )}?addrs=${encodeURIComponent(params.address)}`
+      )
+        .then((response) => response.status)
+        .then((status) => {
+          console.log(status);
+          if (status === 200) {
+            alert("Successfully connected to node!");
+          } else {
+            alert("Failed to connect to node!");
+          }
+        });
+    } catch (error) {
+      console.error(error);
+      alert("Failed to connect to node!");
+    }
+  }
+
+  return (
+    <SettingsPageWrapper>
+      <Header title="Settings" />
+      <main>
+        <div className="inputs">
+          <h4>Connection Settings</h4>
+          <input
+            type="text"
+            placeholder="Local node base URL (default is http://localhost:8080)"
+            value={nodeInfoInput.nodeBaseUrl}
+            onChange={(e) =>
+              setNodeInfoInput({
+                ...nodeInfoInput,
+                nodeBaseUrl: e.target.value,
+              })
+            }
+          />
+          <input
+            type="text"
+            placeholder="Node to connect to (blank for local node) (e.g. http://example.com:8080))"
+            value={nodeInfoInput.nodeToConnectTo || ""}
+            onChange={(e) =>
+              setNodeInfoInput({
+                ...nodeInfoInput,
+                nodeToConnectTo: e.target.value,
+              })
+            }
+          />
+          <input
+            type="text"
+            placeholder="Node ID (blank for local node)"
+            value={nodeInfoInput.nodeId || ""}
+            onChange={(e) =>
+              setNodeInfoInput({ ...nodeInfoInput, nodeId: e.target.value })
+            }
+          />
+          {/* <input
+            type="text"
+            placeholder="Node IP (blank for local node)"
+            value={nodeInfoInput.nodeIp || ""}
+            onChange={(e) =>
+              // setNodeInfoInput({ ...nodeInfoInput, nodeIp: e.target.value })
+            }
+          /> */}
+          <input
+            type="text"
+            placeholder="Node Address (blank for local node)"
+            value={nodeInfoInput.nodeAddress || ""}
+            onChange={(e) =>
+              setNodeInfoInput({
+                ...nodeInfoInput,
+                nodeAddress: e.target.value,
+              })
+            }
+          />
+          <input
+            type="text"
+            placeholder="Node Auth (blank for local node) (e.g. username:password)"
+            value={nodeInfoInput.auth || ""}
+            onChange={(e) =>
+              setNodeInfoInput({ ...nodeInfoInput, auth: e.target.value })
+            }
+          />
+          <button
+            onClick={() => {
+              setNodeInfo({
+                baseUrl: nodeInfoInput.nodeBaseUrl,
+                nodeToConnectTo: nodeInfoInput.nodeToConnectTo,
+                id: nodeInfoInput.nodeId,
+                // ip: nodeInfoInput.nodeIp,
+                address: nodeInfoInput.nodeAddress,
+                auth: nodeInfoInput.auth,
+              });
+              connectOnSave({
+                baseUrl: nodeInfoInput.nodeBaseUrl,
+                nodeToConnectTo: nodeInfoInput.nodeToConnectTo,
+                id: nodeInfoInput.nodeId,
+                // ip: nodeInfoInput.nodeIp,
+                address: nodeInfoInput.nodeAddress,
+                auth: nodeInfoInput.auth,
+              });
+            }}
+          >
+            <span>Save</span>
+          </button>
+        </div>
+      </main>
+    </SettingsPageWrapper>
+  );
+}
+
+export default SettingsPage;
+
+const SettingsPageWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+
+  main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    padding: 16px 0px;
+  }
+
+  h1 {
+    color: ${constants.onSurfaceColor};
+    font-size: 24px;
+    margin: 16px;
+  }
+
+  .inputs {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #141414;
+    border-radius: 8px;
+    width: 50%;
+  }
+
+  h4 {
+    color: ${constants.onSurfaceColor};
+    font-size: 20px;
+    margin: 16px;
+  }
+
+  input {
+    height: 60px;
+    padding: 10px 20px;
+    border: none;
+    background-color: ${constants.surfaceColor};
+    color: ${constants.onSurfaceColor};
+    width: 100%;
+    border-radius: 8px;
+    margin: 16px 0px;
+    border: 2px dashed #9e9e9e;
+    border-radius: 8px;
+    text-align: center;
+  }
+
+  input:focus {
+    outline: none;
+    border: 2px solid ${constants.primaryColor};
+  }
+
+  button {
+    height: 40px;
+    border: none;
+    background-color: ${constants.primaryColor};
+    color: ${constants.onPrimaryColor};
+    font-size: 1rem;
+    cursor: pointer;
+    border-radius: 8px;
+    width: 80px;
+  }
+
+  button span {
+    font-weight: bold;
+  }
+
+  @media (max-width: 1180px) {
+    .inputs {
+      width: 80%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .inputs {
+      width: 85%;
+    }
+  }
+
+  @media (max-width: 450px) {
+    .inputs {
+      width: 90%;
+    }
+  }
+`;

frontend/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

frontend/src/store.ts

@@ -0,0 +1,44 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import UploadedItemModel from "./data/models/UploadedItemModel";
+
+interface NodeInfo {
+  baseUrl: string;
+  nodeToConnectTo: string | null;
+  id: string | null;
+  // ip: string | null;
+  address: string | null;
+  auth: string | null;
+}
+
+interface DexyState {
+  uploads: UploadedItemModel[];
+  setUploads: (uploads: UploadedItemModel[]) => void;
+  ftdCid: string;
+  setFtdCid: (cid: string) => void;
+  nodeInfo: NodeInfo;
+  setNodeInfo: (nodeInfo: NodeInfo) => void;
+}
+
+export const useDexyStore = create<DexyState>()(
+  persist(
+    (set, get) => ({
+      uploads: [],
+      setUploads: (uploads) => set({ uploads }),
+      ftdCid: "",
+      setFtdCid: (cid) => set({ ftdCid: cid }),
+      nodeInfo: {
+        baseUrl: "http://localhost:8080",
+        nodeToConnectTo: null,
+        id: null,
+        // ip: null,
+        address: null,
+        auth: null,
+      },
+      setNodeInfo: (nodeInfo) => set({ nodeInfo }),
+    }),
+    {
+      name: "dexy-storage",
+    }
+  )
+);

frontend/src/util/Constants.ts

@@ -0,0 +1,12 @@
+const constants = {
+  testApiBaseUrl: "http://localhost:5000",
+  primaryColor: "#6f11db",
+  onPrimaryColor: "#fefefe",
+  backgroundColor: "#000000",
+  surfaceColor: "#141414",
+  onSurfaceColor: "#fefefe",
+  errorColor: "#b00020",
+  successColor: "#00c853",
+};
+
+export default constants;

frontend/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}