Skip to content

README.md

Latest commit

 

History

History
87 lines (64 loc) · 3.86 KB

README.md

File metadata and controls

87 lines (64 loc) · 3.86 KB

Didesign
typescript nextdotjs tailwindcss

Didesign

Didesign is a collaborative design platform built with Next.js, TypeScript, Liveblocks, Fabric.js, Shadcn, and Tailwind CSS. It offers a rich set of features to enable real-time design collaboration and creativity.

✨ Features

  • 👥 Multi Cursors, Cursor Chat, and Reactions: Allows multiple users to collaborate simultaneously by showing individual cursors, enabling real-time chat, and reactions for interactive communication.
  • 🟢 Active Users: Displays a list of currently active users in the collaborative environment, providing visibility into who is currently engaged.
  • 💬 Comment Bubbles: Enables users to attach comments to specific elements on the canvas, fostering communication and feedback on design components.
  • 🔺 Creating Different Shapes: Provides tools for users to generate a variety of shapes on the canvas, allowing for diverse design elements.
  • 🖼️ Uploading Images: Import images onto the canvas, expanding the range of visual content in the design.
  • 🎨 Customization: Allows users to adjust the properties of design elements, offering flexibility in customizing and fine-tuning visual components.
  • ✏️ Freeform Drawing: Enables users to draw freely on the canvas, promoting artistic expression and creative design.
  • ↩️ Undo/Redo: Provides the ability to reverse (undo) or restore (redo) previous actions, offering flexibility in design decision-making.
  • ⌨️ Keyboard Actions: Allows users to utilize keyboard shortcuts for various actions, including copying, pasting, deleting, and triggering shortcuts for features like opening cursor chat, reactions, and more, enhancing efficiency and accessibility.
  • 📜 History: Review the chronological history of actions and changes made on the canvas, aiding in project management and version control.
  • 🛠️ Managing Design Elements: Offers a range of functions for managing design elements, including deletion, scaling, moving, clearing the canvas, and exporting the final design for external use.

🛠️ Technologies Used

  • Next.js: A React framework for server-rendered applications.
  • TypeScript: A statically typed superset of JavaScript.
  • Liveblocks: A real-time collaboration infrastructure.
  • Fabric.js: A powerful and simple JavaScript HTML5 canvas library.
  • Shadcn: A component library for building consistent and reusable UI elements.
  • Tailwind CSS: A utility-first CSS framework.

🚀 Getting Started

Prerequisites

  • Node.js
  • npm or yarn

Installation

  1. Clone the repository:

    git clone https://github.com/rianmandala/didesign.git

  2. Navigate to the project directory:

    cd didesign

  3. Install dependencies:

    npm install

    or

    yarn install

  4. Set Up Environment Variables Create a new file named .env in the root of your project and add the following content:

    NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=

    Replace the placeholder values with your actual Liveblocks credentials. You can obtain these credentials by signing up on the Liveblocks website.

Running the Development Server

npm run dev