Um LiveDocs colaborativo

📋 Índice

1. 🤖 Introdução
2. ⚙️ Tech Stack
3. 🔋 Recursos
4. 🤸 Início rápido

🤖 Introdução

Construído com Next.js para lidar com a interface do usuário, Liveblocks para recursos em tempo real e estilizado com TailwindCSS, LayDocs é um Docs em tempo real. O objetivo principal é demonstrar as habilidades do desenvolvedor em um ambiente em tempo real que cria um impacto duradouro.

⚙️ Tech Stack

• Next.js
• TypeScript
• Liveblocks
• Lexical Editor
• ShadCN
• Tailwind CSS

🔋 Recursos

👉 Autenticação: Autenticação do usuário usando o GitHub por meio do NextAuth, garantindo login/logout seguros e gerenciamento de sessão.

👉 Editor de texto colaborativo: Vários usuários podem editar o mesmo documento simultaneamente com atualizações em tempo real.

👉 Gerenciamento de documentos

• Criar documentos: Os usuários podem criar novos documentos, que são salvos e listados automaticamente.
• Excluir documentos: Os usuários podem excluir documentos de sua propriedade.
• Compartilhar documentos: Os usuários podem compartilhar documentos por e-mail ou link com permissões de visualização/edição.
• Listar documentos: Exibe todos os documentos de propriedade ou compartilhados com o usuário, com funcionalidades de pesquisa e classificação.

👉 Comentários: Os usuários podem adicionar comentários em linha e gerais, com encadeamento para discussões.

👉 Colaboradores ativos no editor de texto: Mostra os colaboradores ativos com indicadores de presença em tempo real.

👉 Notificações: Notifica os usuários sobre compartilhamentos de documentos, novos comentários e atividades dos colaboradores.

👉 Responsivo: O aplicativo é responsivo em todos os dispositivos.

e muito mais, incluindo arquitetura de código e reutilização

🤸 Início rápido

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/adrianhajdin/collaborative-editor.git
cd collaborative-editor

Instalação

Instale as dependências do projeto usando npm:

npm install

Configurar Variáveis ​​de Ambiente

Crie um novo arquivo chamado .env na raiz do seu projeto e adicione o seguinte conteúdo:

#Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

#Liveblocks
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=
LIVEBLOCKS_SECRET_KEY=

Substitua os valores do espaço reservado pelas suas credenciais reais do Clerk & LiveBlocks. Você pode obter essas credenciais inscrevendo-se no site Clerk e Liveblocks.

Executando o Projeto

npm run dev

Abra http://localhost:3000 no seu navegador para visualizar o projeto. Enviar feedback Painéis laterais Histórico Salvas