Main Tech Stack

React
Typescript
Nextjs

Tailwind
Shadcn

Prisma
Postgres

Next-Auth
Maildev
Resend

Stripe
Lemon Squeezy

Casl
Playwright

Tech choices and Rational

React & Nextjs:

React is the default choice for building modern user interfaces. Its API and ease of use are unmatched by other UI libraries.

Nextjs is the most popular framework for building React apps and is officially recommended by the actual React dev team.

Typescript:

Currently the default language for working on javascript projects. Typescript offers excellent type safety and dramatically improves dx with its IDE autocomplete features

Tailwind & Shadcn

Tailwind is the most popular styling library in the javascript ecosystem. It allows quickly adding styles using utility classes.

Shadcn is the most popular component library for Tailwind. It gives full control over the UI components by allowing the developer to copy and paste the UI component code directly in their codebase.

Prisma

Prisma Currently the most popular ORM. Prisma offers deep integration with the typescript and nextjs ecosystem, while having the best documentation. Postgres is used as the default DB engine but others can be switched to easily thanks to prisma`s agnostic API.

Next-auth:

nextauth is the most popular Auth library for nextjs by far.

Detailed explanation of why this project uses nextauth can be found in the Auth overview section.

Stripe & Lemon Squeezy:

Stripe is the most popular and gold standard of payment processors on the market. Lemon Squeezy is used for its similarity to the Stripe API, offering excellent DX, but also being a Merchant of Record, unlike stripe.

Casl:

By far the most popular javascript RBAC library, Casl offers excellent documentation and has a lot of community resources behind, while being very easy to work with.

Playwright:

Currently the best E2E testing framework in the ecosystem. Unlike Cypress Playwright work with Safari based webkit browsers and also has a significantly easier to work with API. Codegen features of Playwright also add to a great DX.

Config and docs

This project contains several configuration files for various tools and technologies mentioned in the techstack section.

Links to configuration options and docs for each tool can be found below.

Next.js:
Official Documentation: https://nextjs.org/docs (opens in a new tab)
Configuration: https://nextjs.org/docs/app/api-reference/next-config-js (opens in a new tab)

Tailwind CSS:
Official Documentation: https://tailwindcss.com/docs (opens in a new tab)
Configuration: https://tailwindcss.com/docs/configurationM (opens in a new tab)

Prettier:
Official Documentation: https://prettier.io/docs/en/index.html (opens in a new tab)
Configuration: https://prettier.io/docs/en/options.html (opens in a new tab)

TypeScript:
Official Documentation: https://www.typescriptlang.org/docs/ (opens in a new tab)
Configuration: https://www.typescriptlang.org/tsconfig (opens in a new tab)

ESLint:
Official Documentation: https://eslint.org/docs/user-guide/ (opens in a new tab)
Configuration: https://eslint.org/docs/user-guide/configuring (opens in a new tab)

Playwright:
Official Documentation: https://playwright.dev/docs/intro (opens in a new tab)
Configuration: https://playwright.dev/docs/test-configuration (opens in a new tab)

Prisma:
Official Documentation: https://www.prisma.io (opens in a new tab)

Nextauth:
Official Documentation for v5: https://authjs.dev (opens in a new tab)

*Note: https://next-auth.js.org (opens in a new tab) is the URL for the older v4 version. The older documentation can be partially be used for the newer v5 version, but it is important to note the newer version documentation has a different URL.

Postgres
Postgres: https://www.postgresql.org (opens in a new tab)

Stripe
https://stripe.com/docs/api (opens in a new tab)

Lemon Squeezy
https://docs.lemonsqueezy.com/api (opens in a new tab)