Pyxl is a collaborative pixel art project similar to Reddit's r/place. Users work together to create a massive canvas of pixel art using a simple color picker. The canvas is protected by rules that ensure collaborative effort and prevent vandalism.

.github
  └─ workflows
        └─ CI with pnpm cache setup
.vscode
  └─ Recommended extensions and settings for VSCode users
apps
  └─ websocket
  └─ next.js
      ├─ Next.js 13
      ├─ React 18
      ├─ Tailwind CSS
      └─ E2E Typesafe API Server & Client
packages
 ├─ api
 |   └─ tRPC v10 router definition
 ├─ auth
     └─ authentication using next-auth.
 └─ db
     └─ typesafe db-calls using Prisma

To get it running, follow the steps below:

# Install dependencies
pnpm i

# In packages/db/prisma update schema.prisma provider to use sqlite
# or use your own database provider
- provider = "postgresql"
+ provider = "sqlite"

# 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

We do not recommend deploying a SQLite database on serverless environments since the data wouldn't be persisted. I provisioned a quick Postgresql database on Railway, but you can of course use any other database provider. Make sure the prisma schema is updated to use the correct database.

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.

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

2. Add your POSTGRES_URL, POSTGRES_PRSIMA_URL and POSTGRES_URL_NON_POOLING environment variables.

3. 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.

The stack originates from create-t3-app.