Theo's Typesafe Cult

TTC

Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join

How to pass data (input) along with multi-file uploads?

I have my uploader configure to allow multiple image uploads; I really need to send an id along with each file to update the db onUploadComplete. Since startUpload takes an array of files, I figured I should also send an array of ids Here's the simplified setup: ...
Solution:
This is something we actually do not handle super well right now. You can change files customId in middleware though

How to handle Download request authorization with uploadthing?

I am reading through the documentation and I can see that I can create signed URLs to download private files. However, I am wondering how people handle authorization for this. For instance if I have a NextJs server action ( like getSignedUrl(fileUrl)) that returns a signed URL if I send it a file URL, how can I tell whether the user is authorized to see this file? I would have to encode some kind of data in the file URL, which I can then decode in the getSignedUrl(fileUrl) server action in order...

How to call TRPC query from function instead of inside the react component itself.

So essentially I have a trpc query like this const {data} = await trpc.events.getRSVPsByUser.useQuery(userId); however I do not want this query to execute the moment that the page loads, I want to wait until a button is pressed for it, similarly to the way that useMutation works...

Looking for Developer

looking for a developer to help me build an app (only the base) with the following technologies: Next.js, TypeScript, Tailwind CSS, PostgreSQL, Drizzle ORM, Better Auth, pnpm, ESLint, Prettier, React Hook Form, Radix UI, Shadcn/Ui. Crypto payments only...

Best way to handle min width/height in uploadthing route input?

I am having trouble following https://docs.uploadthing.com/file-routes#input and https://docs.uploadthing.com/getting-started/appdir to add an input in my route where I deny images that have a width or height less than X (enforce a min width/height). I tried something like this, but that doesn't seem to work: ```...

Handling Async Params and Suspense Queries in a T3 Stack Next.js App

I'm having issues with fetching data for my story/[storyId]/page.tsx component. ```ts 'use client' import { notFound } from "next/navigation";...

Is there a way to use useQuery in server actions?

My aim here is to get all of the properties that useQuery (via trpc) provides - loading, error, onSuccess for mutations, etc - returned from my server action so that I can reflect that in UI updates. I'm not entirely sure what the difference in use is between next server actions and trpc's server-side api, to be honest. They seem to have a lot of overlap This is my server action:...

Bug occured while initializing t3-turbo with bun as package manager.

How can use bun as a run time and also as a package manager with t3-turbo?
No description

Tailwindcss looks weird after @uploadthing/react/styles.css

https://docs.uploadthing.com/getting-started/appdir#add-upload-things-styles I have completed all the steps in the documentation but there are still problems with my project. The styles of my project are all messed up. Any solution? versions: ```...

How can we handle transferable={false} with Clerk elements while building custom UI?

import { SignIn } from "@clerk/nextjs"; export default function Page() { return ( <div className="w-full min-h-screen flex items-center justify-center">...

Error: cannot find package in yarn PnP

I’m working on a Yarn v3 workspace using Plug’n’Play (PnP) for package management, and I’m encountering a module resolution issue when running my server When I try to start my development server using nodemon, I get the following error: node:internal/modules/run_main:122...

Revalidation for data using next.js 15 route handlers

I've developed an application using Next.js 15, utilizing API routes for the backend. However, I'm encountering an issue where, after posting data, the new information only appears upon manually refreshing the page. Despite looking at official documentation, watching tutorials, and reading articles, I haven't found a solution. I'm beginning to think that to achieve active refresh upon table updates, I might need to use Server Actions instead of API route handlers, since whereever I looked at for revalidation, everyone was using server components. // DataTable.tsx ```typescript useEffect(() => {...

Request url has trailing slash before query params depending on params order

Encountered a very strange issue, I am not sure if it is related to axios or something else so I'll try to find help here. I am using a custom useQuery wrapper and custom axios instance for fetching data: ``` const listUsers = usePaginatedQuery({...

How do I check video metadata in frontend without using any packages that requires NodeJS.

How do I check video metadata in frontend without using any packages that requires NodeJS. I need a full fledged frontend solution.

The image is stored on UploadThing but it doesn't return the url

Hello everyone, Locally, everything works correctly, including image uploads, but in production, it's not the case. Could this be due to a Cloudflare block? Is there something additional that I'm missing? The API runs on Next.js....
No description

Google Docs Clone Tech Stack

I've been thinking about creating a Google Docs clone with Google Classroom integration. However, I’ve never built a full-stack app before—only Chrome extensions and frontend websites using TypeScript and Svelte. I'm curious about what tech stack people would recommend. I watched Theo’s video, "I Built the Same App with 5 Different Stacks," and have been learning a lot about Elixir. However, I’m unsure if the potential scalability benefits are worth learning an entirely new language. Would learning Elixir be useful for development when my main goal is to land a job? I imagine most companies primarily use a full TypeScript stack. I'm open to learning a new language, but I don’t want to invest time in Elixir only to find that I never actually use it in a job....

Redux Optimistic update

hey guys i am making a desktop app with electron, i wanna ask regarding how u keep the states synced between sqlite and redux ( or any state management lib ) rn what i m doing is doing optimistic updates on (optimistic update bts put it in the queue) ``` dispatch(addOptimisticWorkspace({workspace:newWorkspac})...

which SaaS is used to make this https://docs.uploadthing.com/

I am looking forward to know which documentation saas or open source application has been used to create this documentation like we are looking forward to migrate from intercom and I liked this and couple of other companies like https://docs.erxes.io/ is also using similar but I am unable to findout which is it? Please if anybody knows share the name of saas or opensource application

Stream Closed, but I'm getting my results

So I have this procedure that simply returns a list of objects from db: ```js getAllHabits: protectedProcedure.query(({ ctx }) => { if (!ctx.session.user.id) return []; // return [] const userId = ctx.session.user.id;...

Mac: Disable window resize when moving mouse pointer to right edge of screen

Hey mac users, do any of ya'll have a solution for this? Like maybe an external app / github repo or something?
No description