De Usuário a Criador: Minha Experiência em Replicar o Notion

Notion Clone

Introdução

Lembro bem do primeiro dia em que conheci o Notion. Ele estava começando a ficar em alta no YouTube, graças aos diversos vídeos feitos por estudantes de medicina. Esses vídeos geralmente abordavam como organizar matérias, fazer anotações, gerenciar tarefas e agendar horários de estudo.

Essa plataforma, conhecida por ser “Tudo Em Um” (All In One), é perfeita para muitos, mas assustadora para alguns. Em pouco tempo, começaram a surgir vídeos de pessoas ensinando a utilizar essa maravilhosa ferramenta para criar sistemas mais complexos, aproveitando os poderosos Databases e Relations.

Com o tempo, resolvi me especializar no Notion. Estudei muito até finalmente passar no exame de certificação (passei na minha segunda tentativa, já que na primeira tentativa eu sabia apenas o básico e achava que conseguiria passar). Na época, a certificação exigia conhecimentos até sobre as diferenças principais entre os planos, quase como se você fosse um vendedor da ferramenta também. Hoje, se não me engano, deixou de ser certificação e passou a ser um badge, uma espécie de crachá.

Na mesma época, começaram a acontecer encontros no MeetUp, onde cada pessoa mostrava como organizava o próprio Notion. A ferramenta se tornou uma febre, principalmente entre os mais perfeccionistas, que às vezes se tornavam procrastinadores natos, lapidando seus respectivos workspaces até terem vontade de recomeçar tudo do zero.

Participei de alguns desses encontros com o pessoal da Escócia, onde pude passar vergonha com meu inglês e me integrar a essa comunidade sempre muito organizada e acolhedora. Foi em meio a essas reuniões que conheci Jayden, que posteriormente se tornou um grande parceiro na empreitada de tentar ganhar dinheiro com o Notion, entregando sistemas baseados no Notion para empresas ou pessoas que precisavam de automações, mas não sabiam como fazê-las. Tentávamos ser como uma consultoria Notion.

Os projetos até saíram do papel, mas nunca chegamos a ganhar dinheiro juntos com isso. Algum tempo depois, comecei a me envolver com a comunidade do Notion Brasil, após conhecer melhor o Daniel do canal Produtive.me, outro cara incrível que fez muito pela popularidade do Notion. Daniel tem um grande envolvimento na entrega da versão do Notion em português.

Não me lembro exatamente quando tudo isso começou, mas acredito que tenha sido por volta de 2018, quando entrei na faculdade para fazer o Bacharelado em Ciência da Computação.

Comecei usando um bloco de notas normal do computador tipo o Notepad, depois passei para o Google Keep, e só então conheci o Notion. Desde então, experimentei várias outras ferramentas parecidas, mas nenhuma me encantou tanto quanto o Notion. Há algo de muito autêntico e moderno no design e no funcionamento. Confesso que também acho muito interessante e original o estilo de desenho das pessoas no Notion.

O projeto paralelo

Dada toda essa história com o Notion, decidi que queria muito fazer um clone dele, principalmente para colocar em prática meus conhecimentos de design e desenvolvimento de software. Nada melhor do que tentar replicar, do meu jeito, uma ferramenta que conheço bem.

Porém, quando tentei pela primeira vez, acho que em 2021, meus débitos técnicos não me permitiram sequer fazer a página inicial. Estava estudando Flutter e pensei em fazer tudo usando essa tecnologia, mas fiquei totalmente travado ao tentar implementar um campo de texto que entendesse e formatasse seguindo as orientações do Markdown, como o Notion faz.

Três anos depois, aqui estou eu, com o apoio do Code With Antonio, para implementar o clone do Notion usando React, Next, Convex e Tailwind. Vamos lá!

Iniciando o projeto

Siga os passos a seguir para criar o projeto:

1. Abra o terminal;
2. Digite o comando: npx create-next-app@latest notion-clone
3. Responda as perguntas que aparecerão:

• Would you like to use TypeScript? … No / Yes
• Would you like to use ESLint? … No / Yes
• Would you like to use Tailwind CSS? … No / Yes
• Would you like to use ‘src/’ directory? … No / Yes
• Would you like to use App Router? (recommended) … No / Yes
• Would you like to customize the default import alias (@/*)? … No / Yes

4. Aguarde baixar as dependências e adicionar os pacotes;

5. Abra o projeto criado em seu editor de código (indico Visual Studio Code ou WebStorm);

6. Confira se a estrutura do seu projeto está igual ou semelhante a seguinte imagem:

7. Execute o comando: npx shadcn-ui@latest init

8. Responda as perguntas:

• Would you like to use TypeScript (recommended)? … no / yes
• Which style would you like to use? … Default / New York
• Which color would you like to use as base color? … Slate / Gray / Zinc / Neutral / Stone
• Where is your global CSS file? … app/globals.css
• Would you like to use CSS variables for colors? … no / yes
• Where is your taildind.config.js located? … tailwind.config.ts

Obs Estamos usando TypeScript, portando, ao invés de .js, iremos utilizar .ts.

• Configure the import alias for components: … @/components
• Configure the import alias for utils: … @/lib/utils
• Are you using React Server Components? … no / yes
• Write configuration to components.json. Proceed? … (Y/n)

9. Depois que o projeto terminar de inicializar, execute o comando: npm rum dev

10. Acesse http://localhost:3000/

Limpar a página inicial

Agora, visando deixar uma mensagem autoral na página principal, faça o seguinte:

1. Vá até o arquivo: notion-clone\\app\\page.tsx;
2. Remova tudo que está após o return;
3. Adicione “<p>Hello Notion Clone</p>”.

Ficando da seguinte forma:

import Image from "next/image";

export default function Home() {
  return (
    <p>Hello Notion Clone</p>
  );
}

Baixar extensão Tailwind

Para facilitar o manuseio do código com classes Tailwind, procure por “Tailwind” nas extensões do Visual Studio Code e faça a instalação da seguinte: Tailwind CSS IntelliSense

Ao adicionar um pouco de Tailwind para testar na página principal, podemos ter algo parecido com o seguinte:

import Image from "next/image";

export default function Home() {
  return (
    <p className="text-red-500 font-bold">Hello Notion Clone</p>
  );
}

Referências

1. Code With Antonio: Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind | Full Course 2023