Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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://github.com/jahnvisahni31/designdeck
gssoc-ext gssoc-extd hacktoberfest hacktoberfest-accepted
Last synced: 4 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/jahnvisahni31/designdeck
- Owner: jahnvisahni31
- License: mit
- Created: 2024-07-09T03:33:02.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-10T18:27:09.000Z (about 2 months ago)
- Last Synced: 2024-12-16T18:35:17.933Z (11 days ago)
- Topics: gssoc-ext, gssoc-extd, hacktoberfest, hacktoberfest-accepted
- Language: TypeScript
- Homepage: https://design-deck.vercel.app/
- Size: 10 MB
- Stars: 34
- Watchers: 1
- Forks: 75
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Welcome To 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.
## 📈 GitHub Repository Stats
| 🌟 **Stars** | 🍴 **Forks** | 🐛 **Issues** | 🔔 **Open PRs** | 🔕 **Closed PRs** | 🛠️ **Languages** | ✅ **Contributors** |
|--------------|--------------|---------------|-----------------|------------------|------------------|------------------|
|  |  |  |  |  |  |  |
## 🚀Featured In
Event Logo
Event Name
Event Description
GirlScript Summer of Code 2024
GirlScript Summer of Code is a three-month-long Open Source Program conducted every summer by GirlScript Foundation. It is an initiative to bring more beginners to Open-Source Software Development.
Hacktoberfest 2024
Hacktoberfest is a month-long celebration of open source software run by DigitalOcean, GitHub, and Twilio. It encourages contributions to open source projects and promotes a global community of developers.
# Table of Contents:
- [Demo](#demo)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Environment Variables](#environment-variables)
- [Getting Started](#getting-started)
- [Contribution](#contributing)
# 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.
```bash
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:
```bash
git clone https://github.com/jahnvisahni31/Designdeck.git
```
2. Change to the project directory:
```bash
cd Designdeck
```
3. Install and run client dependencies:
```bash
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:
```bash
environment:
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY: your_api_key_goes_here
```
3. To start the application using Docker, run the following command in your terminal:
```bash
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 🔄
### Note: Use npm run build and check for conflicts before submitting a pull request, as conflicts can delay merging pull requests.
## Contributors
A heartfelt thank you to the following individuals for their valuable contributions to this project. Your support and dedication are greatly appreciated:
## Stargazers
[](https://github.com/jahnvisahni31/DesignDeck/stargazers)
## Forkers
[](https://github.com/jahnvisahni31/DesignDeck/network/members)
## Contact 📬
For any questions or support, please reach out to [[email protected]](mailto:[email protected]).
## Licence 💵
This repository is protected under MIT License for more deatils refer to [MIT License](https://github.com/jahnvisahni31/DesignDeck/blob/main/LICENSE) for more details.