My Solopreneur Tech Stacks

Tech Stacks

  • Next JS 15, with app router
  • Zustand Store
  • Prisma ORM
  • Tailwind CSS
  • Typescript
  • Eslint
  • Prettier

Rules

Zustand Rules:

  • Create every Zustand Store in src/store folder
  • If the store is called userStore, the corresponding user-store.ts file will be created in src/store folder
  • the typescript interface of the store will be created in src/types folder.
  • the typescript interface parameters need to be the camel cased versions of the data stored in the postgres database (e.g. postgres database column name user_id needs to be written as userId in the typescript interface)

React Components Rules:

  • start writing page in src/app/<page_name>/page.tsx, as it is
  • use zustand store in src/app/<page_name>/page.tsx by importing the store from src/store/<store_name>.ts if it has relation with the data on the database.
  • React's useState hook can be used for local state only. Rewrite to Zustand store if it will be used repeatedly in multiple pages / components.
  • for repeatable components, use the useStore hook to get the store from the context. Put the component in src/components folder