ericsousa02 / pineappleblocks Goto Github PK

1. 🤖 Introdução
2. ⚙️ Tecnologias Utilizadas
3. 🔋 Recursos
4. 🤸 Início Rápido

Um clone minimalista do Figma para mostrar como adicionar recursos do mundo real, como colaboração ao vivo com chat de cursor, comentários, reações e desenho de designs (formas, upload de imagens) no canvas usando fabric.js.

👉 Múltiplos Cursores, Chat de Cursor e Reações: Permite que vários usuários colaborem simultaneamente, mostrando cursores individuais, possibilitando chat em tempo real e reações para comunicação interativa.

👉 Usuários Ativos: Exibe uma lista de usuários atualmente ativos no ambiente colaborativo, fornecendo visibilidade sobre quem está envolvido no momento.

👉 Bolhas de Comentários: Permite que os usuários anexem comentários a elementos específicos no canvas, promovendo comunicação e feedback sobre componentes de design.

👉 Criação de Diferentes Formas: Fornece ferramentas para que os usuários gerem uma variedade de formas no canvas, permitindo elementos de design diversos.

👉 Upload de Imagens: Importa imagens para o canvas, expandindo a variedade de conteúdo visual no design.

👉 Customização: Permite que os usuários ajustem as propriedades dos elementos de design, oferecendo flexibilidade na personalização e ajuste fino de componentes visuais.

👉 Desenho Livre: Permite que os usuários desenhem livremente no canvas, promovendo expressão artística e design criativo.

👉 Desfazer/Refazer: Oferece a capacidade de reverter (desfazer) ou restaurar (refazer) ações anteriores, oferecendo flexibilidade na tomada de decisões de design.

👉 Ações do Teclado: Permite que os usuários utilizem atalhos de teclado para várias ações, incluindo copiar, colar, excluir e acionar atalhos para recursos como abrir chat de cursor, reações, etc., melhorando eficiência e acessibilidade.

👉 Histórico: Revisa o histórico cronológico de ações e alterações feitas no canvas, auxiliando no gerenciamento de projetos e controle de versões.

👉 Excluir, Escalar, Mover, Limpar, Exportar Canvas: Oferece uma variedade de funções para gerenciar elementos de design, incluindo exclusão, escala, movimentação, limpeza do canvas e exportação do design final para uso externo.

e muitos mais, incluindo arquitetura de código, ganchos avançados do React e reutilização.

Siga estas etapas para configurar o projeto localmente em sua máquina.

Pré-requisitos

Certifique-se de ter o seguinte instalado em sua máquina:

• Git
• Node.js
• npm (Node Package Manager)

Clonando o Repositório

git clone https://github.com/EricSousa02/PineappleBlocks.git

Configurando env

acesse o site https://liveblocks.io faça sua conta e crie um projeto, então acesse esse projeto e vá em "API KEYS" la você copia sua chave publica da api e cole em um arquivo chamado ".env.local" e faça como mostrado a seguir:

NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=sua_chave

Iniciando a aplicação

npm install

# Para rodar em desenvolvimento:
npm run dev

# Para rodar em Produção:
npm run build
npm run start