Quick Links

Hosted at Vercel, here is the link

Stack

This repo uses the following technologies:

Node 18
PNPM
Typescript
Turborepo
NextJS 13
React 18
Prisma
ESlint / Prettier
tRPC v10
TailwindCSS
Zustand & Immer
Vercel - Potentially switch to netlify for consistency across other projects.

PlanetScale

Folder Structure

.vscode
  └─ Recommended extensions and settings for VSCode users
apps
  └─ next.js
      ├─ Next.js 13
      ├─ React 18
      ├─ TailwindCSS
      └─ E2E Typesafe API Server & Client
packages
 ├─ api
 |   └─ tRPC v10 router definition
 ├─ auth
     └─ authentication using next-auth
 └─ db
     └─ typesafe db-calls using Prisma

Quick Start

To get it running, follow the steps below:

Setup dependencies

# Install dependencies
pnpm i

# If you'd like to use a different database other than SQLite, you can go
# to packages/db/prisma and update schema.prisma provider
# or use your own database provider
+ provider = "mysql"

# Configure environment variables.
# There is an `.env.example` in the root directory you can use for reference
cp .env.example .env

# Push the Prisma schema to your database
pnpm db:push

Deploy to Vercel

Let's deploy the Next.js application to Vercel. If you have ever deployed a Turborepo app there, the steps are quite straightforward. You can also read the official Turborepo guide on deploying to Vercel.

Create a new project on Vercel, select the apps/nextjs folder as the root directory and apply the following build settings:

The install command filters out the expo package and saves a few second (and cache size) of dependency installation. The build command makes us build the application using Turbo.

Add your DATABASE_URL environment variable.
Done! Your app should successfully deploy. Assign your domain and use that instead of localhost for the url in the Expo app so that your Expo app can communicate with your backend when you are not in development.

References

The stack originates from create-t3-app.

yoryi / createt3app-devchanllenge