metaversecloud-com · LinaBell · Mar 31, 2026 · Feb 18, 2026 · Feb 18, 2026 · Feb 18, 2026
@@ -35,7 +35,6 @@ package-lock.json
 yarn.lock
 
 # custom
-
+server/dist
 build/
-
 tmp/
@@ -19,6 +19,6 @@
   </head>
   <body class="rtsdk">
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
@@ -4,9 +4,11 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "dev": "vite",
     "start": "vite",
-    "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "build": "vite build --emptyOutDir",
+    "build:check-ts": "tsc && vite build --emptyOutDir",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -27,6 +29,7 @@
     "postcss": "^8.4.35",
     "sass": "^1.71.1",
     "tailwindcss": "^3.4.1",
+    "typescript": "^5.9.2",
     "vite": "^5.1.4"
   }
-}
+}
@@ -21,17 +21,17 @@ const App = () => {
 
   const interactiveParams = useMemo(() => {
     return {
-      assetId: searchParams.get("assetId"),
-      displayName: searchParams.get("displayName"),
-      interactiveNonce: searchParams.get("interactiveNonce"),
-      interactivePublicKey: searchParams.get("interactivePublicKey"),
-      profileId: searchParams.get("profileId"),
-      sceneDropId: searchParams.get("sceneDropId"),
-      uniqueName: searchParams.get("uniqueName"),
-      urlSlug: searchParams.get("urlSlug"),
-      username: searchParams.get("username"),
-      visitorId: searchParams.get("visitorId"),
-      identityId: searchParams.get("identityId"),
+      assetId: searchParams.get("assetId") || "",
+      displayName: searchParams.get("displayName") || "",
+      interactiveNonce: searchParams.get("interactiveNonce") || "",
+      interactivePublicKey: searchParams.get("interactivePublicKey") || "",
+      profileId: searchParams.get("profileId") || "",
+      sceneDropId: searchParams.get("sceneDropId") || "",
+      uniqueName: searchParams.get("uniqueName") || "",
+      urlSlug: searchParams.get("urlSlug") || "",
+      username: searchParams.get("username") || "",
+      visitorId: Number(searchParams.get("visitorId")) || 0,
+      identityId: searchParams.get("identityId") || "",
     };
   }, [searchParams]);
 
@@ -48,7 +48,7 @@ const App = () => {
       username,
       visitorId,
       identityId,
-    }) => {
+    }: typeof interactiveParams) => {
       const isInteractiveIframe = visitorId && interactiveNonce && interactivePublicKey && assetId;
       dispatch({
         type: SET_INTERACTIVE_PARAMS,

@@ -1,16 +1,14 @@
-import PropTypes from "prop-types";
+interface AdminIconButtonProps {
+  setShowSettings: (show: boolean) => void;
+  showSettings: boolean;
+}
 
-export const AdminIconButton = ({ setShowSettings, showSettings }) => {
+export const AdminIconButton = ({ setShowSettings, showSettings }: AdminIconButtonProps) => {
   return (
     <div className="icon-btn mb-4 text-right" onClick={() => setShowSettings(showSettings)}>
       {showSettings ? "←" : "⛭"}
     </div>
   );
 };
 
-AdminIconButton.propTypes = {
-  setShowSettings: PropTypes.func,
-  showSettings: PropTypes.bool,
-};
-
 export default AdminIconButton;
@@ -1,11 +1,17 @@
-import PropTypes from "prop-types";
-
 // context
 import { GlobalDispatchContext } from "@context/GlobalContext";
 import { SCREEN_MANAGER } from "@context/types";
 import { useContext } from "react";
 
-export const NewBadgeModal = ({ badge, handleToggleShowModal }) => {
+interface NewBadgeModalProps {
+  badge: {
+    name: string;
+    icon: string;
+  };
+  handleToggleShowModal: () => void;
+}
+
+export const NewBadgeModal = ({ badge, handleToggleShowModal }: NewBadgeModalProps) => {
   const dispatch = useContext(GlobalDispatchContext);
   const { name, icon } = badge;
 
@@ -32,12 +38,4 @@ export const NewBadgeModal = ({ badge, handleToggleShowModal }) => {
   );
 };
 
-NewBadgeModal.propTypes = {
-  badge: PropTypes.shape({
-    name: PropTypes.string,
-    icon: PropTypes.string,
-  }),
-  handleToggleShowModal: PropTypes.func,
-};
-
 export default NewBadgeModal;
@@ -1,6 +1,9 @@
-import PropTypes from "prop-types";
+interface CheckpointProps {
+  completed?: boolean;
+  number: string | number;
+}
 
-export const Checkpoint = ({ number, completed }) => {
+export const Checkpoint = ({ number, completed }: CheckpointProps) => {
   return (
     <div>
       <span className={`px-2 mt-2 mx-2 checkpoint ${completed ? "completed" : ""}`}></span>
@@ -9,9 +12,4 @@ export const Checkpoint = ({ number, completed }) => {
   );
 };
 
-Checkpoint.propTypes = {
-  completed: PropTypes.bool,
-  number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
 export default Checkpoint;
@@ -0,0 +1,13 @@
+interface BackButtonProps {
+  onClick: () => void;
+}
+
+export const BackButton = ({ onClick }: BackButtonProps) => {
+  return (
+    <div className="icon-btn mb-4" onClick={onClick}>
+      ←
+    </div>
+  );
+};
+
+export default BackButton;
@@ -1,7 +1,13 @@
 import { useState } from "react";
-import PropTypes from "prop-types";
 
-export const ConfirmationModal = ({ title, message, handleOnConfirm, handleToggleShowConfirmationModal }) => {
+interface ConfirmationModalProps {
+  title?: string;
+  message?: string;
+  handleOnConfirm: () => Promise<void>;
+  handleToggleShowConfirmationModal: () => void;
+}
+
+export const ConfirmationModal = ({ title, message, handleOnConfirm, handleToggleShowConfirmationModal }: ConfirmationModalProps) => {
   const [areButtonsDisabled, setAreButtonsDisabled] = useState(false);
 
   const onConfirm = async () => {
@@ -33,11 +39,4 @@ export const ConfirmationModal = ({ title, message, handleOnConfirm, handleToggl
   );
 };
 
-ConfirmationModal.propTypes = {
-  title: PropTypes.string,
-  message: PropTypes.string,
-  handleOnConfirm: PropTypes.func,
-  handleToggleShowConfirmationModal: PropTypes.func,
-};
-
 export default ConfirmationModal;
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+interface FooterProps {
+  children?: ReactNode;
+}
+
+export const Footer = ({ children }: FooterProps) => {
+  return <div className="footer-fixed p-4 grid gap-4">{children}</div>;
+};
+
+export default Footer;
@@ -1,13 +1,17 @@
-import { useContext, useState } from "react";
-import PropTypes from "prop-types";
+import { ReactNode, useContext, useState } from "react";
 
 // components
 import { AdminIconButton, Loading, AdminView } from "@/components";
 
 // context
 import { GlobalStateContext } from "@context/GlobalContext";
 
-export const PageContainer = ({ children, isLoading }) => {
+interface PageContainerProps {
+  children?: ReactNode;
+  isLoading?: boolean;
+}
+
+export const PageContainer = ({ children, isLoading }: PageContainerProps) => {
   const { error, isAdmin } = useContext(GlobalStateContext);
 
   const [showSettings, setShowSettings] = useState(false);
@@ -28,9 +32,4 @@ export const PageContainer = ({ children, isLoading }) => {
   );
 };
 
-PageContainer.propTypes = {
-  children: PropTypes.node,
-  isLoading: PropTypes.bool,
-};
-
 export default PageContainer;
@@ -1,6 +1,11 @@
-import PropTypes from "prop-types";
+import { Track } from "../../../../shared/types/index.js";
 
-export const SwitchRaceTrackButton = ({ track, handleToggleShowTrackModal }) => {
+interface SwitchRaceTrackButtonProps {
+  track: Track;
+  handleToggleShowTrackModal: (track: Track) => void;
+}
+
+export const SwitchRaceTrackButton = ({ track, handleToggleShowTrackModal }: SwitchRaceTrackButtonProps) => {
   return (
     <div onClick={() => handleToggleShowTrackModal(track)}>
       <img src={track.thumbnail} alt={track.name} />
@@ -9,12 +14,4 @@ export const SwitchRaceTrackButton = ({ track, handleToggleShowTrackModal }) =>
   );
 };
 
-SwitchRaceTrackButton.propTypes = {
-  handleToggleShowTrackModal: PropTypes.func,
-  track: {
-    name: PropTypes.string,
-    thumbnail: PropTypes.string,
-  },
-};
-
 export default SwitchRaceTrackButton;
@@ -1,8 +1,14 @@
 import { useState } from "react";
-import PropTypes from "prop-types";
 import { backendAPI } from "@utils/backendAPI";
+import { Track } from "../../../../shared/types/index.js";
 
-export const SwitchRaceTrackModal = ({ track, handleToggleShowModal, setMessage }) => {
+interface SwitchRaceTrackModalProps {
+  track: Track;
+  handleToggleShowModal: () => void;
+  setMessage: (message: string) => void;
+}
+
+export const SwitchRaceTrackModal = ({ track, handleToggleShowModal, setMessage }: SwitchRaceTrackModalProps) => {
   const [areAllButtonsDisabled, setAreAllButtonsDisabled] = useState(false);
 
   async function handleSwitchTrack() {
@@ -47,13 +53,4 @@ export const SwitchRaceTrackModal = ({ track, handleToggleShowModal, setMessage
   );
 };
 
-SwitchRaceTrackModal.propTypes = {
-  handleToggleShowModal: PropTypes.func,
-  setMessage: PropTypes.func,
-  track: {
-    name: PropTypes.string,
-    sceneId: PropTypes.string,
-  },
-};
-
 export default SwitchRaceTrackModal;
@@ -0,0 +1,20 @@
+export * from "./Admin/AdminIconButton";
+export * from "./Admin/AdminView";
+export * from "./Leaderboard/Leaderboard";
+export * from "./Leaderboard/LeaderboardScreen";
+export * from "./BadgesScreen/BadgesScreen";
+export * from "./NewGameScreen/NewGameScreen";
+export * from "./OnYourMarkScreen/OnYourMarkScreen";
+export * from "./RaceCompletedScreen/NewBadgeModal";
+export * from "./RaceCompletedScreen/RaceCompletedScreen";
+export * from "./RaceInProgressScreen/Checkpoint";
+export * from "./RaceInProgressScreen/RaceInProgressScreen";
+export * from "./Shared/BackButton";
+export * from "./Shared/ConfirmationModal";
+export * from "./Shared/Footer";
+export * from "./Shared/Loading";
+export * from "./Shared/PageContainer";
+export * from "./Shared/Tabs";
+export * from "./SwitchRace/SwitchRaceTrackButton";
+export * from "./SwitchRace/SwitchRaceTrackModal";
+export * from "./SwitchRace/SwitchTrackScreen";
@@ -0,0 +1,5 @@
+import { createContext, Dispatch } from "react";
+import { ActionType, InitialState } from "./types";
+
+export const GlobalStateContext = createContext<InitialState>({} as InitialState);
+export const GlobalDispatchContext = createContext<Dispatch<ActionType>>(() => {});