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.
-
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.
-
-
start-ui-web
🚀 Start UI [web] is an opinionated UI starter with 🟦 TypeScript, ⚛️ React, ⚫️ NextJS, ⚡️ Chakra UI, 🟦 tRPC, ▲ Prisma, 🏖️ TanStack Query, 📕 Storybook, 🎭 Playwright,📋 React Hook Form,◽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.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
Cal.com is an open-source event-juggling scheduler for everyone, and is free for individuals.
And he does have a point here. So far, solutions like Blitz, Redwood, Adonis, or T3 haven’t managed to secure the popularity in their ecosystem that Rails or Laravel have in theirs.
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.
The ZenStack toolkit I’m building on top of Prisma aims to narrow down the gap further. It adds an Authorization layer on top of the schema and then automatically generates both APIs and frontend hooks for you. So, put simply, once you're done with your schema, you're almost done with your backend. You can then choose whatever frontend framework, like React, Vue, or Svelte, to get your UI done.
Project mention: I revived TypeScript RPC framework for WebSocket (+NestJS) and Worker protocols from 8 years ago. | dev.to | 2024-05-18/** * @packageDocumentation * @module api.functional.calculate * @nestia Generated by Nestia - https://github.com/samchon/nestia */ //================================================================ import type { IConnection, Primitive } from "@nestia/fetcher"; import { PlainFetcher } from "@nestia/fetcher/lib/PlainFetcher"; import { WebSocketConnector } from "tgrid"; import type { Driver } from "tgrid"; import type { ICalcConfig } from "../../interfaces/ICalcConfig"; import type { ICalcEventListener } from "../../interfaces/ICalcEventListener"; import type { ICompositeCalculator } from "../../interfaces/ICompositeCalculator"; import type { IScientificCalculator } from "../../interfaces/IScientificCalculator"; import type { ISimpleCalculator } from "../../interfaces/ISimpleCalculator"; import type { IStatisticsCalculator } from "../../interfaces/IStatisticsCalculator"; /** * Health check API (HTTP GET). * * @controller CalculateController.health * @path GET /calculate/health * @nestia Generated by Nestia - https://github.com/samchon/nestia */ export async function health(connection: IConnection): Promise { return PlainFetcher.fetch(connection, { ...health.METADATA, path: health.path(), }); } export namespace health { export type Output = Primitive; export const METADATA = { method: "GET", path: "/calculate/health", request: null, response: { type: "application/json", encrypted: false, }, status: null, } as const; export const path = () => "/calculate/health"; } /** * Prepare a composite calculator. * * @controller CalculateController.composite * @path /calculate/composite * @nestia Generated by Nestia - https://github.com/samchon/nestia */ export async function composite( connection: IConnection, provider: composite.Provider, ): Promise { const connector: WebSocketConnector< composite.Header, composite.Provider, composite.Listener > = new WebSocketConnector(connection.headers ?? ({} as any), provider); await connector.connect( `${connection.host.endsWith("/") ? connection.host.substring(0, connection.host.length - 1) : connection.host}${composite.path()}`, ); const driver: Driver = connector.getDriver(); return { connector, driver, }; } export namespace composite { export type Output = { connector: WebSocketConnector; driver: Driver; }; export type Header = ICalcConfig; export type Provider = ICalcEventListener; export type Listener = ICompositeCalculator; export const path = () => "/calculate/composite"; } /** * Prepare a simple calculator. * * @controller CalculateController.simple * @path /calculate/simple * @nestia Generated by Nestia - https://github.com/samchon/nestia */ export async function simple( connection: IConnection, provider: simple.Provider, ): Promise { const connector: WebSocketConnector< simple.Header, simple.Provider, simple.Listener > = new WebSocketConnector(connection.headers ?? ({} as any), provider); await connector.connect( `${connection.host.endsWith("/") ? connection.host.substring(0, connection.host.length - 1) : connection.host}${simple.path()}`, ); const driver: Driver = connector.getDriver(); return { connector, driver, }; } export namespace simple { export type Output = { connector: WebSocketConnector; driver: Driver; }; export type Header = ICalcConfig; export type Provider = ICalcEventListener; export type Listener = ISimpleCalculator; export const path = () => "/calculate/simple"; } /** * Prepare a scientific calculator. * * @controller CalculateController.scientific * @path /calculate/scientific * @nestia Generated by Nestia - https://github.com/samchon/nestia */ export async function scientific( connection: IConnection, provider: scientific.Provider, ): Promise { const connector: WebSocketConnector< scientific.Header, scientific.Provider, scientific.Listener > = new WebSocketConnector(connection.headers ?? ({} as any), provider); await connector.connect( `${connection.host.endsWith("/") ? connection.host.substring(0, connection.host.length - 1) : connection.host}${scientific.path()}`, ); const driver: Driver = connector.getDriver(); return { connector, driver, }; } export namespace scientific { export type Output = { connector: WebSocketConnector; driver: Driver; }; export type Header = ICalcConfig; export type Provider = ICalcEventListener; export type Listener = IScientificCalculator; export const path = () => "/calculate/scientific"; } /** * Prepare a statistics calculator. * * @controller CalculateController.statistics * @path /calculate/statistics * @nestia Generated by Nestia - https://github.com/samchon/nestia */ export async function statistics( connection: IConnection, provider: statistics.Provider, ): Promise { const connector: WebSocketConnector< statistics.Header, statistics.Provider, statistics.Listener > = new WebSocketConnector(connection.headers ?? ({} as any), provider); await connector.connect( `${connection.host.endsWith("/") ? connection.host.substring(0, connection.host.length - 1) : connection.host}${statistics.path()}`, ); const driver: Driver = connector.getDriver(); return { connector, driver, }; } export namespace statistics { export type Output = { connector: WebSocketConnector; driver: Driver; }; export type Header = ICalcConfig; export type Provider = ICalcEventListener; export type Listener = IStatisticsCalculator; export const path = () => "/calculate/statistics"; }
Project mention: Step CI – open-source API test automation framework | news.ycombinator.com | 2024-03-28
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.
Just reading these points makes all my alarm signals go off and scream: Complexity!! Don't get me wrong, every once in a while I like a technical challenge (like building spartan/ui), but this just seems like an absolute nightmare to deal with...
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.
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 | 1 Jun 2024
Index
What are some of the best open-source trpc projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | cal.com | 29,197 |
| 2 | create-t3-app | 23,691 |
| 3 | noodle | 11,414 |
| 4 | create-t3-turbo | 4,125 |
| 5 | trpc-openapi | 2,050 |
| 6 | zenstack | 1,730 |
| 7 | nestia | 1,651 |
| 8 | stepci | 1,543 |
| 9 | start-ui-web | 1,312 |
| 10 | garph | 1,292 |
| 11 | spartan | 978 |
| 12 | trpc-sveltekit | 731 |
| 13 | examples-next-prisma-starter | 676 |
| 14 | prisma-trpc-generator | 658 |
| 15 | create-jd-app | 651 |
| 16 | trpc-nuxt | 623 |
| 17 | cascade | 469 |
| 18 | railtrack | 345 |
| 19 | fuseai | 289 |
| 20 | next-lucia-auth | 293 |
| 21 | electron-trpc | 214 |
| 22 | shopify-node-app-starter | 173 |
| 23 | t3-twitter-clone | 172 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com