OwODocs

Opinions

Atomic Composability

  • Turborepo : enables composition of internal and external packages and applications.
  • Tailwind CSS : rapid development through utility classes in HTML, ensuring consistency, easy customization, and maintainability while improving performance and simplifying responsive design for web applications.
  • Jotai : predictable state management using atoms, optimizing performance through fine-grained reactivity, and simplifying development with its user-friendly API.

Typescript & Type-Safety

Committing to strong type-safety not only increases code readability & quality, but also enhances development speed & confidence.

OwO Repo focuses on end to end type-safety through creating custom solutions:

  • type safe api builder ( with consumable client side errors )
  • type-safe theme builder
  • type-safe image import generation ( + optimization & lqips )
  • type-safe security / CSP builder
  • composable type-safe environment variables ( inspired by T3 Env )
  • many utils & type helpers which extend typescript

As well integrating fantastic existing solutions:

  • drizzle ORM for type-safe sql
  • zod for type-safe validation

Next Js ( app directory )

While the app dir has some rough edges, it also has many features which make it worth adopting, including :

  • an expressive routing system
  • granular cache invalidation
  • a more customisable api implementation & structure
  • react server components
  • server actions

Plus it's getting more stable, performant and adding missing pieces :D .

Opinionated Structure

To help us know when we are dealing with code that can be used on the server, client or both (common), we use :

  • sub-directories (@server) , (@client) , and optionally (@common).
  • file name suffixes file-name.@C.ts for client files, file-name.@S.ts for server files and file-name.@B.ts for common files

All environment specific imports should have one of these sub-directories or suffixes in their path, other wise it can be assumed it is to safe to use in both environments.

This allows more semantic understanding when looking at directory structure / import paths, as well as scalability when adding, modifying and refactoring code ( at the cost of being overly verbose ).

Optionally you can adhere to these directory prefixes for readability:

  • @ indicates folders with special names that we want to appear before others, e.g. @components .
  • (@) indicates the entry import for a folder ( where the index file goes that relates to the folder ). e.g. example-component/index.tsx becomes example-component/(@)/index.tsx