├── packages
    ├── server
    │   ├── src
    │   │   ├── index.ts
    │   │   ├── router
    │   │   │   ├── index.ts
    │   │   │   └── todoRouter.ts
    │   │   ├── lib
    │   │   │   ├── prismaClient.ts
    │   │   │   └── trpc.ts
    │   │   └── main.ts
    │   ├── .gitignore
    │   ├── prisma
    │   │   └── schema.prisma
    │   ├── package.json
    │   └── tsconfig.json
    └── client
    │   ├── src
    │       ├── vite-env.d.ts
    │       ├── index.css
    │       ├── assets
    │       │   ├── express.png
    │       │   ├── trpc.svg
    │       │   └── react.svg
    │       ├── lib
    │       │   └── trpc.ts
    │       ├── main.tsx
    │       ├── components
    │       │   ├── GetTodoById.tsx
    │       │   ├── AddTodo.tsx
    │       │   └── ListTodos.tsx
    │       ├── App.css
    │       └── App.tsx
    │   ├── postcss.config.cjs
    │   ├── vite.config.ts
    │   ├── tailwind.config.cjs
    │   ├── tsconfig.node.json
    │   ├── .gitignore
    │   ├── index.html
    │   ├── tsconfig.json
    │   ├── package.json
    │   └── public
    │       └── vite.svg
├── .gitignore
├── .vscode
    └── settings.json
├── package.json
└── README.md


/packages/server/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './router'
2 | 


--------------------------------------------------------------------------------
/packages/client/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/packages/client/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/packages/server/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | # Keep environment variables out of version control
3 | .env
4 | 


--------------------------------------------------------------------------------
/packages/client/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/packages/client/src/assets/express.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trulymittal/t3-app-with-express-react-vite-trpc-prisma/HEAD/packages/client/src/assets/express.png


--------------------------------------------------------------------------------
/packages/client/src/lib/trpc.ts:
--------------------------------------------------------------------------------
1 | import { createTRPCReact } from '@trpc/react-query'
2 | import type { AppRouter } from 'server'
3 | 
4 | export const trpc = createTRPCReact<AppRouter>()
5 | 


--------------------------------------------------------------------------------
/packages/client/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/packages/server/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import { trpc } from '../lib/trpc'
2 | import { todoRouter } from './todoRouter'
3 | 
4 | export const appRouter = trpc.router({
5 |   todo: todoRouter,
6 | })
7 | 
8 | export type AppRouter = typeof appRouter
9 | 


--------------------------------------------------------------------------------
/packages/client/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [require('@tailwindcss/forms')],
8 | }
9 | 


--------------------------------------------------------------------------------
/packages/client/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/packages/client/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/packages/server/src/lib/prismaClient.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from '@prisma/client'
2 | 
3 | const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }
4 | 
5 | export const prisma = globalForPrisma.prisma || new PrismaClient()
6 | 
7 | if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | 
15 | node_modules
16 | 
17 | */node_modules
18 | *.env
19 | *.env.local
20 | 
21 | *build
22 | 
23 | # Prisma sqlite
24 | *dev.db*
25 | *migrations*


--------------------------------------------------------------------------------
/packages/client/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/packages/client/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React + TS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files.exclude": {
 3 |     "**/.git": false,
 4 |     "**/.svn": true,
 5 |     "**/.hg": true,
 6 |     "**/CVS": true,
 7 |     "**/.DS_Store": true,
 8 |     "**/Thumbs.db": true,
 9 |     "**/.classpath": true,
