• 

• 

• 

• 

• 

• 

  Mimics the traditional Chalkboard

• 

• 

• 

• 

• 

• GIF

Chalkboard

Inspiration

As online learning has become more common, one thing has remained clear: many virtual classes don't feel as engaging as being in a real classroom. Most digital whiteboards are functional, but they often lack the familiarity and warmth of standing in front of a blackboard, watching ideas come to life in real time.

That inspired Chalkboard. I wanted to recreate the nostalgia of the classroom by bringing the classic chalk-on-blackboard experience to modern devices. The goal was to make online collaboration feel more natural, whether you're teaching, learning, brainstorming, or sketching ideas with others.

What it does

Chalkboard is a real-time collaborative digital chalkboard where multiple users can draw, write, sketch, and annotate together from anywhere. Instead of a plain white canvas, it features an authentic chalkboard aesthetic that makes virtual collaboration feel more like being in a physical classroom.

How I built it

I built Chalkboard as a web application with real-time synchronization, allowing every participant to see updates instantly. The interface was designed to mimic the texture and feel of writing with chalk while remaining smooth, responsive, and easy to use across devices.

Challenges I ran into

The biggest challenge was balancing realism with performance. Recreating the look and feel of chalk without making the application feel sluggish required several iterations. Ensuring smooth, low-latency collaboration between multiple users while maintaining a consistent drawing experience was another major challenge.

What I learned

Building Chalkboard taught me a lot about real-time collaboration, synchronization, and user experience design. More importantly, I learned that thoughtful design can make digital learning feel more engaging. Sometimes, recreating a familiar experience is just as valuable as introducing something entirely new.

Built With

• canvas
• hono
• node.js
• postgresql
• r2
• react
• redis
• socket.io
• tanstack-react-query
• typeorm
• typescript
• vite
• wouter
• zustand