4 files changed, 97 insertions, 0 deletions
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 0000000..996a794
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { CredentialResponse, GoogleLogin } from '@react-oauth/google';
+
+interface LoginResponse {
+    id: number
+}
+
+interface User {
+    id: Number,
+    elements: Element[],
+}
+
+interface Element {
+    id: Number,
+    userId: Number,
+    name: string,
+    state: ElementState,
+}
+
+enum ElementState {
+    HasColor,
+    HasIcon,
+}
+
+function App() {
+    const responseMessage = async (googleResponse: CredentialResponse) => {
+        console.log(googleResponse);
+        const url: string = "/auth/login";
+        const body = {
+            "googleToken": googleResponse.credential
+        };
+
+        const response = await fetch(url, {
+            method: "POST",
+            credentials: "include",
+            mode: "cors",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(body),
+        });
+        if (!response.ok) {
+            console.log("Backend conection problem");
+            return;
+        }
+
+        const user = await response.json() as LoginResponse;
+        console.log(user);
+    };
+
+    return (
+        <div className="App">
+            <GoogleLogin onSuccess={responseMessage} />
+        </div>
+    );
+}
+
+export default App;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
new file mode 100644
index 0000000..162d1a1
--- /dev/null
+++ b/frontend/src/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import { GoogleOAuthProvider } from '@react-oauth/google';
+
+const rootElem: HTMLElement = document.getElementById('root')!;
+
+const root = ReactDOM.createRoot(rootElem);
+root.render(
+    <GoogleOAuthProvider clientId='84022739350-83723nr55j7t1ptmhrkn1u7aq7nfo3he.apps.googleusercontent.com'>
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>
+    </GoogleOAuthProvider>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals(null);
diff --git a/frontend/src/reportWebVitals.tsx b/frontend/src/reportWebVitals.tsx
new file mode 100644
index 0000000..f00fe6c
--- /dev/null
+++ b/frontend/src/reportWebVitals.tsx
@@ -0,0 +1,13 @@
+const reportWebVitals = (onPerfEntry: any) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/frontend/src/setupTests.tsx b/frontend/src/setupTests.tsx
new file mode 100644
index 0000000..8f2609b
--- /dev/null
+++ b/frontend/src/setupTests.tsx
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';