Fullstack monorepo template feat. Expo, Turbo, Next.js, Convex, Clerk

This is a modern TypeScript monorepo template with AI web and native apps featuring:

Turborepo: Monorepo management
Next.js 13: Web app & marketing page
React Native Expo: Mobile/native app
Convex: Backend, database, server functions
Clerk: User authentication
OpenAI: Text summarization (optional)

The example app is a note taking app that can summarize notes using AI. Features include:

Marketing page
Dashboard page (web & native)
Note taking page (web & native)
Backend API that serves web & native with the same API
Relational database
End to end type safety (schema definition to frontend API clients)
User authentication
Asynchronous call to an OpenAI
Everything is realtime by default

Using this example

1) Install dependencies with yarn or pnpm i.

2) Configure Convex:

Note: The following commands will throw an error and ask you to add the appropriate environment variables to proceed. Continue reading on for how to do that.

npm run setup --workspace packages/backend

The script will log you into Convex if you aren't already and prompt you to create a project (free). It will then wait to deploy your code until you set the environment variables in the dashboard.

Configure Clerk with this guide. Then add the CLERK_ISSUER_URL found in the "convex" template here, to your Convex environment variables here.

After that, optionally add the OPENAI_API_KEY env var from OpenAI to your Convex environment variables to get AI summaries.

3) Create a .env file using the .example.env as a template and fill out your Convex and Clerk environment variables.

There is one in each of apps/web and apps/native.

Use the CONVEX_URL in packages/backend/.env.local for {NEXT,EXPO}_PUBLIC_CONVEX_URL.
The Clerk publishable & secret keys can be found here.

4) Run the following command to run both the web and mobile apps:

npm run dev

What's inside?

This monorepo template includes the following packages/apps:

Apps and Packages

web: a Next.js 14 app with TailwindCSS and Clerk
native: a React Native app built with expo
packages/backend: a Convex folder with the database schema and shared functions

Each package/app is 100% TypeScript.

Utilities

This Turborepo has some additional tools already setup for you:

Expo for native development
TypeScript for static type checking
Prettier for code formatting

What is Convex?

Convex is a hosted backend platform with a built-in database that lets you write your database schema and server functions in TypeScript. Server-side database queries automatically cache and subscribe to data, powering a realtime useQuery hook in our React client. There are also clients for Python, Rust, ReactNative, and Node, as well as a straightforward HTTP API.

The database supports NoSQL-style documents with relationships and custom indexes (including on fields in nested objects).

The query and mutation server functions have transactional, low latency access to the database and leverage our v8 runtime with determinism guardrails to provide the strongest ACID guarantees on the market: immediate consistency, serializable isolation, and automatic conflict resolution via optimistic multi-version concurrency control (OCC / MVCC).

The action server functions have access to external APIs and enable other side-effects and non-determinism in either our optimized v8 runtime or a more flexible node runtime.

Functions can run in the background via scheduling and cron jobs.

Development is cloud-first, with hot reloads for server function editing via the CLI. There is a dashboard UI to browse and edit data, edit environment variables, view logs, run server functions, and more.

There are built-in features for reactive pagination, file storage, reactive search, https endpoints (for webhooks), streaming import/export, and runtime data validation for function arguments and database data.

Everything scales automatically, and it’s free to start.

kyldvs / convex-ents-non-portable-types-repro