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

Convert to webp before upload

I am building an admin page where I can update images and I don't want my client to upload no other image format than webp. I know how to convert images to webp and I have the utility function. How do I intercept the file being uploaded and convert it to webp before uploading? Also, how would I deal with a scenario where multiple images are uploaded ?

I'm done, really need to learn how to develop.

Hey everyone, I could use some help and guidance. I'm a computer science student with a background in C++, Rust, and Python, mainly focused on cybersecurity. However, I've realized I need to broaden my skills and learn modern web/app development. I've tried my hand at Python's Django framework and Rust's egui library, but struggled to grasp the concepts of actual development. Despite these attempts, I feel like I'm missing the fundamentals of building real-world applications. After hearing about TypeScript, I've decided to give it a shot and learn development in a more conventional way....

App crashes when TRPC error is thrown on the server

I've found an interesting situation while using TRPc with the T3 template on the server. If the Authentication middleware for the TRPC procedures throws an UNAUTHORIZED error if calling it on the server: ```ts import { api } from "~/trpc/server"; ...

why is `react-responsive` not updating darkmode consistently

I'm using react-responsive to make my PrismJS syntax highlighting (used by react-code-block here) switch themes depending on whether the system is in dark mode or not. However, for some reason, whenever I reload the page with dark mode enabled, dark mode isn't set and thus the app defaults to the light mode theme. Attached are screenshots showing the difference. Below is the relevant code: ```tsx...
No description

BUILD TypeCheck and Lint disabled

I’ve seen Theo disabling typecheck and eslint during the build process, which greatly improves the build time. How can I apply these steps in a separate workflow? What are the equivalent npm commands for running typecheck and eslint independently as they run during the build? Will these separate commands execute the same steps as during the build process, or are there any differences?

Huge memory usage spikes with uploadthing, seeking help on how to handle it.

Hey folks! I've just added uploadthing to my project that's currently being used by a small company. We agreed to use uploadthing for very simple photo management where you can add a picture and then set a URL in a database, to later display it. My base memory usage for the app was around 15- to 170mb, it spiked to 500mb for the night where the app is completely inactive, then it spiked to around 1 GB of constant usage. The peak was at 2GB. The photos are 10MB total so it's really not much....
No description

Retry Error

Hello I have been using uploadthing for a while it was working as I desired but soon I have been uploading videos and am being told "app-index.js:32 Something went wrong. Please contact UploadThing and provide the following cause: RetryError" Any one who can help I'll be truly grateful

Hey guys, weird question but am looking for suggestions.

Hey people! I am starting in web development, and need some suggestions on what technologies I should use for my project. The project idea is a Restaurant Management Platform...

Mongo Db Schema _id(ObjectId) in trpc get serializes to string

Hello there, In the mongoDB schema there is _id field with the type of ObjectId. But during serilization from trpc on the server its get converted to a string type. On the client the Mongo DB type gives a error that the _id type is string and not ObjectId. ...

Debugging node_modules in VS Code of a Next.js app

I'm trying to set breakpoints inside an installed package, but the breakpoints are unbound, since the dependencies are bundled with webpack. I'm using the following lauch.json taken from https://nextjs.org/docs/pages/building-your-application/configuring/debugging#debugging-with-vs-code ```json {...

Bad Request 400

I really couldn't fix this problem I am sure of all the api, secret code data is correct
No description

How to setup initial db and application configs?

There's either Supabase app I created or local Postgres instance but I couldn't figure out what to use here besides not finding any documentation about it. Can anyone point me out any useful hint or a link?

Use ReactQuery to fetch different api resource than trpc resource

I have an api endpoint which I can call using fetch. How one would re-use reactquery and call that endpoint directly. Do I need separate reactquery client?
Solution:
You should already have @tanstack/react-query installed as a dependency, you can just import useQuery from it, it will use the same query client as trpc

email client

Does anyone know what an email client is ? - I have been given a task to set up an email client on Amazon ec2 - i don't have an understanding of what an email client is - I thought it is used to send emails to logged in users of our website like remainder emails like that -but the CEO told me that we have separate emails for all our employees what does that mean ...

React Native

Hello, I am making a react native app. Can someone please point me in the right direction? I am making a signup screen that has several different screens that I will need to get info from in the signup process before creating that user. Is this a good use case for useContext?

Integrating AI assistant (fastapi/react) on the main website(laravel).

I’m currently developing a chatbot using FastAPI, LangChain, and React and am looking to integrate it into my Laravel application. I initially tried placing the React app’s build folder into Laravel’s public directory and created a route for it. While this approach works, I’ve encountered an issue: when navigating between routes, the chatbot also refreshes. This results in users having to wait for the chatbot to reload every time they switch routes, which is not ideal. Is there a better way to e...

Hello people, I need help with a bug that has paralyzed me in teamwork for a week and a half

Guys, I need help with a bug that has paralyzed me in teamwork for a week and a half, it has me fed up. I've had this error since I tried Angular JS and my permissions went crazy or who knows what, it won't let me do npm install...
No description

NextJS REST API storing authed User per request

Hello i am looking for a good way to store the current User per request on the backend with NextJS endpoints. I saw in terminals github the usage of node:asyncs_hooks wrapped by an Actor. I like that concept, but i think i dont need to have an AsyncLocalStorage.
Are the best practices to do that? could i just use a Map / an Object instead of the AsyncLocalStorage?...

SSE

Hey, I am looking for some assistance with Realtime updates in nextjs app router. I am uploading a file in my frontend and transcribe it. All is good and well, and I get a new item added to my file list when it is complete. But now, in the background, I am generating a summary for this file using ai, and I want to update the frontend when this is done. I have tried using Server Sent Events ( SSE ), but then my revalidatePath for other functionalities no longer worked....

"Expected an error object to be thrown." At From 0 to Production - The Modern React Tutorial

Hi, I was watching Theo's "From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more)" and at 55:35, he was implementing UploadThing to the app and I had an error at if (!user.userId) throw new UploadThingError("Unauthorized"); and I couldn't fix it. I am using VSCode's ESLint Plugin and it gave me this error....
No description