This is a modern TypeScript monorepo template with web and native apps featuring:
- Turborepo: Monorepo management
- Next.js 14: Web app
- React Native Expo: Mobile/native app
- Convex: Backend, database, server functions, and authentication
- TailwindCSS: Styling for web app
- NativeWind: Styling for mobile app
This project is a simple platform for booking common areas in a condominium.
It was inspired by the lack of such a system in the condominium where I currently live.
I decided to include React Native to test how far I could go in creating a native app with Convex for a hackathon project.
Features include:
- Dashboard page (web & native)
- Booking 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 using Convex's native authentication
If you don't have pnpm installed, run npm install --global pnpm.
Run pnpm install.
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/backendThe 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.
The setup command should now finish successfully.
Please follow the .env.local.example files to configure the apps easily.
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
environment variables.
- Use the
CONVEX_URLfrompackages/backend/.env.localfor{NEXT,EXPO}_PUBLIC_CONVEX_URL.
Run the following command to run both the web and mobile apps:
npm run devThis 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.
This monorepo template includes the following packages/apps:
web: a Next.js 14 app with TailwindCSSnative: a React Native app built with expo and NativeWindpackages/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
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.