Feat(Frontend): Authentication Context

frontend/src/App.tsx

@@ -13,11 +13,24 @@ import ThemeProvider from "./ThemeProvider";
 // Material UI stuffs
 import Container from "@mui/material/Container";
 
+// React helmet async: configure the page's title
+import { Helmet, HelmetProvider } from "react-helmet-async";
+
+// Authentication Context: Check if user is logged in or not
+import { AuthContextProvider } from "./AuthContext";
+
 function App() {
   return (
-    <ThemeProvider>
-      <Container maxWidth="md"></Container>
-    </ThemeProvider>
+    <AuthContextProvider>
+      <HelmetProvider>
+        <Helmet>
+          <title>Todo</title>
+        </Helmet>
+        <ThemeProvider>
+          <Container maxWidth="md"></Container>
+        </ThemeProvider>
+      </HelmetProvider>
+    </AuthContextProvider>
   );
 }
 

frontend/src/AuthContext.tsx

@@ -0,0 +1,25 @@
+import { createContext, useState } from "react";
+
+interface IAuth {
+  authenticated: boolean;
+  setAuthenticated: (value: boolean) => void;
+}
+
+export const AuthContext = createContext<IAuth>({
+  authenticated: true,
+  setAuthenticated: (value: boolean) => {},
+});
+
+interface IProps {
+  children?: React.ReactNode;
+}
+
+export const AuthContextProvider = ({ children }: IProps) => {
+  const [authenticated, setAuthenticated] = useState(true);
+
+  return (
+    <AuthContext.Provider value={{ authenticated, setAuthenticated }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

frontend/src/components/Title.tsx

@@ -0,0 +1,19 @@
+import Typography from "@mui/material/Typography";
+import { Helmet } from "react-helmet-async";
+
+interface IProps {
+  title: string;
+}
+
+const Title = ({ title }: IProps) => (
+  <>
+    <Helmet>
+      <title>Todo | {title}</title>
+    </Helmet>
+    <Typography component="h1" variant="h5">
+      {title}
+    </Typography>
+  </>
+);
+
+export default Title;