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

Omegle clone saving socket ids

Hi everyone. I’m currently trying to make an Omegle Clone using NodeJS and React. For this, it’s important that random people are being matched with each other. I’m doing this by just randomly selecting two socket ids and have them communicate with each other automatically to eventually establish a video connection (through WebRTC) One thing I was originally doing was having an array in my server.js to store all socket ids. However, if I were to deploy this application, what would be the best way to implement saving these socket ids? I was thinking about using Redis, but I’m not sure what that would look like in this case....

Prisma cant find ENV variable in turbo repo

@acme/db:db:push: error: Environment variable not found: DATABASE_URL.
@acme/db:db:push: --> schema.prisma:10
@acme/db:db:push: |
@acme/db:db:push: 9 | provider = "mysql"
@acme/db:db:push: 10 | url = env("DATABASE_URL")
@acme/db:db:push: error: Environment variable not found: DATABASE_URL.
@acme/db:db:push: --> schema.prisma:10
@acme/db:db:push: |
@acme/db:db:push: 9 | provider = "mysql"
@acme/db:db:push: 10 | url = env("DATABASE_URL")
...

Pusher integration

Hi this procedure is going to send out either video saved or video is saving. when it is saving it activates a while loop. everytime i console.log on line 160 i want to send out progress update at the beginning of every while that is a number representing percent completed. how do i set up a websocket to send a number everytime the while loop restarts? does anyone have good resources for learning how to integrate pusher with t3 stack...

ESLint rule for not passing type into useState?

Hey guys, is there a ESLint rule I can enable to give me a error when Im not passing a type into useState? I thought this would have been standard, so maybe this isn't the correct pattern, but I would have thought best practice would be to enforce type declaration on state? Example: ```js const [prevBtnEnabled, setPrevBtnEnabled] = useState<boolean>(false); const [nextBtnEnabled, setNextBtnEnabled] = useState(false);...

helpful tips to prepare for deploying/launching an app?

i've been working on an app for a few months now, and i'm getting ready to release it, just wondering if anyone has any tips/blog posts/etc. that were helpful to them when doing this. currently i've been in 'move-super-fast' mode, so im not really following any good conventions for working on a properly deployed app (i have one hosted db and im using it for dev and on the live site, for example). obviously this is kind of vague, but in the past ive run into issues where the app breaks on everybody and i have to rush to fix it, so any advice on this would be awesome. some things im wondering: handling databases for prod vs dev, oauth apps in prod vs dev (callback urls have to be different), prod vs staging branches, etc etc. thanks!...

Use State and metadata API in the same component (next 13 app dir)

I have a component that's marked with "use client", because I also want to use useState but I also want to set some metadata on it, so I added this: ``` export const metadata: Metadata = { title: "Name", description: "Securing your success!",...

trpc global onError

i have trpc middleware logic that throws a code UNAUTHORIZED error if a user is not authenticated. when a trpc call happens i want to redirect the user to /login if they're unauthorized. i could add the redirect logic to all the api calls using onError, but wondering if there's an easier way to do this in one place

CLI and web UI communication

Hello guys! I'd like to build a tool (Rust / TS) that will serve NextJS / Vite + React website and then receive events and data from that website: you click something on the served website and the CLI receives the event. Is that possible with some package? Where can I find information about some kind of approach that would allow me to do it?...

Database structure for contacts in a CRM?

Let's say one is building a CRM and working on the database. Initially I thought each contact would be an entry in the contacts schema and every user who has that contact's email will have access to that entry. So anyone who adds bob.smith@gmail.com the db will query for that email and pull that data up. But then I need the ability to change that contact's data for that specific user. Say if they wanted to change their name or address or add a tag for that user. It doesn't make sense to update it for everyone, only this user, so then I'm thinking... okay maybe there are alt fields where different users can have custom key value pairs. So this contact schema will have a key and an array for custom values with the key being the userId. So something like... {name: [{user321: "bob"}, {user435: "bobby"}], } This is already sounding incorrect......

prisma transaction api

hi, so I figured I need to use the transaction api but I cant seem to get the syntax right. heres what im trying to do: I have a board model and column model, a board can have many columns. When creating a board, I'd want the user to also be able to create columns, so the problem is getting the created board's id to create the columns (need a ref to the board) and so I read about the transaction api but I keep running into problems and I am probably getting the syntax wrong. Would love some help!...

Zod naming convention

What is the best naming convention for zod? both capitalized const Object = z.object(...) type Object = z.infer<...>...

Posting to a (secret) webhook best practise

Hey I've got a question about the best way to try and solve this problem. I've got a discord webhook and a button that when pressed, sends a message to that webhook. The webhook URL is secret, and therefore stored in the environment variables, however, that means it's serverside only. My thoughts are either - ...

vercel next13 app-router: routing on prod is not clientside

I am having a weird issue. Invoking my local build with vercel dev all my routes in the header are client side navigations as they should be. But when I deploy to vercel the navigation is not clientside anymore and every navigation is a full page refresh. Has anyone some expertise with this issue and can help me out?...

Get a users id (snowflake) when signing in 0Auth

I am using the create-t3-app setup with nextAuth, prisma and tRPC After setting up the Discord env variables and making my login page, it seems that the id in the user field of the session data isn't my "actual" Discord ID It is clf2f3yvh0000v07off4kpi78 rather than 843312530528796697 I need access to this number because I want to only let certain ID's access the app....

React Hook Form: Number Input not respecting Min/Max values

```tsx <input {...register("fromAmount", { valueAsNumber: true, min: 5,...

Error after clean setup of T3-TURBO-CLERK

I have set up a t3-turbo-clerk app but I have a few problems after completing the setup. First the mobile app, I'm unable to fetch the example posts or add a post after login. I get this problem. And on the NextJS app I'm unable to login, after the callback it keeps loading....

ReactHookForm + ZOD: Validating against stateful values

Hi, I'm currently trying to build a currency conversion app as a personal project, I have an input form that allows a user to pick their desired currency to send/receive, when this choice happens I query an API which returns a MIN/MAX value to transact. ...

Is there an existing tailwind-react library to use?

I recently bought tailwindui, but I find it quite annoying to manually create a component for every single component, i.e. copy-pasting the html, then adding various props with 'class-variance-authority' etc. Is there a pre-existing tailwind react component library, where we can simply copy the existing .tsx files into our project? I feel like this would save a lot of time, while also having full control over the components themselves....

t3-stack tRPC ssr

Hey, I'm having trouble understanding how ssr works with t3 stack config. If I do trpc request inside component it makes it ssr by default? Do i understand it correctly? I haven't seen anyone using getServerSideProps so i assume it does? Can I read somewhere more details about that?

react-hydration-error using different browser?

I am trying a different browser right now called Sidekick, accessing my localhost returns this error: ```ts Error: Hydration failed because the initial UI does not match what was rendered on the server. ...