Initial react app and context setup

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 (
+    <ThemeProvider theme={theme}>
+      <RoomContextProvider>
+        <CssBaseline />
+        Here goes content soon!
+      </RoomContextProvider>
+    </ThemeProvider>
+  );
+};

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<ContextValue | undefined>(undefined);
+
+export const RoomContextProvider: FC = ({ children }) => {
+  const [state, setState] = useState(defaultState);
+
+  return (
+    <Context.Provider value={{ state, setState }}>{children}</Context.Provider>
+  );
+};
+
+export const useRoomContext = () => {
+  const context = useContext(Context);
+
+  if (!context)
+    throw new Error("useRoomContext must be used within RoomContextProvider");
+
+  return context;
+};

src/index.tsx

@@ -0,0 +1,5 @@
+import ReactDOM from "react-dom";
+
+import { App } from "./App";
+
+ReactDOM.render(<App />, document.getElementById("root"));

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<SetStateAction<ContextData>>;
+}