diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..e035158
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,32 @@
+import { useMemo } from "react";
+import {
+ ThemeProvider,
+ createTheme,
+ useMediaQuery,
+ CssBaseline,
+} from "@material-ui/core";
+
+import { RoomContextProvider } from "./context";
+
+export const App = () => {
+ const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+
+ const theme = useMemo(
+ () =>
+ createTheme({
+ palette: {
+ type: prefersDarkMode ? "dark" : "light",
+ },
+ }),
+ [prefersDarkMode]
+ );
+
+ return (
+
+
+
+ Here goes content soon!
+
+
+ );
+};
diff --git a/src/context.tsx b/src/context.tsx
new file mode 100644
index 0000000..2d3ecef
--- /dev/null
+++ b/src/context.tsx
@@ -0,0 +1,23 @@
+import { createContext, FC, useContext, useState } from "react";
+import { ContextData, ContextValue } from "./types";
+
+const defaultState: ContextData = { x: 0 };
+
+const Context = createContext(undefined);
+
+export const RoomContextProvider: FC = ({ children }) => {
+ const [state, setState] = useState(defaultState);
+
+ return (
+ {children}
+ );
+};
+
+export const useRoomContext = () => {
+ const context = useContext(Context);
+
+ if (!context)
+ throw new Error("useRoomContext must be used within RoomContextProvider");
+
+ return context;
+};
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..5dd2504
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,5 @@
+import ReactDOM from "react-dom";
+
+import { App } from "./App";
+
+ReactDOM.render(, document.getElementById("root"));
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..f31f14e
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from "react";
+
+export interface ContextData {
+ // TODO: describe state
+}
+
+export interface ContextValue {
+ state: ContextData;
+ setState: Dispatch>;
+}