share my remix-t3-stack todolist example project

[SteveSuv]

I just create a todolist example project, I think it's helpful for beginners, and the development experience is much better than nextjs14 appdir, I call it remix-t3-stack 😀

https://github.com/SteveSuv/remix-t3-stack

stack

• remix
• vite
• trpc
• tailwindcss
• typescript
• prisma
• jwt
• pnpm
• react-hook-form
• zod
• docker

[zwhitchcox]

@SteveSuv Just wondering why remix if you're going to use trpc? I thought the benefit of remix was having "progressive" apps that use the traditional browser methods (get/post).

Not saying it's a bad idea, just wondering what your thought process was, using remix rather than the traditional Next.js approach?

[SteveSuv]

• use trpc have many reason:

1. remix not support multi actions, i need to write a huge action logic for complex page, and use button's name property to distinguish requests. but use trpc, i can extract individual requests, then i just call the request i want.
2. remix use useActionData, but trpc use promise, if i want to do something after i recieve the actionData, i just use .then but not to add a new useEffect.
3. action in component is problem，because you can't export action in component, but you can call trpc's mutate anywhere.
4. all requests in the project are separate in different pages. but trpc manage all these requests together and makes them clearly visible.
5. more type safe and popular.

• why don't use next.js
  although nextjs has more advocates, but it's not easy，it is paranoid and creates many rules，and RSC is not yet mature.
  for example, server component can warp client component, but client component can't warp server component, server component can't use event listener, hooks etc. and client component can't use async export and use server things like db, cookie etc. they are all have corresponding limitations, In project I need to consider how components to nested and split, the mental burden is heavy. In comparison，remix has fewer self-created concepts, the core concepts (loader and action) are very simple, it has higher development efficiency and better development experience.

[zwhitchcox]

I felt the same way as you when I started my project, but I really prefer the pattern of having one API per route now…if you need another one, you just add another fetcher and change the action on the Form.

it does take a long time to get used to it though. I’m almost a year into my project, and I’m just now getting comfortable with it.

for shared code, you just use the models in the models folder, but for the “interface” for the route, you just parse the action data with zod, and send it to the model.

the code ends up a lot cleaner, because you don’t have to manage the state of all the input components. Plus all the logic for that route is in the same place, which is nice.

just my opinion. I like trpc a lot though and will probably add it to my project for certain things.

[zwhitchcox]

Also, thank you for getting prisma to work with vite...I can now use your project as a template to get it to work for me.

[zwhitchcox]

Also, just a side note, if you change the server directory to .server, you don't need to add the .server suffix to every route.

[SteveSuv]

has updated, thanks for your feedback

[zwhitchcox]

@SteveSuv Moving all my projects to your template...just wanted to say thanks again!