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

0x5zen — Fri, 30 Jan 2026 09:01:23 +0000

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.

🚀 What's Next?

I am currently refining the mobile experience and optimizing the rendering performance for boards with hundreds of images.

I’d love for you to try it out and let me know what you think. Feedback on the interaction feel is highly appreciated!

Try it here: https://purezen.vercel.app/

Thanks for reading!

ZenPNL — IDX Stock P&L + TradingView Chart + News (Next.js)

0x5zen — Sun, 25 Jan 2026 19:25:21 +0000

I just shipped a small project called ZenPNL a simple, single page IDX stock dashboard that focuses on three things: chart, P&L, and news (fast, responsive, dark-first).

Live:https://zenpnl.vercel.app

GitHub:https://github.com/meryzennn/profitandloss/

> Not financial advice. Market data can be delayed depending on sources.

Why I built it

I wanted an open and go experience like stock apps:
1) Open the site -> IHSG shows by default
2) Search an IDX ticker -> chart switches instantly
3) Calculate P&L using lots (1 lot = 100 shares)
4) Scroll -> read relevant news without leaving the dashboard

Core features

TradingView chart (IDX + IHSG)

Uses the TradingView widget (tv.js) for a real charting feel
Default symbol: IHSG / IDX Composite
When switching symbols, the chart resets so the previous viewport doesn't stick

Lot-based P&L calculator

Inputs: buy/sell price, lots, buy fee %, sell fee %, sell tax %
Outputs: net P&L (IDR), ROI %, break-even sell price
Small UX helpers: quick set buy/sell = last price

News feed that points to real publishers
Google News RSS is convenient, but RSS links can lead to redirects and sometimes weird/non-article pages.
So I implemented a resolver that:

prioritizes the publisher domain from RSS source
aggressively filters junk (ads/scripts/assets/spec pages)
validates final URLs as real HTML articles

Result: the news list shows actual publisher sources (e.g., local finance media) instead of news.google.com / random pages.

Dark-first UI + micro-interactions

Dark mode by default (better for charts)
Shimmer loading states for news
Subtle hover/press animations to feel app-like

Tech stack

Next.js App Router + TypeScript
Tailwind CSS
SWR for client-side fetching + caching
Route Handlers for API normalization:
- Yahoo search & chart meta for Last / Prev Close
- Google News RSS -> resolve to publisher URLs

Design choice: Last vs Close

To keep the price card easy to understand:

Main price uses Yahoo Last (regularMarketPrice)
Change badge uses Last vs Prev Close

This tends to match what users expect from stock apps and feels closer to live than strictly following candle close.

Hard parts (the annoying ones)

TradingView + hydration: the widget is client-only DOM injection, so the container ID must be stable to avoid mismatch issues.
RSS resolution: extracting clean publisher URLs from aggregated feeds is trickier than it looks (redirect chains, embedded URLs, junk endpoints).

What I'd like to improve next

Watchlist (localStorage)
Better market ticker (gainers/losers) if I find a stable IDX feed
Smarter news relevance (query tuning per ticker to avoid ambiguous keywords)

If you have feedback on the UI/UX or know good IDX-friendly data sources, I'd love suggestions.

Links again: https://zenpnl.vercel.app/ | https://github.com/meryzennn/profitandloss/