Webpage building

.github/workflows/validate.yml

@@ -1,14 +1,9 @@
 name: Validate NeuroJson_io Project
 
 on:
-  push:
-    branches:
-      - dev
-      - main
   pull_request:
     branches:
-      - dev
-      - main
+      - "*"
 
 jobs:
   validate:
@@ -21,16 +16,13 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
 
       - name: Install dependencies
         run: yarn install
 
       - name: Compile TypeScript
         run: yarn build
 
-      - name: Run Linter
-        run: yarn lint
-
       - name: Run Security Audit
         run: yarn audit --level moderate

.gitignore

@@ -1,3 +1,4 @@
 .env
 node_modules
 .DS_Store
+package-lock.json

package.json

@@ -22,9 +22,10 @@
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-json-view": "^1.21.3",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "three": "^0.169.0",
     "typescript": "^5.1.6",
     "web-vitals": "^2.1.0"
@@ -62,5 +63,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "resolutions": {
+    "postcss": "^8.4.31",
+    "nth-check": "^2.0.1"
   }
 }

src/components/Routes.tsx

@@ -1,15 +1,33 @@
+import React from "react";
 import FullScreen from "design/Layouts/FullScreen";
 import Home from "pages/Home";
-import { Navigate, Route, Routes as RoutesFromRouter } from "react-router-dom";
+import DatabasePage from "pages/DatabasePage";
+import DatasetPage from "pages/DatasetPage";
+import DatasetDetailPage from "pages/DatasetDetailPage";
+import { Navigate, Route, Routes as RouterRoutes } from "react-router-dom";
 import RoutesEnum from "types/routes.enum";
 
 const Routes = () => (
-	<RoutesFromRouter>
-		<Route element={<FullScreen />}>
-			<Route path={RoutesEnum.HOME} element={<Home />} />
-		</Route>
+  <RouterRoutes>
+    {/* FullScreen Layout */}
+    <Route element={<FullScreen />}>
+      {/* Home Page */}
+      <Route path={RoutesEnum.HOME} element={<Home />} />
 
-		<Route path="*" element={<Navigate to="/" />} />
-	</RoutesFromRouter>
+      {/* Databases Page */}
+      <Route path={RoutesEnum.DATABASES} element={<DatabasePage />} />
+
+      {/* Dataset List Page */}
+      <Route path={`${RoutesEnum.DATABASES}/:dbName`} element={<DatasetPage />} />
+
+      {/* Dataset Details Page */}
+      <Route path={`${RoutesEnum.DATABASES}/:dbName/:docId`} element={<DatasetDetailPage />} />
+    </Route>
+
+    {/* Fallback Route */}
+    <Route path="*" element={<Navigate to={RoutesEnum.HOME} />} />
+  </RouterRoutes>
 );
+
 export default Routes;
+

src/index.tsx

@@ -1,20 +1,47 @@
-import App from "./App";
-import { ThemeProvider } from "@emotion/react";
-import { CssBaseline } from "@mui/material";
-import theme from "design/theme";
+// import App from "./App";
+// import { ThemeProvider } from "@emotion/react";
+// import { CssBaseline } from "@mui/material";
+// import theme from "design/theme";
+// import ReactDOM from "react-dom/client";
+// import { Provider } from "react-redux";
+// import store from "redux/store";
+
+// const root = ReactDOM.createRoot(
+// 	document.getElementById("root") as HTMLElement
+// );
+
+// root.render(
+// 	<Provider store={store}>
+// 		<ThemeProvider theme={theme}>
+// 			<CssBaseline />
+// 			<App />
+// 		</ThemeProvider>
+// 	</Provider>
+// );
+
+import React from "react";
 import ReactDOM from "react-dom/client";
+import App from "./App";
 import { Provider } from "react-redux";
-import store from "redux/store";
+import store from "./redux/store";
+import { ThemeProvider } from "@mui/material/styles";
+import { CssBaseline } from "@mui/material";
+import theme from "./design/theme";
 
-const root = ReactDOM.createRoot(
-	document.getElementById("root") as HTMLElement
-);
+// Get the root element
+const rootElement = document.getElementById("root") as HTMLElement;
+
+// Create the root for rendering React
+const root = ReactDOM.createRoot(rootElement);
 
+// Render the application
 root.render(
-	<Provider store={store}>
-		<ThemeProvider theme={theme}>
-			<CssBaseline />
-			<App />
-		</ThemeProvider>
-	</Provider>
+  <React.StrictMode>
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <App />
+      </ThemeProvider>
+    </Provider>
+  </React.StrictMode>
 );