Building a Web-Based Infinite Canvas with Next.js, Neon, and Prisma

#nextjs #showdev #react #prisma

As a developer who loves design, I've always wanted a workspace that feels limitless. Desktop apps like PureRef are great, but I wanted that same freedom directly in the browser—accessible anywhere, with zero installation.

So, I built PureZen.

🎨 What is PureZen?

PureZen is a distraction-free, infinite canvas designed for creatives. It allows you to drag, drop, and organize references or create moodboards in a boundless workspace.

It is currently in Public Beta (v1.2).

👉 Live Demo: https://purezen.vercel.app/

🛠️ Under the Hood: The Tech Stack

Building a performant canvas application on the web requires a robust stack. Here is what I used to bring PureZen to life:

Framework: Next.js 14 (App Router) for the core infrastructure.
Database: Neon (Serverless Postgres). I needed a database that could scale automatically and work seamlessly with serverless functions.
ORM: Prisma. It makes interacting with the Neon database type-safe and incredibly intuitive.
Storage: UploadThing. Since this app is all about images, I needed a reliable way to handle file uploads. UploadThing made the implementation straightforward.
Interactions: Framer Motion to handle the complex drag, resize, and pan physics at 60fps.
Auth: NextAuth.js for secure Google authentication.

🧠 The Challenge: Visual Logic

The hardest part wasn't the backend; it was the Canvas Logic.

I wanted a "smart" canvas. This means when you rotate an image, the resize handles need to rotate with it, and the snapping guides need to calculate the visual edges of the rotated object, not just the DOM element box.

This involved projecting screen coordinates to world coordinates and applying some interesting trigonometry to ensure the UX felt natural.

✨ Features

Infinite Pan & Zoom: No boundaries, just space.
Smart Snapping: Auto-alignment guides for keeping your board organized.
Cloud Sync: Your workspace saves automatically to your account (powered by Prisma & Neon).
PWA Support: Installable on desktop and mobile.