Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →
Top 23 TypeScript trpc Projects
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
-
zenstack
Typescript toolkit on top of Prisma ORM, offering flexible and declarative Access Control Policy(Authorization/Permission) for RBAC/ABAC/PBAC/ReBAC with auto-generated type-safe APIs and frontend hooks.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
start-ui-web
🚀 Start UI [web] is an opinionated UI starter with 🟦 TypeScript, ⚛️ React, ⚫️ NextJS, ⚡️ Chakra UI, 🟦 tRPC, ▲ Prisma, 🏖️ TanStack Query, 📕 Storybook, 🎭 Playwright, 🐜 Formiz◽From the 🐻 BearStudio Team
-
-
-
fuseai
Self-Hosted and Open-Source web app to interact with OpenAI APIs. Currently supports ChatGPT, but DALLE and Whisper support is coming.
-
-
shopify-node-app-starter
🚀🚀 A Shopify embedded app starter template, written in TypeScript with session storage, app context and examples for basic functionalities.
-
fullstack-starter-template
Template for full stack applications based on TypeScript, React, Vite, ChakraUI, tRPC, Fastify, Prisma, zod, etc.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
Cal.com is an open-source event-juggling scheduler for everyone, and is free for individuals.
Project mention: Deploy Full-Stack Next.js T3App with Cognito and Prisma using AWS Lambda | dev.to | 2024-04-15import { unstable_noStore as noStore } from "next/cache"; import Link from "next/link"; import { CreatePost } from "~/app/_components/create-post"; import { getServerAuthSession } from "~/server/auth"; import { api } from "~/trpc/server"; export default async function Home() { noStore(); const hello = await api.post.hello.query({ text: "from tRPC" }); const session = await getServerAuthSession(); return (
Create T3span> App h1>
First Steps →h3>
Just the basics - Everything you need to know to set up your database and authentication. div> Link>Documentation →h3>
Learn more about Create T3 App, the libraries it uses, and how to deploy it.div> Link> div>{hello ? hello.greeting : "Loading tRPC query..."}p>
{session && Logged in as {session.user?.email}span>} p> {session ? "Sign out" : "Sign in"} Link> div> div> div> main> ); } async function CrudShowcase() { const session = await getServerAuthSession(); if (!session?.user) return null; const latestPost = await api.post.getLatest.query(); return (
{latestPost ? (Your most recent post: {latestPost.name}p> ) : (
You have no posts yet.p> )} div> ); }
There is a (hillariously named) alternative noodle [1] that aims to compete in this space. It is under development but looks polished.
[1] https://noodle.run
Check out this starter repo https://github.com/t3-oss/create-t3-turbo I didn’t use it because it didn’t really fit my needs but it I’ve heard good things about it. May work for you
tRPC does not natively export OpenAPI documents, but the trpc-openapi package adds this functionality. We'll start this tutorial by adding trpc-openapi to a project, and then we'll add a script to generate an OpenAPI schema and save it as a file.
Project mention: I made "TypeScript Swagger Editor", new type of Swagger UI writing TypeScript code in the browser | dev.to | 2024-02-18For reference, if your backend application utilizes nestia (NestJS), you don't need to build the SDK (Software Development Kit) library by converting from the Swagger Documents. The nestia will automatically generate the much advanced SDK library, just by analyzing your backend application's source code.
Another strategy is to model access control declaratively and enforce it in the application layer. ZenStack (built above Prisma ORM) and Hasura are good examples of this approach. The following code shows how access policies are defined with ZenStack and how a secured CRUD API can be derived automatically.
Project mention: Step CI – open-source API test automation framework | news.ycombinator.com | 2024-03-28
Project mention: 🚀 Start UI [web] is an opinionated UI starter with ⚛️ React, ▲ NextJS, ⚡️ Chakra UI, ⚛️ TanStack Query & 🐜 Formiz | /r/nextjs | 2023-05-16
https://garph.dev is pretty good. I have been using it for two months and love the experience. I had started out with nexus and briefly also evaluted pothos but switched to garph because the dev experience was superior. It takes full advantage of the structural type system of typescript rather than frameworks that lean more towards java style idioms.
This article, the Hono docs, Elysia SvelteKit example, trpc-sveltekit and lot's of general reading.
Project mention: Is there a TS backend development environment similar to what I have for the frontend? | /r/typescript | 2023-07-08They have a lot of cool backend tools these days, but I'm not sure they're all what you're looking for exactly. tRPC is great for communicating with your backend, but you still need to use something like Express, or their Fetch support. Prisma is great for communicating with the database when you need simple CRUD functionality and whatnot, and if I remember correctly you can extend it if that's something you absolutely need. I just found recently in the Zod docs a generator library which takes your Prisma schema and generates Zod schemas, as well as writes your CRUD router based on your Prisma schema with tRPC. At that point, you'd just need to connect with your actual Express (or similar) server, and you're set. But all that said, tRPC has integrations with Nest, Express, even options for SSR, so if you want type-safe calls to the backend, it's a solid option. I also hear good things about Nest, if you're into the Angular-like experience. It really is up to you, there's a lot of options.
trpc-nuxt documentation - https://trpc-nuxt.vercel.app/
Project mention: Show HN: Cascade – open-source alternative to paid SaaS boilerplates | news.ycombinator.com | 2024-04-11
Project mention: How to use supabase auth with prisma? now that is supported | /r/Supabase | 2023-06-20I use Prisma along with Supabase auth in my OSS project: https://github.com/noahflk/railtrack
@iamtouha added Stripe support to their open-source Lucia auth and NextJS template.
Project mention: tRPC – Move Fast and Break Nothing. End-to-end typesafe APIs made easy | news.ycombinator.com | 2023-08-12Dropping in a tRPC use case that I've really got a lot of mileage out of: communication between the Electron main and renderer processes using https://github.com/jsonnull/electron-trpc. Traditional Electron IPC is hard to do type safely, which electron-trpc solves, and the react-query integration (meaning you get automatic type-safe hooks to issue the requests) is really nice.
I am using it for one of my projects (together with Fastify, Zod, Prisma). I also open sourced the starter template for it: https://github.com/Sairyss/fullstack-starter-template
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
TypeScript trpc related posts
- Using Hono with SvelteKit - Full type-safety with RPC
- Next JS or React Native for web version?
- Create Production-Ready SDKs for tRPC
- Good repo examples
- Build A Full-Stack Typescript Application with Nuxt and tRPC
- Noodle – The Open Source Education Platform
- Show HN: tRPC API boilerplate – separate BE-FE repositories
-
A note from our sponsor - InfluxDB
www.influxdata.com | 23 Apr 2024
Index
What are some of the best open-source trpc projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | cal.com | 28,546 |
| 2 | create-t3-app | 23,295 |
| 3 | noodle | 11,302 |
| 4 | create-t3-turbo | 3,951 |
| 5 | trpc-openapi | 1,987 |
| 6 | nestia | 1,606 |
| 7 | zenstack | 1,598 |
| 8 | stepci | 1,488 |
| 9 | start-ui-web | 1,286 |
| 10 | garph | 1,277 |
| 11 | trpc-sveltekit | 720 |
| 12 | examples-next-prisma-starter | 660 |
| 13 | prisma-trpc-generator | 656 |
| 14 | create-jd-app | 635 |
| 15 | trpc-nuxt | 615 |
| 16 | cascade | 411 |
| 17 | railtrack | 334 |
| 18 | fuseai | 289 |
| 19 | next-lucia-auth | 233 |
| 20 | electron-trpc | 206 |
| 21 | shopify-node-app-starter | 172 |
| 22 | t3-twitter-clone | 165 |
| 23 | fullstack-starter-template | 157 |
Sponsored
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com