{"id":29313682,"url":"https://github.com/kishornaik/trpc_demo_server_client","last_synced_at":"2026-04-09T21:53:39.685Z","repository":{"id":302858093,"uuid":"1013717347","full_name":"KishorNaik/trpc_demo_server_client","owner":"KishorNaik","description":"tRPC is a modern framework for building fully type-safe APIs without needing to define schemas or generate code. It allows you to call backend procedures from your frontend with full TypeScript inference—no REST, no GraphQL, no boilerplate.  With tRPC, your API becomes a natural extension of your codebase. ","archived":false,"fork":false,"pushed_at":"2025-07-04T11:56:36.000Z","size":264,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-04T13:00:50.059Z","etag":null,"topics":["expressjs","nextjs","trpc","trpc-client","trpc-server","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KishorNaik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-04T10:54:03.000Z","updated_at":"2025-07-04T11:58:54.000Z","dependencies_parsed_at":"2025-07-04T13:55:00.700Z","dependency_job_id":null,"html_url":"https://github.com/KishorNaik/trpc_demo_server_client","commit_stats":null,"previous_names":["kishornaik/trpc_demo_server_client"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KishorNaik/trpc_demo_server_client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KishorNaik%2Ftrpc_demo_server_client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KishorNaik%2Ftrpc_demo_server_client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KishorNaik%2Ftrpc_demo_server_client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KishorNaik%2Ftrpc_demo_server_client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KishorNaik","download_url":"https://codeload.github.com/KishorNaik/trpc_demo_server_client/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KishorNaik%2Ftrpc_demo_server_client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279007602,"owners_count":26084334,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expressjs","nextjs","trpc","trpc-client","trpc-server","typescript"],"created_at":"2025-07-07T10:08:13.510Z","updated_at":"2025-10-11T15:41:08.659Z","avatar_url":"https://github.com/KishorNaik.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎯TRPC Demo\n\n## 📌 Overview: What is tRPC?\n[tRPC](https://trpc.io/) is a modern framework for building fully type-safe APIs without needing to define schemas or generate code. It allows you to call backend procedures from your frontend with full TypeScript inference—no REST, no GraphQL, no boilerplate.\n\nWith tRPC, your API becomes a natural extension of your codebase. You define procedures on the server, and the client gets instant access to them with full autocomplete, validation, and type safety.\n\n## ❗ The Problem\nTraditional API development often involves:\n- ❌ Duplicated types between backend and frontend\n- ❌ Manual schema definitions (OpenAPI, GraphQL SDL)\n- ❌ Code generation steps that break or go stale\n- ❌ Lack of type safety across the network boundary\n\n## ✅ Benefits\n- ✅ End-to-End Type Safety Define your input/output types once on the server—your client gets them automatically.\n- ✅ No Code Generation Unlike GraphQL or OpenAPI, tRPC doesn’t require any build steps or generated clients.\n- ✅ Developer Velocity Call backend procedures like local functions. No need to remember routes or payload shapes.\n- ✅ Zod Integration Use Zod for runtime validation and schema inference—perfect for robust APIs.\n- ✅ Modular \u0026 Scalable Routers can be composed, namespaced, and federated easily—ideal for microservices or modular monoliths.\n- ✅ Framework Agnostic Works with Express, Fastify, Next.js, and more.\n\n## 📦 Project Setup\n- Clone the Repository\n```bash\ngit clone \u003cyour-repo-url\u003e\ncd \u003cyour-project-directory\u003e\n``` \n- 🧰 Setup `util` Service\n    - Install dependencies:\n    ```bash\n    npm i\n    ```\n    - Build the utility package:\n    ```bash\n    npm run build\n    ```\n    - Link the package:\n    ```bash\n    npm link\n    ```\n- 🌐 Setup `api` Service\n    - Move into the api solution and create an .env file:\n    ```bash\n    NODE_ENV=development\n    PORT=3001\n\n    # Logging\n    LOG_FORMAT=dev\n    LOG_DIR=logs\n\n    # CORS Config\n    ORIGIN=*\n    CREDENTIALS=true\n\n    # Rate Limiter\n    RATE_LIMITER=1000\n    ```\n    - Install dependencies:\n    ```bash\n    npm i\n    ```\n    - Link the `util` package:\n    ```bash\n    npm link \u003cutilurl\u003e\n    ```\n    - Build the Api service:\n    ```bash\n    npm run build\n    ```\n    - Run the API in development mode:\n    ```bash\n    npm run dev\n    ```\n- 🌐 Setup `client` NextJs App\n    - Install dependencies:\n    ```bash\n    npm i\n    ```\n## 🚀 Generating and Sharing tRPC Types\nTo enable full end-to-end type safety between your Express.js API and your Next.js frontend, we generate a .d.ts file that exports the AppRouter (or TRPCAppRouter) type. This allows the frontend to infer all procedure inputs and outputs without duplicating logic.\n- 📦 Step 1: Generate the Type Definition\nAPI project root, run:\n```bash\nnpm run trpc:type\n```\nThis command uses dts-bundle-generator to extract only the type information from your tRPC router and outputs it to the trpc-types folder.\n\n📁 Output: trpc-types/TRPCAppRouter.d.ts\n- 📁 Step 2: Copy the Type to the Next.js App\nManually copy the generated file into your Next.js project:\n```bash\ncp trpc-types/TRPCAppRouter.d.ts ../nextjs-app/src/trpc/types/\n```\nYou can automate this step in CI/CD or with a postbuild script if needed.\nNow frontend has full IntelliSense, type inference, and safety when calling backend procedures—without needing a monorepo or runtime dependency on the API codebase.\n\n## 🧩 Source Code\n- Server\n    - TRPC Config\n        https://github.com/KishorNaik/trpc_demo_server_client/blob/main/api/src/config/trpc/index.ts\n    - Demo\n        https://github.com/KishorNaik/trpc_demo_server_client/tree/main/api/src/modules/trpcDemo\n    - Merge Route\n        https://github.com/KishorNaik/trpc_demo_server_client/blob/main/api/src/modules/app.Module.ts\n    - init tRPC Router\n        https://github.com/KishorNaik/trpc_demo_server_client/blob/main/api/src/app.ts#L61\n    - Run trpc Router\n        https://github.com/KishorNaik/trpc_demo_server_client/blob/main/api/src/server.ts#L19\n    - Generate type using trpc:type script\n        https://github.com/KishorNaik/trpc_demo_server_client/blob/main/api/trpc-types/TRPCAppRouter.d.ts\n\n- Client\n    - Copy trpc type to nextjs\n        https://github.com/KishorNaik/trpc_demo_server_client/blob/main/client/trpc/types/TRPCAppRouter.d.ts\n    - setup client\n        https://github.com/KishorNaik/trpc_demo_server_client/blob/main/client/trpc/index.ts\n    - demo Page\n        https://github.com/KishorNaik/trpc_demo_server_client/blob/main/client/app/demo/page.tsx\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkishornaik%2Ftrpc_demo_server_client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkishornaik%2Ftrpc_demo_server_client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkishornaik%2Ftrpc_demo_server_client/lists"}