3527e732d4
Production-ready Next.js boilerplate with: - Runtime env validation (fail-fast on missing vars) - Feature-gated config (S3, Stripe, email, OAuth) - Docker + Coolify deployment pipeline - PostgreSQL + pgvector, MinIO S3, Better Auth - TypeScript strict mode (no ignoreBuildErrors) - i18n (en/es), AI modules, billing, monitoring Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
83 lines
4.3 KiB
Markdown
83 lines
4.3 KiB
Markdown
---
|
|
title: Tech Stack
|
|
description: A detailed look at the technical details.
|
|
url: /docs/extension/stack
|
|
---
|
|
|
|
# Tech Stack
|
|
|
|
## Turborepo
|
|
|
|
[Turborepo](https://turbo.build/) is a monorepo tool that helps you manage your project's dependencies and scripts. We chose a monorepo setup to make it easier to manage the structure of different features and enable code sharing between different packages.
|
|
|
|
<Card href="https://turbo.build/" title="Turborepo - Make Ship Happen" description="turbo.build" icon={<Turborepo />} />
|
|
|
|
## WXT (Vite)
|
|
|
|
> It's like Next.js for browser extensions.
|
|
|
|
[WXT](https://www.wxt.dev/) is a very lightweight and powerful framework (based on [Vite](https://vite.dev/)) for building browser extensions using most popular frontend tools. It provides a modern development experience with features like hot module reloading, TypeScript support, and automatic manifest generation.
|
|
|
|
WXT simplifies the process of creating cross-browser extensions, allowing you to focus on your extension's functionality rather than boilerplate setup.
|
|
|
|
<Cards>
|
|
<Card href="https://www.wxt.dev/" title="WXT" description="wxt.dev" icon={<Wxt />} />
|
|
|
|
<Card href="https://www.vite.dev/" title="Vite" description="vite.dev" icon={<Vite />} />
|
|
</Cards>
|
|
|
|
## React
|
|
|
|
[React](https://reactjs.org/) is a JavaScript library for building user interfaces. It's the core technology we use for creating the UI of our browser extension, allowing for efficient updates and rendering of components.
|
|
|
|
<Card href="https://reactjs.org/" title="React" description="reactjs.org" icon={<React />} />
|
|
|
|
## Tailwind CSS
|
|
|
|
[Tailwind CSS](https://tailwindcss.com) is a utility-first CSS framework that helps you build custom designs without writing any CSS. We also use [Radix UI](https://radix-ui.com) for our headless components library and [shadcn/ui](https://ui.shadcn.com) which enables you to generate pre-designed components with a single command.
|
|
|
|
<Cards className="grid-cols-2 sm:grid-cols-3">
|
|
<Card href="https://tailwindcss.com" title="Tailwind CSS" description="tailwindcss.com" icon={<Tailwind />} />
|
|
|
|
<Card href="https://radix-ui.com" title="Radix UI" description="radix-ui.com" icon={<Radix />} />
|
|
|
|
<Card href="https://ui.shadcn.com" title="shadcn/ui" description="ui.shadcn.com" icon={<Shadcn />} />
|
|
</Cards>
|
|
|
|
## Hono & React Query
|
|
|
|
[Hono](https://hono.dev) is a small, simple, and ultrafast web framework for the edge. It provides tools to help you build APIs and web applications faster. It includes an RPC client for making type-safe function calls from the frontend. We use Hono to build our serverless API endpoints.
|
|
|
|
To make data fetching and caching from our API easy and reliable, we pair Hono with [React Query](https://tanstack.com/query/latest). It helps manage asynchronous data, caching, and state synchronization between the client and backend, delivering a fast and seamless UX.
|
|
|
|
<Cards>
|
|
<Card href="https://hono.dev" title="Hono" description="hono.dev" icon={<Hono />} />
|
|
|
|
<Card
|
|
href="https://tanstack.com/query/latest"
|
|
title="React Query"
|
|
description="tanstack.com"
|
|
icon={
|
|
<img src="/images/icons/tanstack.png" alt="" width={32} height={32} />
|
|
}
|
|
/>
|
|
</Cards>
|
|
|
|
## Better Auth
|
|
|
|
[Better Auth](https://www.better-auth.com) is a modern authentication library for fullstack applications. It provides ready-to-use snippets for features like email/password login, magic links, OAuth providers, and more. We use Better Auth to handle all authentication flows in our application.
|
|
|
|
<Card href="https://www.better-auth.com" title="Better Auth" description="better-auth.com" icon={<BetterAuth />} />
|
|
|
|
## Drizzle
|
|
|
|
[Drizzle](https://orm.drizzle.team/) is a super fast [ORM](https://orm.drizzle.team/docs/overview) (Object-Relational Mapping) tool for databases. It helps manage databases, generate TypeScript types from your schema, and run queries in a fully type-safe way.
|
|
|
|
We use [PostgreSQL](https://www.postgresql.org) as our default database, but thanks to Drizzle's flexibility, you can easily switch to MySQL, SQLite or any [other supported database](https://orm.drizzle.team/docs/connect-overview) by updating a few configuration lines.
|
|
|
|
<Cards>
|
|
<Card href="https://orm.drizzle.team/" title="Drizzle" description="orm.drizzle.team" icon={<Drizzle />} />
|
|
|
|
<Card href="https://www.postgresql.org" title="PostgreSQL" description="postgresql.org" icon={<Postgres />} />
|
|
</Cards>
|