Merge pull request #69 from jatintyagi1/develop

New Features

src/App.jsx

@@ -4,17 +4,19 @@ import Navbar from "./components/Navbar";
 import NoteList from "./pages/NoteList";
 import TableList from "./pages/TableList";
 import BoardList from "./pages/BoardList";
+import NotFoundPage from "./pages/NotFoundPage";
 import { Box } from "@mui/material";
 
 function App() {
   return (
     <Router>
-      <Box sx={{textAlign: 'center', fontFamily: 'Outfit, sans-serif'}}>
+      <Box sx={{ textAlign: 'center', fontFamily: 'Outfit, sans-serif' }}>
         <Navbar />
         <Routes>
-          <Route exact path='/' element={<NoteList/>} />
-          <Route path='/tables' element={<TableList/>} />
-          <Route path='/boards' element={<BoardList/>} />
+          <Route exact path='/' element={<NoteList />} />
+          <Route path='/tables' element={<TableList />} />
+          <Route path='/boards' element={<BoardList />} />
+          <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </Box>
     </Router>

src/components/Loading/index.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Box, CircularProgress, Typography } from "@mui/material";
+
+const LoadingSpinner = () => {
+    return (
+        <Box
+            sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "100vh",
+                bgcolor: "#f5f5f5", 
+            }}
+        >
+            <CircularProgress size={60} />
+            <Typography variant="h6" sx={{ mt: 2, color: "#666" }}>
+                Loading, please wait...
+            </Typography>
+        </Box>
+    );
+};
+
+export default LoadingSpinner;

src/main.jsx

@@ -4,10 +4,15 @@ import { RecoilRoot } from 'recoil';
 import App from "./App";
 import './main.css';
 
+import { Suspense } from 'react'
+import LoadingSpinner from './components/Loading';
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <RecoilRoot>
-      <App />
+      <Suspense fallback={<LoadingSpinner />}>
+        <App />
+      </Suspense>
     </RecoilRoot>
   </React.StrictMode>
 );

src/pages/NotFoundPage/index.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Box, Typography, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+const NotFoundPage = () => {
+    const navigate = useNavigate();
+
+    return (
+        <Box
+            sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "100vh",
+                bgcolor: "#f5f5f5", // Light background color
+                textAlign: "center",
+                px: 2,
+            }}
+        >
+            <Typography variant="h1" sx={{ fontSize: "96px", fontWeight: "bold", color: "#1976d2" }}>
+                404
+            </Typography>
+            <Typography variant="h6" sx={{ mb: 2, color: "#666" }}>
+                Oops! The page you are looking for doesn’t exist.
+            </Typography>
+            <Button
+                variant="contained"
+                color="primary"
+                onClick={() => navigate("/")}
+                sx={{ mt: 2 }}
+            >
+                Go Back to Home
+            </Button>
+        </Box>
+    );
+};
+
+export default NotFoundPage;