10 |     "**/.project": true,
11 |     "**/.settings": true,
12 |     "**/.factorypath": true,
13 |     "**/node_modules": true
14 |   },
15 |   "editor.codeActionsOnSave": {
16 |     "source.organizeImports": false
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/packages/server/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | // This is your Prisma schema file,
 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
 3 | 
 4 | generator client {
 5 |   provider = "prisma-client-js"
 6 | }
 7 | 
 8 | datasource db {
 9 |   provider = "sqlite"
10 |   // url      = env("DATABASE_URL")
11 |   url      = "file:./dev.db.sqlite"
12 | }
13 | 
14 | model Todo {
15 |   id          String   @id @default(cuid())
16 |   title       String
17 |   isCompleted Boolean
18 |   createdAt   DateTime @default(now())
19 |   updatedAt   DateTime @updatedAt
20 | }
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "t3-app-1",
 3 |   "version": "1.0.0",
 4 |   "description": "Starter project for ExpressJS with React + Vite using tRPC",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "npm run dev --workspace=client & npm run dev --workspace=server"
 8 |   },
 9 |   "workspaces": [
10 |     "./packages/client",
11 |     "./packages/server"
12 |   ],
13 |   "keywords": [
14 |     "ExpressJS",
15 |     "React",
16 |     "Vite",
17 |     "tRPC",
18 |     "typescript"
19 |   ],
20 |   "author": "Truly Mittal <trulymittal@gmail.com> (https://www.trulymittal.com/)",
21 |   "license": "ISC"
22 | }
23 | 


