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
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
This monorepo template includes the following packages/apps:
web
: a Next.js 14 app with TailwindCSS and Clerknative
: a React Native app built with expopackages/backend
: a Convex folder with the database schema and shared functions
Each package/app is 100% TypeScript.
This Turborepo has some additional tools already setup for you:
- Expo for native development
- TypeScript for static type checking
- Prettier for code formatting
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.