search

jahnvisahni31 / DesignDeck

web-based design tool built using Next.js. It aims to provide a collaborative design environment where users can create, edit, and share their designs in real-time.
https://design-deck.vercel.app/
MIT License
18 stars 19 forks source link
gssoc-ext gssoc-extd hacktoberfest hacktoberfest-accepted

readme

DesignDeck

DesignDeck is a web-based collaborative design tool similar to Figma, built using Next.js, TypeScript, Tailwind CSS, and LiveBlocks API, Fabric.js. With Designdeck, teams can seamlessly collaborate on designing interfaces in real-time with a plethora of features.

Table of Contents

Demo

You can see a live demo of the portfolio website at [https://design-deck.vercel.app/]

Features

Feature Description
Live Collaboration Multiple users can simultaneously work on the canvas with live updates of cursor positions and changes.
Shape Manipulation Add, modify, and delete shapes. Customize properties like width, height, stroke color, and more.
Free Drawing Utilize the pencil feature to free draw on the canvas.
Text Addition Add text to designs and adjust font size, weight, and style.
Copy and Paste Easily duplicate elements on the canvas.
Comment Threads Add comments to specific elements and reply to them.
Real-Time Updates Instant updates for all users in real-time.
Undo/Redo Easily undo or redo actions using keyboard shortcuts (Ctrl+Z and Ctrl+Y).
Chat Bubbles Quick communication among team members through chat bubbles.
Reactions Express reactions to designs using keyboard shortcuts.
Export to PDF Export selected elements on the canvas to PDF format.

Technologies Used

Technology Description
Next.js Server-side rendering and routing.
TypeScript Adds static types to JavaScript.
Tailwind CSS Utility-first CSS framework for styling.
LiveBlocks API Real-time collaboration API for syncing data across clients.
Fabric.js HTML5 canvas library for manipulating graphics and interactive content.
Shadcn Component library for UI elements.

Environment Variables

The project relies on environment variables stored in a .env.local file located at the root of the Designdeck directory to manage configurations. Ensure that essential variables such as database connection strings, API keys, or any other sensitive information are properly set up.

NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY = "*YOUR LIVEBLOCKS API PUBLIC KEY*"

Be sure to replace *YOUR LIVEBLOCKS API PUBLIC KEY* with your actual LiveBlocks API public key to enable proper integration.

Note: Note: Replace YOUR LIVEBLOCKS API PUBLIC KEY with your actual key. Sensitive information should not be committed to version control; include the .env files in your project's gitignore.

Getting started

  1. Clone this repository to your local machine:
git clone https://github.com/jahnvisahni31/Designdeck.git
  1. Change to the project directory:
cd Designdeck
  1. Install and run client dependencies:
npm install
npm run dev

Open your web browser and visit http://localhost:3000 to see the website in action during development.

Running the Project Locally Using Docker

You can also run DesignDeck locally using Docker by following these steps:

  1. Make sure you have Docker installed on your machine.

  2. Go to the docker-compose.yml file in the root of your project and put your api key in this section:

  environment:
      NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY: your_api_key_goes_here
  1. To start the application using Docker, run the following command in your terminal:
docker-compose up --build

This command builds the image and starts the container. You can then access the application at http://localhost:3000.

CONTRIBUTING

We welcome contributions to DesignDeck! To contribute:

  1. Fork the repository 🍴
  2. Create a new branch (git checkout -b feature/your-feature) 🌱
  3. Make your changes ✨
  4. Commit and push your changes 🚀
  5. Create a pull request 🔄

CONTRIBUTORS

Contributions are welcome!

Specially thanks ❤️ for contributors bellow:

Contact 📬

For any questions or support, please reach out to Jahnvisahni98@gmail.com.