Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/freirelf/lay-docs

nextjs react typescript

Last synced: 23 days ago
JSON representation

Host: GitHub
URL: https://github.com/freirelf/lay-docs
Owner: Freirelf
Created: 2024-10-15T19:11:59.000Z (2 months ago)
Default Branch: main
Last Pushed: 2024-11-13T16:15:23.000Z (about 1 month ago)
Last Synced: 2024-11-13T16:43:57.856Z (about 1 month ago)
Topics: nextjs, react, typescript
Language: TypeScript
Homepage: https://lay-docs.vercel.app
Size: 901 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

Um LiveDocs colaborativo

## 📋 Índice

1. 🤖 [Introdução](#introdução)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Recursos](#recursos)
4. 🤸 [Início rápido](#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](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)

**Clonando o Repositório**

```bash
git clone https://github.com/adrianhajdin/collaborative-editor.git
cd collaborative-editor
```

**Instalação**

Instale as dependências do projeto usando npm:

```bash
npm install
```

**Configurar Variáveis de Ambiente**

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

```env
#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](https://clerk.com/) e [Liveblocks](liveblocks.io/).

**Executando o Projeto**

```bash
npm run dev
```

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