Community Garden: Collaborative Pixel Art Canvas

The Problem

Traditional online communities are heavily text-based. While standard discussion boards are excellent for conversation, they often lack spaces for shared, synchronous creativity. Users can talk about art, but they rarely have the tools to create it together in real-time without leaving the platform. We wanted to break the "wall of text" and introduce a living, breathing visual layer to community threads.

The Solution

Community Garden is a real-time, infinite digital canvas that reimagines a Foru.ms thread as a shared pixel grid. Instead of posting text comments, users "post" pixels.

• Visual Collaboration: Users build upon each other's work, turning individual contributions into a collective masterpiece.
• Zero-Latency Experience: We implemented an Optimistic UI pattern that renders pixel updates instantly on the client side while syncing data in the background, ensuring a buttery-smooth drawing feel.
• Neon Aesthetic: A "Cyberpunk/Garden" UI that makes the creative process feel immersive and gamified.

Tech Stack

We prioritized performance and modern standards:

• Frontend: Next.js 14 & React
• Language: TypeScript
• Styling: Tailwind CSS
• API: Foru.ms

Foru.ms Usage & Integration

We designed Community Garden to act as a specialized visual frontend for the Foru.ms API, effectively turning the platform into a real-time database.

• Threads as Storage: The application is architected to treat a specific Thread ID (NEXT_PUBLIC_GARDEN_THREAD_ID) as a persistent container.
• Pixels as Posts: Every pixel drawn by a user is serialized into a JSON object (containing coordinates and colour data) and committed as a POST request to the thread.
• State Reconstruction: Upon loading the canvas, the application fetches the thread's post history via the API to reconstruct the current state of the artwork pixel-by-pixel.

Built With

• css
• foru.ms-api
• html
• next.js
• react
• tailwind-css
• typescript
• v0