DigiSketch

DigiSketch is a minimalist PixelPost-style note app. Draw three tiny 32x32 pixel sketches, add a short message, and share an anonymous link.

Features

• 3 high-resolution (32x32) sketch canvases
• 8-color pastel palette + Custom Native Color Picker
• Variable brush sizes (1x1, 2x2, 3x3) for faster drawing
• 280-character message limit
• Anonymous, shareable URL (/v/[id])
• Upstash Redis (KV) storage — always-on, lightning fast
• Touch-friendly drawing and painting on mobile
• Pure vanilla frontend for zero-lag instant loading

Tech Stack

• Frontend: Vanilla HTML, CSS, and JavaScript (Zero build tools!)
• Backend: Node.js with Express
• Database: Upstash Redis

WIP: This is a hobby project! Please don't share any highly sensitive or private information.

Project Structure & Workflow

Since this project uses no frontend frameworks (like React) or build tools (like Webpack), the workflow is incredibly simple:

• public/: Contains the pure frontend.
  • styles.css: Where all the colors, gradients, and soft UI glassmorphic styles are defined.
  • create.html & create.js: The sketching wizard logic.
  • view.html & view.js: The note viewing logic.
• api/index.js: The backend Express app. This runs as a Serverless Function on Vercel.
• server.js: Only used for local development. It wraps api/index.js and serves the public/ static files so you can test locally using npm run dev.
• vercel.json: Tells Vercel how to route traffic correctly in production.

Local Setup

1. Install dependencies:

npm install

2. Create a Redis database on the Vercel Marketplace (Upstash) and link it to your project — or create one directly at console.upstash.com.

3. Add a .env.local file with your credentials:

UPSTASH_REDIS_REST_KV_REST_API_URL=https://your-url.upstash.io
UPSTASH_REDIS_REST_KV_REST_API_TOKEN=your-token

4. Start the server:

npm run dev

The server will start instantly and your app will be available at http://localhost:3000.

API

POST /api/notes

Payload:

{
	"sketches": [[["#f2a7b3", null, "#2d2a26", ...]]],
	"message": "Hello from DigiSketch"
}

Returns:

{ "id": "a1b2c3" }

Notes

• Redis credentials are only used server-side in server.js to ensure security.