/idea_snap

Primary LanguageTypeScriptApache License 2.0Apache-2.0

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 14: 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

If you don't have yarn installed, run npm install --global yarn.

Run yarn.

2. Configure Convex

Note: The following command will print an error and ask you to add the appropriate environment variable 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.

Make sure to enable Google and Apple as possible Social Connection providers, as these are used by the React Native login implementation.

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

The setup command should now finish successfully.

3. Configure both apps

In each app directory (apps/web, apps/native) create a .env.local file using the .example.env as a template and fill out your Convex and Clerk environment variables.

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

4. Run both apps

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

npm run dev

This will allow you to use the ⬆ and ⬇ keyboard keys to see logs for each of the Convex backend, web app, and mobile app separately. If you'd rather see all of the lod gs in one place, delete the "ui": "tui", line in turbo.json.

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.

To install a new package, cd into that directory, such as packages/backend, and then run yarn add mypackage@latest

Utilities

This Turborepo has some additional tools already setup for you:

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.