Skip to content

Echoboard is a collaborative whiteboard application built with the latest web technologies. It enables real-time drawing, annotation, and communication for teams and individuals.

License

Notifications You must be signed in to change notification settings

heyitsadityaa/echoboard

Repository files navigation

Echoboard

Next.js React TypeScript Tailwind CSS Prisma NextAuth.js Liveblocks


Project Overview

Echoboard is a modern, collaborative whiteboard application built with the latest web technologies. It enables real-time drawing, annotation, and communication for teams and individuals. Designed for seamless collaboration, Echoboard supports live multi-user editing, voice chat, and a variety of drawing tools, making it ideal for brainstorming, teaching, and remote teamwork.

Project Demo

echoboard.mp4

Key Features

  • 🎨 Multi-layer Canvas: Draw rectangles, ellipses, freehand paths, and text. Each layer is independently editable.
  • 🖌️ Color Picker: (Upcoming) Easily select fill and stroke colors for every layer type.
  • 👥 Real-time Collaboration: See other users' cursors and edits instantly using Liveblocks.
  • 🔒 Authentication: Secure sign-in and sign-up with NextAuth.js, supporting multiple providers.
  • 🗂️ Room Management: Create, join, and manage collaborative rooms.
  • 🗣️ Voice Chat: (Upcoming) Communicate with collaborators directly within the app.
  • 🧩 Component-based Architecture: Built with reusable React and shadcn UI components.
  • Performance: Optimized for low-latency updates and smooth drawing experience.
  • 🛡️ Type Safety: End-to-end type safety with TypeScript and Zod.
  • 🌈 Modern UI: Styled with Tailwind CSS for a clean, responsive interface.

Technology Stack

  • Next.js: React framework for server-side rendering and routing
  • React: Component-based UI
  • TypeScript: Type safety across the stack
  • Tailwind CSS: Utility-first CSS framework
  • Prisma: Type-safe ORM for database access
  • NextAuth.js: Authentication and session management
  • Liveblocks: Real-time collaboration and presence
  • shadcn UI: Accessible UI primitives
  • Zod: Schema validation

Project Structure

  • src/components/ – UI and canvas components
  • src/app/ – Next.js app directory (routing, pages, API)
  • src/hooks/ – Custom React hooks
  • src/lib/ – Utility functions
  • src/server/ – Server-side logic (DB, auth)
  • prisma/ – Prisma schema and migrations
  • styles/ – Global styles

Contributing & Roadmap

Planned Features

  • Color picker for all layer types
  • Export/import board as image or file
  • More drawing tools and integrations

See the issues page for the full roadmap and to track progress. If you have an idea for a new feature, feel free to create an issue to suggest it!


For more details or to contribute, please visit the repository or contact the maintainer.

About

Echoboard is a collaborative whiteboard application built with the latest web technologies. It enables real-time drawing, annotation, and communication for teams and individuals.

Topics

Resources

License

Contributing

Stars

Watchers

Forks