jonnyfapson Posts - Answer Overflow

jonnyfapson

•Created by jonnyfapson on 6/13/2023 in #questions

How to structure complex interfaces for multiple stakeholder?

This question is a bit hard to explain, and only relevant for larger applications, but I'll give it a shot. Explaination: I'm building an app, where Clients [C] can communicate with Videographers [V] and request those videographers to create videos for them (i.e. create a video about xyz). I also have an admin dashboard, where Admins [A], should be able to access this feedback process. Example: A Client creates a Job, a videographer uploads a Submission to this job, the client is then able to add multiple Comments to this job. The problem lies in the fact, that every stakeholder requires slightly different data, for example, admins may need additional fields, like which videographers where suggested / invited for an individual shooting (which the Vs shouldn't see). Right now I create various interfaces (return objects), for each of the stakeholders, which may extend each other, i.e. ShootingRo (base object) ClientShootingRo -> ShootingRo VGShootingRo -> ShootingRo AdminShootingRo -> ShootingRo Since I'm dealing with quite nested structures, I may define further interfaces, like: 'ClientCommentRo', 'AdminCommentRo'... etc. In order to keep the project organized, I'm thinking about creating a deliberate dependency structure, like this: - have the following folders: admin -> videographer -> client -> shared and only allow imports in the opposite direction of the arrow. What do you think about this structure, does it make sense? Or am I overthinking the issue?

2 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 3/19/2023 in #questions

Is there something like tailwind ui / headless ui for react native?

I'm a big fan of tailwindcss, but in order to speed up my process even more, I like to use something like tailwind ui with premade components, I can just copy + paste. Does something like that exist for react native, too?

6 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 3/9/2023 in #questions

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.

6 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 3/1/2023 in #questions

How to handle color codes in (medium-big) projects?

I recently purchased the tailwindui component library and it works amazing for small projects, as it allows me to quickly copy-and-paste components, which would take many hours design. But, right now I'm building my first bigger project with tailwind, with custom colors, fonts etc. What is the best way to manage different color codes with tw? I'm quite afraid of using codes like 'gray-100', as we may require a color change in the future, and going back and adjusting all the colors would be a nightmare (as 'gray-100' could be used in different contexts, with differnt intentions). My current approach would be to create variables for each available color, i.e. 'primary', 'primary-hover', 'surface', 'surface-contrast' etc. and let these point to some of the default tw colors, as I find the default choice of colors to be quite good. What are your experiences with this issue? Also: How do you handle replication, when using React? My current approach would be to simply create components, like 'Button', 'Modal' etc. and allow users to pass in props to customize them. Looking forward to your tips!

6 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 2/16/2023 in #questions

Is it secure to include the 'admin' api in the 'standard' trpc api?

I'm building a standard B2B app, which obviously has a trpc api. I'm looking to add an admin area, which allows me to manage the B2B customers. This will include tasks, like listing the customers' (confidential) data. Obviously the api route itself is going to be protected by authentication, but I still obviously wouldn't want normal users, to see which apis are exposed at which endpoint. Are the 'admin routes' automatically tree-shook, or would they be visible to the customers? And if they are, what would be the alternative?

11 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 2/16/2023 in #questions

Properly call trpc from state (Mobx, Zustand etc.)

I'm currently struggling to find the proper way to use trpc, to make an api call from a state management library such as MobX. I'm fully aware of react-query, but because of the complexity of my use-case I decided to use MobX for some routes. Because of the 'useQuery' function, I came up with this (ugly) code snippet:

async getData() {
const userRes = (await api.users.getMe.useQuery(undefined, {
      enabled: false
}).refetch())

if (userRes.error) {
    throw userRes.error
} else if (!userRes.data) {
    throw new Error('No data found.')
} else if (userRes.status !== 'success') {
    throw new Error('Status not success.')
}

const data = userRes.data

this.patchUser({
      ...data,
      isAuthenticated: true,
});

return data;

This seems like a very hacky solution, but the best I could come up with, would be wrapping each api call in a hof, which implements this logic to call the api. Is there a better way?

4 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 2/15/2023 in #questions

How to deal with more complex / repeating backend logic?

Sometimes, when developing an application, more complex situations occur. For example, I have a category, which is assignable to either a post or a user, with the post and user obviously being to different entities in the db. Let's say I want to use the post and user, populated with their assigned categories in the frontend. And let's also say, fetching a categories desired 'return object' is a bit complex, as additional joins with other tables need to happen, in order to populate some meta data. One way to solve this problem, would be to have the same category fetching logic in the post and user router. This however leads to code duplication. Another way would be to create a service, which is responsible for fetching a category and returning the 'return object', which is most likely wrapped in some sort of interface, so it is easier to reuse. I'm just thinking out loud, does anyone have some recommendations, to handle more complex business logic, without having to duplicate a lot of code? Do you recommend using a simple service pattern?

10 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 2/10/2023 in #questions

Concrete guide for Credentials Provider with T3 + Next auth?

I've been trying to implement the credentials provider with standard email + password authentication for this whole day. I haven't been able to get it to work, there are always errors like 'JWEDecryptionFailed: decryption operation failed'. I also haven't been able to find a proper tutorial explaining it with t3, there are existing tutorials for the credentials provider, but it is often difficult to peace everything together bit by bit. Given that 99% of webpages allow users to sign up with email + password, is there any existing Github repo you can recommend for this scenario?

7 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 2/8/2023 in #questions

How to automatically call 'prisma push'?

Hello, I just tried to deploy my first t3 app on vercel+railway, however everytime I called a route, which accesses the database I got the error: 'The table prisma.XYZ does not exist in the current database'. After reading up a bit, I realized, I needed to run 'npx prisma db push' first, to seed the database. Since this command doesn't seem to be run automatically, with the default config, and I obviously use a different db, when developing locally, when compared to actually publishing the code, I'm wondering how you people handle this problem of having to push the db schema first. Is there some established pattern?

2 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 2/7/2023 in #questions

Great next+tailwind landingpage for an app?

I'm looking to create a simple landingpage for my app using next.js + tailwind, however I'm struggling to find a good-looking (and preferably free) landingpage template for this stack. Most templates online use bootstrap or some other crap. Does anyone have some recommendations / resources?

5 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 1/18/2023 in #questions

Share components between Next.js and React Native?

Is it possible to share react components between Next.js and React Native? I'm aware of Solito, but is there some other established method?

1 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 1/16/2023 in #questions

How to create TikTok Style App with WebApp?

Hello, I'm looking to create a tiktok style app, meaning users can access videos on the web-app, but also download the app to access them there (keyword: deep-linking). The experience in the web-app is somewhat different (as you can see on the normal tiktok page, it wouldn't be fullscreen and there would be creator recommendations on the sides). With these considerations in mind, here are my thoughts: - Use create-t3-turbo to create a next + react native app - use trpc to connect the api routes - deploy on vercel and the postgres database to railway I'm feeling a bit iffi about this, as (from my understanding), I wouldn't be able to reuse any components between the next.js and react native apps. I also considered using solito, but from my experience it isn't quite ready for usable. Is there an efficient and established way to share components between next.js and react native? Or would you just go with react native web? I could imagine the react native (web) application getting a bit crowded, because there are a bunch of differences between the apps, but I'm open to having my mind changed.

1 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 1/13/2023 in #questions

Efficiently find slow queries?

Slow query performance is one of the leading bottlenecks for slow application performance. Is there any tool / library, which allows you to track down which exact queries, i.e. with reference to the code itself, similar to sentry, lead to a slow query performance? (Or rather show the performance for each query, so you can determine yourself, if the performance is acceptable or not) I'm aware, that database hosts itself show the performance of queries, but linking their query performance to the code is still a hurdle.

7 replies

TTCTheo's Typesafe Cult

•Created by jonnyfapson on 1/7/2023 in #questions

How to handle Schema changes with Prisma?

Is there some established process to handle schema changes (i.e. user has first name + last name, but now we want to add the 'fullName' attribute for some reason)? In this example we would need to run a migration job, which iterates over all the existing users, and adds the new field. But where would we run this job? Are there some guidelines / tips?

13 replies

Gaming

Programming