notion clone

? Clone de noção

Crie e edite notas como na noção

Esse clone tenta replicar alguns dos ótimos recursos de anotações que a noção tem. Se você ainda não conhece noção. Então, eu recomendo conferir!

? Demonstração ao vivo: noção-clone.kmuenster.com

? Artigo médio: Como construir um editor de texto como noção

---

---

Características

• Comandos Slash (digite / para transformar o bloco em diferentes tipos de conteúdo)
• Suporte HTML (use tags HTML regulares como <a> Em blocos de texto)
• Suporte de imagem (Faça o upload de imagens usando o comando /image )
• Arraste e solte (reordenar os bloqueios facilmente por arrastar e soltar)
• Edição de convidado (qualquer pessoa pode criar páginas públicas e compartilhá -las via link)
• Gerenciamento de usuários (crie uma conta para criar páginas privadas)
• Trabalhos programados (exclua páginas e contas inativas automaticamente)

Pilha de tecnologia

O front-end é construído com o Next.js e totalmente o lado do servidor renderizado. No back -end, uma API REST lida com salvamento de conteúdo do usuário e gerenciamento de usuários.

Front-end

Next.js · React.js · SCSS/SASS

Back -end

Express.js · MongoDB com Mongoose · NodeMailer · JWT (baseado em biscoitos)

Instalação

1. Clone o projeto

    git clone https://github.com/konstantinmuenster/notion-clone.git
    cd notion-clone

2. Adicione variáveis de ambiente

   Back -end: Crie um arquivo .env no diretório backend :

    FRONTEND_URL="http://localhost:3000"
   DOMAIN="localhost"
   JWT_KEY="yourSecretForTokenGeneration"
   PORT=8080
   MONGO_URI="mongodb+srv://username:[email protected]/database?retryWrites=true&w=majority"
   MAIL_HOST="smtp.sendgrid.net"
   MAIL_PORT=465
   MAIL_USER="apiKey"
   MAIL_SENDER="Your Name <[email protected]>"
   MAIL_PASSWORD="yourSendGridApiKey"
   

   Frontend: Crie um arquivo .env.local no diretório frontend :

    NEXT_PUBLIC_API="http://localhost:8080" // references your Backend API endpoint
   

3. Instale e execute back -end (http: // localhost: 8080)

    cd backend
   npm install
   npm start

4. Instale e execute frontend (http: // localhost: 3000)

    cd frontend
   npm install
   npm run dev

Hospedagem

Você pode hospedar o aplicativo em quase qualquer provedor que suporta aplicativos de nó e domínios personalizados. Decidi hospedar o front -end em vercel.com e o back -end no heroku.com. Mas você pode hospedar o front -end e o back -end, no mesmo provedor, se quiser.

Atlas MongoDB

Você precisa criar um novo cluster MongoDB antecipadamente. Ele armazenará toda a sua página e bloqueará dados. Você pode criar um gratuitamente no MongoDB Atlas.

Certifique -se de criar as seguintes coleções:

• páginas
• Usuários

Certifique -se de permitir o acesso à rede a todos (devido a Heroku).

Back -end

Se você deseja implantar o back -end no heroku.com, crie um novo aplicativo em sua região preferida no heroku.com.

Certifique -se de adicionar todas as variáveis ambientais de produção para o back -end. Você pode ver quais variáveis são necessárias na parte de instalação deste readme.

Certifique -se de adicionar um domínio personalizado para sua API de back -end. Como o aplicativo usa uma autenticação baseada em biscoitos, precisamos executar back-end e front-end no mesmo domínio. Por exemplo, corro o front-end em www.notion-clone.kmuenster.com e o back-end no api.notion-clone.kmuenster.com .

Quer executar trabalhos programados? Para excluir páginas e usuários inativos, executo trabalhos agendados com frequência. Se você também deseja esse recurso, você deve adicionar mais dinófos ao seu aplicativo e executar o trabalho $ node jobs/index.js via Scheduler Heroku.

Por fim, você pode implantar seu aplicativo usando o Heroku Git.

Certifique -se de que, quando você empurra o back-end para o Heroku, faça um push de subárvore git, já que notion-clone é um mono-repetição contendo back-end e front-end. Então, execute git subtree push --prefix backend heroku master em vez de git push heroku master . Assim, apenas empurramos a parte do back -end.

Front-end

Se você deseja implantar o front -end no vercel.com, pode usar com tanta facilidade a CLI do Vercel.

Com a CLI da Vercel, não precisamos fazer um push da subárvore; em vez disso, podemos simplesmente mudar para a pasta front -end e executar o comando vercel para implantar:

 cd frontend
vercel

Isso o levará através do guia de configuração do seu aplicativo de front -end. Depois, o aplicativo deve ser implantado com sucesso.

Certifique -se de adicionar o terminal da API de back -end como uma variável ambiental de produção no vercel.com.

Certifique -se de adicionar um domínio personalizado para o seu front -end (que idealmente corresponde ao domínio que você especificou em suas variáveis ambientais de back -end)

Sobre

Konstantin Münster - Konstantin.digital

Distribuído sob a licença do MIT. Consulte LICENSE para obter mais informações.

https://github.com/konstantinmuenster