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

What would you use for a global state management? - Initalization from API needed

Hello, So long story short, I would like to have a global state management for my advertisements and want to display in multiple components(maybe even in the sidebar). This ads can have dynamic styling(like row-span-2, col-span-2 in a grid case). The initial advertisements should come from server so the initialization need to be a fetch call (or something else). What do you guys would recommand? My approach with Zustand failed(I'm still trying). This state should have a nextAdId too, which represents which ad should be rendered next. Thanks...
Solution:
I think this logic would ideally not be in a frontend at all. Basically you'd have endpoints like getSidebarAds, getSliderAds, and for the grid that's dynamic, it'd be something like getContent which would return an array of objects with type: "item" | "ad". You could then use this array to render either BusinessCard or Advertisement. And if you can handle it on BE, you can just look at all the available ads, and ensure these endpoints don't return duplicates....

Mobx-state-tree action is undefined when passed to onPress

Link to full code of current branch With mobx-state-tree, can you not use actions as functions for onPress? Error on ExpoGo: Uncaught Error player.removeLifePoints is not a function (it is undefined) ```...
Solution:
Okay, I’ve got it working. I needed to switch back to passing the player using player={player} and then set up the typing for the props using interface. ``` interface AddLifePointsButtonProps { player: Player }...

Expo Router APIs

I am deciding what’s the best way to set up APIs for my project. My app calls external urls however I don’t want to use fetch directly in frontend components. Goal was to have a utility function to call a route that I set up in the app/ folder then take care of processing all that on the server side. Not sure if it’s just redundant coding. And also since I’m calling external urls how should I export the basic get post etc?

Uploadthing 403 Forbidden Error in Production (vercel)

Hi guys, Please does anyone know how to fix the 403 error in uploathing that shows up in production? Everything seems to work fine in development, but for some reason it doesn't in production....
No description

How can we implement the /user/month plan for team.

I have read the usage based pricing but when I try to implement it, It takes the payment of $0. But team has already 1 member it, so how can I do that? Any help would be recommended. Currently I have normal sub plan and every new team invite it increases the quantity added to stripe sub....

New product

Hey I need to guide a new product, web app, little recap with question backend -> go/rust i'm enough confident frontend -> no experience, react or svelte? infra -> aws, pulumi or terraform? ...

If you are using NextAuth, how are you accessing Auth data in Client Components?

For those using the create-t3-app, let's say we add a collapsible sidebar and in that sidebar we have navigation links, but also at the bottom we would like to include the logged in user information (Name and Email). How do you achieve this?: 1. Passing a server component through children into a client component?...

Have you experienced your Next.js getting hacked?

Has anyone experienced their Next.js website getting hacked? I'm curious because my own website has never been hacked, while my clients' WordPress-based websites on the same server often get hacked, mostly for "spam advertising" purposes. I think this might be due to malware on the server or session hijacking. If you have any experience with hacks on a Next.js website, what kind of attacks did you encounter? I never thought about this possibility....

Does saving files incur a cost on Vercel?

So I need to chunk out large audio files(20-50mb) that are uploaded to my website, and break those out into 10 min chunks. I wrote the following snippet to do that ```ts async function fetchAndChunkAudio(url: string): Promise<string[]> { const response = await fetch(url);...

Dynamic breadcrumbs

In my app, you can only access a project on the route /projects/:projectId. You can get to this route from /customers/:customerId and from /projects. I want the breadcrumbs in /projects/:projectId to show which path I actually came from so that the navigation makes sense....

Using creat-t3-turbo with vercel/postgres as my db, has anyone successfully containerized postgresQL

I am trying to run vercel/postgres essentially locally I have a docker-compose.yml file that runs an instance of Postgres but keep getting '@vercel/postgres' can only connect to remote Neon/Vercel Postgres/Supabase instances through a WebSocket has anyone found a guide on how I can have a local instance working with their drizzle config? I tried these guides with no success: https://gal.hagever.com/posts/running-vercel-postgres-locally https://github.com/vercel/storage/issues/123...

After logged in, how to redirect users back to the same URL they were before logging in?

My app sells event tickets and I'm using NextAuth. Unauthenticated users can go as far as selecting an event and then selecting the tickets they want. Once the ticket is selected, the "continue" button leads the user to "/tickets/register". In that page I verifiy if the user is authenticated. ...
Solution:
Redirect them with them the callback url in the query parameter and use that on signIn? signIn({credentials, callbackUrl: url})...

Modern React Tutorial @ 32:00

I can't figure out how fix this error: Error: Cannot set properties of undefined (setting '1184') Adding this line:...
No description

Any recommendations for icon packs for web?

The type I could use for commercial purposes. Ideally free, or one with a perpetual license that's reasonably priced. Something fairly general.
Solution:
heroicons, phosphor

Vercel: Error: Invalid environment variables

I'm at a loss, y'all. Please help. My .env has each kv pair like KEY="variable". They have all been added to Vercel, too.
the error is below...
Solution:
The solution was to import from the .env file instead of copy-pasting from it.

How to create 4 button in CSS

I want to create four buttons like this using html and css. I also want the text on the button but text shouldn't change the width of buttons
No description

I'm using t3-app generator for a Prisma, NextJS based trpc app.

i was wondering how does localhost:3000/api/trpc/posts/ work? I'm unable to call those example post apis that come along autogenerated.

From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more) Issue

I am following along with the From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more) and when I deploy to Vercel, it returns with a 404 error, yet my local displays the basic page. This is early in the video - 12:38. I am not quite sure where the disconnect is.

uploadthing error

I got an error when I deployed the web to vercel and got an error but locally it doesn't work, can anyone help me? and And when I look at the log on vercel, I get error 500 Internal Server Error...
No description

useLayoutEffect vs useEffect (with a setTimeout)

I am conditionally rendering a list of input elements. I want to give the first element focus when they are rendered. I added refs to the inputs and a useEffect where I focus on the respective ref (when the change happens). Adding refs to the input - ``` // inside the map...