setup routes and theme

src/App.tsx

@@ -1,8 +1,14 @@
 import React from "react";
 import "./App.css";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./router";
 
 function App() {
-  return <>test</>;
+  return (
+    <>
+      <RouterProvider router={router} />
+    </>
+  );
 }
 
 export default App;

src/libs/theme.tsx

@@ -0,0 +1,10 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+    palette: {},
+    typography: {
+        fontFamily: ['DM Sans', 'sans-serif'].join(','),
+    },
+});
+
+export default theme;

src/main.tsx

@@ -2,8 +2,10 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
-import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import theme from "./libs/theme.tsx";
 
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
@@ -23,9 +25,10 @@ const queryClient = new QueryClient({
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
         <App />
-      </BrowserRouter>
+      </ThemeProvider>
     </QueryClientProvider>
   </React.StrictMode>,
 );

src/pages/Dashboard/Dashboard.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+export const Dashboard = () => {
+    return (
+        <div>Dashboard</div>
+    )
+}
+

src/pages/Dashboard/index.ts

@@ -0,0 +1,3 @@
+import { Dashboard } from "./Dashboard";
+
+export default Dashboard;

src/router/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createBrowserRouter } from 'react-router-dom';
+import Dashboard from '@/pages/Dashboard';
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Dashboard />,
+  },
+  {
+    path: '*',
+    element: <div>Not found</div>,
+  },
+]);

tsconfig.app.json

@@ -16,13 +16,17 @@
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
 
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src", ".eslintrc.cjs"]
+  "include": ["src", ".eslintrc.cjs", "src/setupTests.ts"]
 }

vite.config.ts

@@ -3,6 +3,7 @@
 
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -19,4 +20,7 @@ export default defineConfig({
   server: {
     port: 3000,
   },
+  resolve: {
+    alias: { "@": path.resolve(__dirname, "/src") },
+  },
 });