diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 000000000..0803ca491
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,56 @@
+################################################################################
+#
+# Copyright (C) 2023 retro.ai
+# This file is part of retro-dapp - https://github.com/RetroAI/retro-dapp
+#
+# SPDX-License-Identifier: Apache-2.0
+# See the file LICENSE for more information.
+#
+################################################################################
+
+name: Build and Deploy
+on:
+ push:
+ branches:
+ - main
+ paths:
+ # Only run the workflow when files in frontend change
+ - 'frontend/**'
+
+jobs:
+ build-and-deploy:
+ runs-on: ubuntu-latest
+ defaults:
+ run:
+ # Set the working directory to frontend folder
+ working-directory: frontend
+
+ steps:
+ - name: Checkout 🛎️
+ # If you're using actions/checkout you should set persist-credentials
+ # to false in most cases for the deployment to work correctly
+ uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v3
+ with:
+ node-version: '20'
+
+ - name: Install and Build
+ run: |
+ yarn install
+ yarn build
+
+ - name: Deploy to retroai.github.io 🚀
+ run: |
+ cd ..
+ git clone https://github.com/RetroAI/retroai.github.io.git deployed-repo
+ rsync -av --delete --exclude .git frontend/dist/ deployed-repo/
+ cd deployed-repo
+ git config user.name "GitHub Action"
+ git config user.email "retro.gaming.ai@gmail.com"
+ git add .
+ git commit -m "Deployed new build from retro-dapp repository"
+ git push https://${{secrets.GH_PAT}}@github.com/RetroAI/retroai.github.io.git main
diff --git a/README.md b/README.md
index 1677f9b6c..28198e33f 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,14 @@ To build the Cartesi backend, enter the `backend/` directory and run the followi
docker buildx bake -f docker-bake.hcl -f docker-bake.override.hcl --load
```
+To build and run the website frontend, enter the `frontend/` directory and use standard yarn commands:
+
+```bash
+yarn install
+yarn build
+yarn dev
+```
+
## Testing
Once `make` has completed in the root folder, try running the two example learners:
diff --git a/frontend/.eslintignore b/frontend/.eslintignore
new file mode 100644
index 000000000..3a7c22c1f
--- /dev/null
+++ b/frontend/.eslintignore
@@ -0,0 +1,3 @@
+# Generated by Yarn
+/dist
+/node_modules
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
new file mode 100644
index 000000000..d79f0dc57
--- /dev/null
+++ b/frontend/.eslintrc.json
@@ -0,0 +1,15 @@
+{
+ "root": true,
+ "parser": "@typescript-eslint/parser",
+ "plugins": ["@typescript-eslint", "simple-import-sort"],
+ "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+ "env": {
+ "browser": true,
+ "es2020": true,
+ "mocha": true,
+ "node": true
+ },
+ "rules": {
+ "simple-import-sort/imports": "error"
+ }
+}
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 000000000..dc711f9e4
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,15 @@
+# Generated by Yarn
+/dist
+/node_modules
+yarn-*.log*
+
+# Editor directories and files
+*.njsproj
+*.ntvs*
+*.sln
+*.suo
+*.sw?
+.DS_Store
+.idea
+.vscode/*
+!.vscode/extensions.json
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
new file mode 100644
index 000000000..3a7c22c1f
--- /dev/null
+++ b/frontend/.prettierignore
@@ -0,0 +1,3 @@
+# Generated by Yarn
+/dist
+/node_modules
diff --git a/frontend/audit-ci.json b/frontend/audit-ci.json
new file mode 100644
index 000000000..f9f53ca63
--- /dev/null
+++ b/frontend/audit-ci.json
@@ -0,0 +1,9 @@
+{
+ "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
+ "package-manager": "yarn",
+ "low": false,
+ "moderate": true,
+ "high": true,
+ "critical": true,
+ "allowlist": []
+}
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 000000000..d4cc4dc35
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,67 @@
+
+
+
+ retro.ai
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 000000000..897941c27
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,73 @@
+{
+ "name": "retro-dapp",
+ "version": "1.0.0",
+ "type": "module",
+ "description": "Website and backend for retro.ai",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/RetroAI/retro-dapp.git"
+ },
+ "homepage": "https://retroai.github.io",
+ "bugs": {
+ "url": "https://github.com/RetroAI/retro-dapp/issues"
+ },
+ "author": "retro.ai ",
+ "license": "Apache-2.0",
+ "engines": {
+ "node": ">=18.0.0",
+ "npm": ">=8.0.0"
+ },
+ "keywords": [
+ "ai",
+ "arcade",
+ "defi",
+ "entertainment",
+ "games",
+ "nft",
+ "retro"
+ ],
+ "scripts": {
+ "audit-ci": "audit-ci --config audit-ci.json",
+ "build": "tsc && vite build",
+ "clean": "rimraf dist node_modules yarn-*.log*",
+ "deploy": "yarn build && gh-pages --branch main --repo git@github.com:retroai/retroai.github.io.git --dist dist --dotfiles",
+ "dev": "vite",
+ "format": "prettier --write . && eslint --fix .",
+ "lint": "prettier --check . && eslint .",
+ "preview": "vite preview",
+ "test": "vitest run",
+ "test:ui": "vitest --ui"
+ },
+ "dependencies": {
+ "@web3-react/core": "^8.2.2",
+ "@web3-react/metamask": "^8.2.3",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.16.0",
+ "three": "^0.157.0"
+ },
+ "devDependencies": {
+ "@types/node": "^20.8.0",
+ "@types/react": "^18.2.23",
+ "@types/react-dom": "^18.2.8",
+ "@types/react-router-dom": "^5.3.3",
+ "@types/three": "^0.156.0",
+ "@typescript-eslint/eslint-plugin": "^6.7.3",
+ "@typescript-eslint/parser": "^6.7.3",
+ "@vitejs/plugin-react": "^4.1.0",
+ "@vitest/ui": "^0.34.6",
+ "@web3-react/types": "^8.2.2",
+ "audit-ci": "^6.6.1",
+ "eslint": "^8.50.0",
+ "eslint-plugin-prettier": "^5.0.0",
+ "eslint-plugin-simple-import-sort": "^10.0.0",
+ "prettier": "^3.0.3",
+ "prettier-plugin-pkg": "^0.18.0",
+ "rimraf": "^5.0.5",
+ "typescript": "^5.2.2",
+ "vite": "^4.4.9",
+ "vitest": "^0.34.6"
+ },
+ "bundleDependencies": false,
+ "target": "web"
+}
diff --git a/frontend/public/.nojekyll b/frontend/public/.nojekyll
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
new file mode 100644
index 000000000..3e4309e60
--- /dev/null
+++ b/frontend/public/manifest.json
@@ -0,0 +1,14 @@
+{
+ "short_name": "retro.ai",
+ "name": "retro.ai",
+ "icons": [
+ {
+ "src": "vite.svg",
+ "type": "image/svg+xml"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#ffffff",
+ "background_color": "#000000"
+}
diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
new file mode 100644
index 000000000..e9e57dc4d
--- /dev/null
+++ b/frontend/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
new file mode 100644
index 000000000..e7b8dfb1b
--- /dev/null
+++ b/frontend/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/App.css b/frontend/src/App.css
new file mode 100644
index 000000000..90450640f
--- /dev/null
+++ b/frontend/src/App.css
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2023 retro.ai
+ * This file is part of retro-dapp - https://github.com/RetroAI/retro-dapp
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * See the file Apache-2.0.txt for more information.
+ */
+
+nav ul {
+ position: relative;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background-color: #333;
+}
+
+nav li {
+ float: left;
+}
+
+nav li a {
+ display: block;
+ color: white;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+}
+
+nav li a:hover {
+ background-color: #111;
+}
+
+/*
+ * The following should ensure the button has no background, no border, and
+ * the SVG should be visible
+ */
+.showNavbarButton {
+ background: transparent !important; /* Using !important to avoid override by other styles */
+ border: none !important; /* Remove border */
+ cursor: pointer; /* Pointer cursor on hover */
+ padding: 8px; /* Adjust padding as needed */
+}
+
+.hideNavbarButton {
+ background-color: transparent; /* Transparent background */
+ color: #ffffff; /* White arrow */
+ border: none; /* Remove border */
+ cursor: pointer; /* Pointer cursor on hover */
+ padding: 8px; /* Add some padding */
+ font-size: 1.2rem; /* Adjust font-size as needed */
+ position: absolute; /* Positioning it */
+ right: 0; /* Align to the right */
+ top: 50%; /* Center vertically */
+ transform: translateY(-50%); /* Centering adjustment */
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 000000000..e1a2ffd88
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,116 @@
+/*
+ * Copyright (C) 2023 retro.ai
+ * This file is part of retro-dapp - https://github.com/RetroAI/retro-dapp
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * See the file Apache-2.0.txt for more information.
+ */
+
+import "./App.css";
+
+import React, { useState } from "react";
+import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+
+import BlankPage from "./components/BlankPage";
+import HomePage from "./components/HomePage";
+
+/*
+ * Main app definition
+ *
+ * The app consists of a navigation bar and a router. The home page is
+ * the main game page, and the blank page is a placeholder for future
+ * pages.
+ */
+function App() {
+ const [isNavbarVisible, setIsNavbarVisible] = useState(true);
+
+ return (
+
+
+ {isNavbarVisible ? (
+
+ ) : (
+
+ )}
+
+
+ } />
+ } />
+
+