Skip to content

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.

License

Notifications You must be signed in to change notification settings

ashu273k/DesignDeck

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DesignDeck:

6dcd94c7c4bf4800648ef7cbe0113c33

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.

image

Table of Contents:

image

Demo

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

Features

image

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:

image

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

a29b365eb885f9b07c6fbc8b193d4a74

Contributions are welcome!

Specially thanks ❤️ for contributors bellow:

Contact 📬

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

About

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.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 96.7%
  • CSS 2.7%
  • Other 0.6%