--------------------------------------------------------------------------------
/packages/client/src/components/GetTodoById.tsx:
--------------------------------------------------------------------------------
 1 | export default function GetTodoById() {
 2 |   return (
 3 |     <>
 4 |       <div className='flex justify-between space-x-4'>
 5 |         <input
 6 |           type='text'
 7 |           placeholder='lknaslkjdbliblokibnlkj'
 8 |           className='flex-grow rounded-md'
 9 |         />
10 |         <button className='bg-blue-500 hover:bg-blue-600 active:bg-blue-500 text-white py-1 px-3 rounded-md'>
11 |           Get by ID
12 |         </button>
13 |       </div>
14 |       <p className='bg-gray-100 py-2 px-3 rounded-md'>Hi from Mafia codes</p>
15 |     </>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/client/src/App.css:
--------------------------------------------------------------------------------
 1 | .logo {
 2 |   height: 6em;
 3 |   padding: 1.5em;
 4 |   will-change: filter;
 5 | }
 6 | .logo:hover {
 7 |   filter: drop-shadow(0 0 2em #646cffaa);
 8 | }
 9 | .logo.react:hover {
10 |   filter: drop-shadow(0 0 2em #61dafbaa);
11 | }
12 | 
13 | @keyframes logo-spin {
14 |   from {
15 |     transform: rotate(0deg);
16 |   }
17 |   to {
18 |     transform: rotate(360deg);
19 |   }
20 | }
21 | 
22 | @media (prefers-reduced-motion: no-preference) {
23 |   a:nth-of-type(2) .logo {
24 |     animation: logo-spin infinite 20s linear;
25 |   }
26 | }
27 | 
28 | .card {
29 |   padding: 2em;
30 | }
31 | 
32 | .read-the-docs {
33 |   color: #888;
34 | }
35 | 


--------------------------------------------------------------------------------
/packages/client/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["DOM", "DOM.Iterable", "ESNext"],
 6 |     "allowJs": false,
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": false,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "module": "ESNext",
13 |     "moduleResolution": "Node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx"
18 |   },
19 |   "include": ["src"],
20 |   "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 | 


--------------------------------------------------------------------------------
/packages/server/src/lib/trpc.ts:
--------------------------------------------------------------------------------
 1 | import { inferAsyncReturnType, initTRPC, TRPCError } from '@trpc/server'
 2 | import * as trpcExpress from '@trpc/server/adapters/express'
 3 | 
 4 | export const createContext = ({
 5 |   req,
 6 |   res,
 7 | }: trpcExpress.CreateExpressContextOptions) => {
 8 |   // req.
 9 |   const token = req.headers.authorization
10 |   // Validate token
11 |   // Get the user
12 |   const user = 'Truly'
13 | 
14 |   const noUser = undefined
15 | 
16 |   if (user) {
17 |     throw new TRPCError({
18 |       code: 'UNAUTHORIZED',
19 |       message: 'You are not authorized',
20 |     })
21 |   }
22 | 
23 |   return {
24 |     user: user,
25 |   }
26 | }
27 | 
28 | type Context = inferAsyncReturnType<typeof createContext>
29 | export const trpc = initTRPC.context<Context>().create()
30 | 


--------------------------------------------------------------------------------
/packages/server/src/main.ts:
--------------------------------------------------------------------------------
 1 | import express, { Application, NextFunction, Request, Response } from 'express'
 2 | import * as trpcExpress from '@trpc/server/adapters/express'
 3 | import { appRouter } from './router'
 4 | import cors from 'cors'
 5 | import { createContext } from './lib/trpc'
 6 | 
 7 | const app: Application = express()
 8 | app.use(cors())
 9 | 
10 | // app.get('/', (req: Request, res: Response, next: NextFunction) => {
11 | //   res.json({ message: 'Hello world!' })
12 | // })
13 | 
14 | app.use(
15 |   '/trpc',
16 |   trpcExpress.createExpressMiddleware({
17 |     router: appRouter,
18 |     createContext: createContext,
19 |   })
20 | )
21 | 
22 | const PORT: number = Number(process.env.PORT) || 3000
23 | app.listen(PORT, () => {
24 |   console.log(`🚀 Server running on Port: ${PORT}`)
25 | })
26 | 


--------------------------------------------------------------------------------
/packages/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "server",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "./src/index.ts",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "dev": "ts-node-dev ./src/main.ts",
 9 |     "start": "node ./build/main.js"
10 |   },
11 |   "keywords": [],
12 |   "author": "",
13 |   "license": "ISC",
14 |   "devDependencies": {
15 |     "@types/express": "^4.17.16",
16 |     "@types/node": "^18.11.18",
17 |     "prisma": "^4.9.0",
18 |     "ts-node": "^10.9.1",
19 |     "ts-node-dev": "^2.0.0",
20 |     "typescript": "^4.9.5"
21 |   },
22 |   "dependencies": {
23 |     "@prisma/client": "^4.9.0",
24 |     "@trpc/server": "^10.10.0",
25 |     "@types/cors": "^2.8.13",
26 |     "cors": "^2.8.5",
27 |     "express": "^4.18.2",
28 |     "zod": "^3.20.6"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/packages/client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "@tanstack/react-query": "^4.24.4",
13 |     "@trpc/client": "^10.10.0",
14 |     "@trpc/react-query": "^10.10.0",
15 |     "@trpc/server": "^10.10.0",
16 |     "react": "^18.2.0",
17 |     "react-dom": "^18.2.0",
18 |     "server": "^1.0.0"
19 |   },
20 |   "devDependencies": {
21 |     "@tailwindcss/forms": "^0.5.3",
22 |     "@types/react": "^18.0.26",
23 |     "@types/react-dom": "^18.0.9",
24 |     "@vitejs/plugin-react": "^3.0.0",
25 |     "autoprefixer": "^10.4.13",
26 |     "postcss": "^8.4.21",
27 |     "tailwindcss": "^3.2.4",
28 |     "typescript": "^4.9.3",
29 |     "vite": "^4.0.0"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/packages/client/src/components/AddTodo.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | import { trpc } from '../lib/trpc'
 3 | 
 4 | export default function AddTodo() {
 5 |   const [title, setTitle] = useState('')
 6 |   const addTodoMutation = trpc.todo.create.useMutation()
 7 |   const trpcContext = trpc.useContext()
 8 |   return (
 9 |     <div className='flex justify-between space-x-4'>
10 |       <input
11 |         value={title}
12 |         onChange={e => setTitle(e.target.value)}
13 |         type='text'
14 |         placeholder='Get milk...'
15 |         className='flex-grow rounded-md'
16 |       />
17 |       <button
18 |         className='bg-blue-500 hover:bg-blue-600 active:bg-blue-500 text-white py-1 px-3 rounded-md'
19 |         onClick={() => {
20 |           addTodoMutation.mutate(
21 |             { title: title },
22 |             {
23 |               onSuccess: () => {
24 |                 console.log('created a todo')
25 |                 trpcContext.todo.list.invalidate()
26 |               },
27 |             }
28 |           )
29 |         }}
30 |       >
31 |         Add todo
32 |       </button>
33 |     </div>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/packages/server/src/router/todoRouter.ts:
--------------------------------------------------------------------------------
 1 | import { prisma } from '../lib/prismaClient'
 2 | import { trpc } from '../lib/trpc'
 3 | import { z } from 'zod'
 4 | 
 5 | export const todoRouter = trpc.router({
 6 |   list: trpc.procedure.query(({ ctx }) => {
 7 |     console.log(ctx.user)
 8 |     // const todos = await prisma.todo.findMany()
 9 |     // return todos
10 |     return prisma.todo.findMany()
11 |   }),
12 |   create: trpc.procedure
13 |     .input(z.object({ title: z.string() }))
14 |     .mutation(({ input }) => {
15 |       const title = input.title
16 |       return prisma.todo.create({
17 |         data: {
18 |           title: title,
19 |           isCompleted: false,
20 |         },
21 |       })
22 |     }),
23 |   delete: trpc.procedure
24 |     .input(z.object({ id: z.string() }))
25 |     .mutation(({ input }) => {
26 |       return prisma.todo.delete({
27 |         where: {
28 |           id: input.id,
29 |         },
30 |       })
31 |     }),
32 |   update: trpc.procedure
33 |     .input(z.object({ id: z.string(), isCompleted: z.boolean() }))
34 |     .mutation(({ ctx, input }) => {
35 |       return prisma.todo.update({
36 |         where: {
37 |           id: input.id,
38 |         },
39 |         data: {
40 |           isCompleted: input.isCompleted,
41 |         },
42 |       })
43 |     }),
44 | })
45 | 


--------------------------------------------------------------------------------
/packages/client/src/assets/trpc.svg:
--------------------------------------------------------------------------------
1 | <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="512" height="512" rx="150" fill="#398CCB"/>
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M255.446 75L326.523 116.008V138.556L412.554 188.238V273.224L435.631 286.546V368.608L364.6 409.615L333.065 391.378L256.392 435.646L180.178 391.634L149.085 409.615L78.0538 368.538V286.546L100.231 273.743V188.238L184.415 139.638L184.462 139.636V116.008L255.446 75ZM326.523 159.879V198.023L255.492 239.031L184.462 198.023V160.936L184.415 160.938L118.692 198.9V263.084L149.085 245.538L220.115 286.546V368.538L198.626 380.965L256.392 414.323L314.618 380.712L293.569 368.538V286.546L364.6 245.538L394.092 262.565V198.9L326.523 159.879ZM312.031 357.969V307.915L355.369 332.931V382.985L312.031 357.969ZM417.169 307.846L373.831 332.862V382.985L417.169 357.9V307.846ZM96.5154 357.9V307.846L139.854 332.862V382.915L96.5154 357.9ZM201.654 307.846L158.315 332.862V382.915L201.654 357.9V307.846ZM321.262 291.923L364.6 266.908L407.938 291.923L364.6 316.962L321.262 291.923ZM149.085 266.838L105.746 291.923L149.085 316.892L192.423 291.923L149.085 266.838ZM202.923 187.362V137.308L246.215 162.346V212.377L202.923 187.362ZM308.015 137.308L264.723 162.346V212.354L308.015 187.362V137.308ZM212.154 121.338L255.446 96.3231L298.785 121.338L255.446 146.354L212.154 121.338Z" fill="white"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/packages/client/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 2 | import { httpBatchLink } from '@trpc/client'
 3 | import { useState } from 'react'
 4 | import './App.css'
 5 | import expressLogo from './assets/express.png'
 6 | import reactLogo from './assets/react.svg'
 7 | import tRpcLogo from './assets/trpc.svg'
 8 | import AddTodo from './components/AddTodo'
 9 | import ListTodos from './components/ListTodos'
10 | import { trpc } from './lib/trpc'
11 | 
12 | function App() {
13 |   const [queryClient] = useState(() => new QueryClient())
14 |   const [trpcClient] = useState(() => {
15 |     return trpc.createClient({
16 |       links: [
17 |         httpBatchLink({
18 |           url: 'http://localhost:3000/trpc',
19 |         }),
20 |       ],
21 |     })
22 |   })
23 | 
24 |   return (
25 |     <trpc.Provider queryClient={queryClient} client={trpcClient}>
26 |       <QueryClientProvider client={queryClient}>
27 |         <div className='max-w-xl mx-auto'>
28 |           <div className='text-center text-3xl font-bold text-gray-700'>
29 |             <h1>Vite + React | Express | tRPC</h1>
30 |             <h3>npm workspaces</h3>
31 |           </div>
32 |           <div className='max-w-md mx-auto grid gap-y-4 mt-8'>
33 |             <ListTodos />
34 |             <AddTodo />
35 |           </div>
36 |         </div>
37 |       </QueryClientProvider>
38 |     </trpc.Provider>
39 |   )
40 | }
41 | 
42 | export default App
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tRPC + Express + React (with Vite) Scaffolding
 2 | 
 3 | 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.
 4 | 
 5 | ## Clone and install dependencies 🏭
 6 | 
 7 | ```bash
 8 | $ git clone https://github.com/trulymittal/t3-app-with-express-react-vite-trpc-prisma.git
 9 | $ cd t3-app-with-express-react-vite-trpc-prisma
10 | $ npm i --workspaces
11 | # Only if using the prisma ORM
12 | $ npx prisma db push
13 | ```
14 | 
15 | ## Why another tRPC + Express + React boilerplate generator ❓
16 | 
17 | 1. Only installs the bare bones 💀 and "mostly" required dependencies whenever you try to start a new trpc express react application in a monorepo.
18 | 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
19 | 
20 | ## Quick Start 🏃‍♂️
21 | 
22 | The quickest way to get started is to clone the project and install the dependencies using:
23 | 
24 | ```bash
25 | $ npm i --workspaces
26 | $ npm run dev
27 | ```
28 | 
29 | ## Author ✍️
30 | 
31 | [**Truly Mittal 🇮🇳**](https://trulymittal.com)
32 | 
33 | ## YouTube 📺
34 | 
35 | https://youtube.com/@mafiacodes
36 | 
37 | ## Donations 💰
38 | 
39 | https://paypal.me/trulymittal
40 | 
41 | ## License 🎫
42 | 
43 | [MIT](LICENSE)
44 | 
45 | ## Contribute 🤝
46 | 
47 | You can fork this repo and send me a PR.
48 | 


--------------------------------------------------------------------------------
/packages/client/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/packages/client/src/components/ListTodos.tsx:
--------------------------------------------------------------------------------
 1 | import { trpc } from '../lib/trpc'
 2 | 
 3 | export default function ListTodos() {
 4 |   function handleDelete() {}
 5 |   function updateTodo() {}
 6 | 
 7 |   const response = trpc.todo.list.useQuery()
 8 |   const deleteMutation = trpc.todo.delete.useMutation()
 9 |   const updateMutation = trpc.todo.update.useMutation()
10 |   const trpcContext = trpc.useContext()
11 | 
12 |   if (response.isError) {
13 |     return <h2>Error...</h2>
14 |   }
15 | 
16 |   if (response.isLoading) {
17 |     return <h2>Loading...</h2>
18 |   }
19 | 
20 |   return (
21 |     <ul className=''>
22 |       {response.data.map(todo => {
23 |         return (
24 |           <li
25 |             className='flex justify-between items-center bg-gray-100 py-2 px-3 rounded-md space-x-2 my-1'
26 |             key={todo.id}
27 |           >
28 |             <p className='flex-grow'>{todo.title}</p>
29 | 
30 |             <button
31 |               className='text-white bg-green-600 px-2 py-1 rounded text-sm hover:line-through cursor-pointer hover:text-black'
32 |               onClick={() =>
33 |                 updateMutation.mutate(
34 |                   { id: todo.id, isCompleted: !todo.isCompleted },
35 |                   { onSuccess: () => trpcContext.todo.list.invalidate() }
36 |                 )
37 |               }
38 |             >
39 |               {todo.isCompleted ? 'Complete' : 'Incomplete'}
40 |             </button>
41 | 
42 |             <button
43 |               onClick={() =>
44 |                 deleteMutation.mutate(
45 |                   { id: todo.id },
46 |                   {
47 |                     onSuccess: () => {
48 |                       trpcContext.todo.list.invalidate()
49 |                     },
50 |                   }
51 |                 )
52 |               }
53 |               className='text-red-500 hover:text-white hover:bg-red-500 p-1 rounded'
54 |             >
55 |               <svg
56 |                 xmlns='http://www.w3.org/2000/svg'
57 |                 fill='none'
58 |                 viewBox='0 0 24 24'
59 |                 strokeWidth={1.5}
60 |                 stroke='currentColor'
61 |                 className='w-6 h-6 '
62 |               >
63 |                 <path
64 |                   strokeLinecap='round'
65 |                   strokeLinejoin='round'
66 |                   d='M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0'
67 |                 />
68 |               </svg>
69 |             </button>
70 |           </li>
71 |         )
72 |       })}
73 |     </ul>
74 |   )
75 | }
76 | 


--------------------------------------------------------------------------------
/packages/client/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/packages/server/tsconfig.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "compilerOptions": {
  3 |     /* Visit https://aka.ms/tsconfig to read more about this file */
  4 | 
  5 |     /* Projects */
  6 |     // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
  7 |     // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
  8 |     // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
  9 |     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
 10 |     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
 11 |     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 12 | 
 13 |     /* Language and Environment */
 14 |     "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 15 |     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
 16 |     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
 17 |     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 18 |     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 19 |     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
 20 |     // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
 21 |     // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
 22 |     // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
 23 |     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
 24 |     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 25 |     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 26 | 
 27 |     /* Modules */
 28 |     "module": "commonjs" /* Specify what module code is generated. */,
 29 |     "rootDir": "./src" /* Specify the root folder within your source files. */,
 30 |     "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
 31 |     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
 32 |     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
 33 |     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
 34 |     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
 35 |     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
 36 |     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
 37 |     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
 38 |     // "resolveJsonModule": true,                        /* Enable importing .json files. */
 39 |     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 40 | 
 41 |     /* JavaScript Support */
 42 |     // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
 43 |     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
 44 |     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 45 | 
 46 |     /* Emit */
 47 |     // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
 48 |     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
 49 |     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
 50 |     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
 51 |     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
 52 |     "outDir": "./build" /* Specify an output folder for all emitted files. */,
 53 |     // "removeComments": true,                           /* Disable emitting comments. */
 54 |     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
 55 |     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
 56 |     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
 57 |     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
 58 |     // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
 59 |     // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
 60 |     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
 61 |     // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
 62 |     // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
 63 |     // "newLine": "crlf",                                /* Set the newline character for emitting files. */
 64 |     // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
 65 |     // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
 66 |     // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
 67 |     // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
 68 |     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
 69 |     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 70 | 
 71 |     /* Interop Constraints */
 72 |     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
 73 |     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
 74 |     "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
 75 |     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
 76 |     "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 77 | 
 78 |     /* Type Checking */
 79 |     "strict": true /* Enable all strict type-checking options. */,
 80 |     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
 81 |     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
 82 |     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
 83 |     // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
 84 |     // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
 85 |     // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
 86 |     // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
 87 |     // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
 88 |     // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
 89 |     // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
 90 |     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
 91 |     // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
 92 |     // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
 93 |     // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
 94 |     // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
 95 |     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
 96 |     // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
 97 |     // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
 98 | 
 99 |     /* Completeness */
100 |     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
101 |     "skipLibCheck": true /* Skip type checking all .d.ts files. */
102 |   },
103 |   "include": ["./src"]
104 | }
105 | 


--------------------------------------------------------------------------------