2 files changed, 63 insertions, 0 deletions
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
new file mode 100644
index 0000000..aa87acf
--- /dev/null
+++ b/frontend/pages/_app.tsx
@@ -0,0 +1,16 @@
+import type { AppProps } from "next/app";
+import { ReactElement } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import "../styles/globals.css";
+
+const queryClient = new QueryClient();
+
+const MyApp = ({ Component, pageProps }: AppProps): ReactElement => {
+    return (
+        <QueryClientProvider client={queryClient}>
+            <Component {...pageProps} />
+        </QueryClientProvider>
+    );
+};
+
+export default MyApp;
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
new file mode 100644
index 0000000..4f3f4af
--- /dev/null
+++ b/frontend/pages/index.tsx
@@ -0,0 +1,47 @@
+import Head from "next/head";
+import { ReactElement, useEffect, useState } from "react";
+import { io } from "socket.io-client";
+import styles from "../styles/Home.module.css";
+import * as config from "../config";
+
+const socket = io(config.backendUrl);
+
+const Home = (): ReactElement => {
+    const [value, setValue] = useState<number | undefined>(undefined);
+
+    useEffect(() => {
+        socket.on("connect", () => {
+            console.log("connected:", socket.id);
+        });
+        socket.on("disconnect", (reason: string) => {
+            console.log("disconnected, reason:", reason);
+        });
+        socket.on("update", (arg: number) => {
+            console.log("update:", arg);
+            setValue(arg);
+        });
+    });
+
+    const increment = () => {
+        socket.emit("increment");
+    };
+
+    return (
+        <div className={styles.container}>
+            <Head>
+                <title>tomi.science</title>
+                <meta name="description" content="Tomi Koskinen's academic portfolio" />
+                <link rel="icon" href="/favicon.ico" />
+            </Head>
+            <div>
+                value:
+                {value}
+            </div>
+            <div>
+                <button onClick={increment}>increment</button>
+            </div>
+        </div>
+    );
+};
+
+export default Home;