perceptronbd · shakib-anwar-nibir17 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024
diff --git a/.env b/.env
diff --git a/README.md b/README.md
@@ -1,47 +0,0 @@
-# tRPC + Express + React (with Vite) Scaffolding
-
-This is a minimal monorepo for Express.js as backend and React frontend with tRPC support. Which is can be used as a starting point for any express trpc react application, with prisma.
-
-## Clone and install dependencies 🏭
-
-```bash
-$ git clone https://github.com/trulymittal/t3-app-with-express-react-vite-trpc-prisma.git
-$ cd t3-app-with-express-react-vite-trpc-prisma
-$ npm i --workspaces
-# Only if using the prisma ORM
-$ npx prisma db push
-```
-
-## Why another tRPC + Express + React boilerplate generator ❓
-
-1. Only installs the bare bones 💀 and "mostly" required dependencies whenever you try to start a new trpc express react application in a monorepo.
-2. Example TODO router, i.e. CRUD operations are demonstrated on the frontend React and backend express application, to give you an idea of how trpc works
-
-## Quick Start 🏃‍♂️
-
-The quickest way to get started is to clone the project and install the dependencies using:
-
-```bash
-$ npm i --workspaces
-$ npm run dev
-```
-
-## Author ✍️
-
-[**Truly Mittal 🇮🇳**](https://trulymittal.com)
-
-## YouTube 📺
-
-https://youtube.com/@mafiacodes
-
-## Donations 💰
-
-https://paypal.me/trulymittal
-
-## License 🎫
-
-[MIT](LICENSE)
-
-## Contribute 🤝
-
-You can fork this repo and send me a PR.

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -7,7 +7,7 @@
     <title>Vite + React + TS</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div class="bg-slate-800 text-white h-screen" id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -15,6 +15,7 @@
     "@trpc/server": "^10.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^7.0.2",
     "server": "^1.0.0"
   },
   "devDependencies": {

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -1,42 +1,32 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { httpBatchLink } from '@trpc/client'
-import { useState } from 'react'
-import './App.css'
-import expressLogo from './assets/express.png'
-import reactLogo from './assets/react.svg'
-import tRpcLogo from './assets/trpc.svg'
-import AddTodo from './components/AddTodo'
-import ListTodos from './components/ListTodos'
-import { trpc } from './lib/trpc'
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchLink } from "@trpc/client";
+import { useState } from "react";
+import "./App.css";
+import { trpc } from "./lib/trpc";
+import { BrowserRouter } from "react-router";
+import Router from "./routes/Router";
 
-function App() {
-  const [queryClient] = useState(() => new QueryClient())
+const App: React.FC = () => {
+  const [queryClient] = useState(() => new QueryClient());
   const [trpcClient] = useState(() => {
     return trpc.createClient({
       links: [
         httpBatchLink({
-          url: 'http://localhost:3000/trpc',
+          url: "http://localhost:3000/api/trpc",
         }),
       ],
-    })
-  })
+    });
+  });
 
   return (
     <trpc.Provider queryClient={queryClient} client={trpcClient}>
       <QueryClientProvider client={queryClient}>
-        <div className='max-w-xl mx-auto'>
-          <div className='text-center text-3xl font-bold text-gray-700'>
-            <h1>Vite + React | Express | tRPC</h1>
-            <h3>npm workspaces</h3>
-          </div>
-          <div className='max-w-md mx-auto grid gap-y-4 mt-8'>
-            <ListTodos />
-            <AddTodo />
-          </div>
-        </div>
+        <BrowserRouter>
+          <Router />
+        </BrowserRouter>
       </QueryClientProvider>
     </trpc.Provider>
-  )
-}
+  );
+};
 
-export default App
+export default App;
diff --git a/packages/client/src/components/AddTodo.tsx b/packages/client/src/components/AddTodo.tsx
diff --git a/packages/client/src/components/GetTodoById.tsx b/packages/client/src/components/GetTodoById.tsx