Sendtype o melhor app de anotações

Anotações e gerenciamento de projetos sem interrupções. Sendtype apresenta colaboração em tempo real, edição de texto avançado e organização intuitiva de notas e tarefas, garantindo uma experiência produtiva para o usuário.

Ver Demo

Conteúdo

1. Sobre o Projeto
2. Tecnologias Usadas
3. Começando
4. Uso
5. Estrutura dos Arquivos
6. Reconhecimentos

Sobre o Projeto

Sendtype é uma plataforma versátil que centraliza todas as suas necessidades de organização, escrita e planejamento em um único espaço. Capture e organize seus pensamentos, gerencie projetos complexos ou até mesmo administre uma empresa inteira, tudo de acordo com suas preferências e necessidades específicas.

Com Notion, você tem a liberdade e a flexibilidade para estruturar suas atividades do jeito que melhor funciona para você, garantindo eficiência e produtividade máximas.

(voltar ao topo)

Tecnologias Usadas

A decisão de usar essa stack para este projeto foi baseada em vários fatores importantes que se alinham com as necessidades de um aplicativo web semelhante ao Notion.

• Next.js é uma estrutura React poderosa que permite renderização do lado do servidor (SSR) e geração de site estático (SSG), fornecendo otimizações de desempenho e SEO aprimorado. Seus recursos de roteamento e API integrados simplificam o desenvolvimento, tornando-o uma escolha ideal para criar um aplicativo da web dinâmico e responsivo.

• TypeScript aprimora JavaScript adicionando tipos estáticos, o que melhora a qualidade do código, a manutenibilidade e a produtividade do desenvolvedor. Com TypeScript, podemos detectar erros antecipadamente, entender melhor o código por meio de definições de tipo e aproveitar o suporte robusto do IDE.

• Tailwind CSS é uma estrutura CSS de utilidade que permite o desenvolvimento de IU rápido e consistente. Ele promove estilos reutilizáveis, reduz a necessidade de CSS personalizado e garante um design responsivo. As classes de utilidade do Tailwind facilitam a aplicação de estilos diretamente na marcação, acelerando o processo de desenvolvimento.

• Convex Oferece um serveless backend que escala automaticamente, reduzindo a necessidade de gerenciamento manual de infraestrutura. Fornece sincronização de dados em tempo real, garantindo que os usuários tenham as informações mais atualizadas. Simplifica o desenvolvimento de backend com uma API intuitiva e banco de dados gerenciado, permitindo que os desenvolvedores se concentrem na construção de melhorias.

• Clerk fornece uma solução de autenticação e gerenciamento de usuário simples e segura. Ele se integra perfeitamente com Next.js, lidando com inscrições, logins e sessões de usuário com facilidade.

• Shadcn/UI oferece um conjunto de componentes reutilizáveis, acessíveis e personalizáveis. Ajuda a construir interfaces consistentes e visualmente atraentes rapidamente, garantindo uma ótima experiência do usuário.

• Zod é uma biblioteca de declaração e validação de esquema TypeScript-first. Ajuda a definir e validar estruturas de dados, garantindo a integridade dos dados recebidos. A validação segura de tipo do Zod reduz erros de tempo de execução e melhora a confiabilidade do aplicativo.

• Zustand é uma biblioteca leve de gerenciamento de estado para aplicativos React. Ela oferece uma API simples, boilerplate mínimo e excelente desempenho. Zustand é ideal para gerenciar o estado global de forma previsível e eficiente.

• React Hook Form simplifica o manuseio, a validação e o envio de formulários. Ao utilizar hooks, ela minimiza novas renderizações e melhora o desempenho da aplicação, tornando o gerenciamento de formulários fácil.

• O Socket.io permite comunicação bidirecional em tempo real entre clientes e servidores. É perfeito para criar recursos como colaboração em tempo real e atualizações em tempo real, garantindo uma experiência de usuário dinâmica e interativa.

• Edgestore fornece uma melhor experiência do desenvolvedor facilitando o uploads arquivos. Ele garante que os dados sejam armazenados e acessados ​​de forma eficiente, aprimorando o desempenho e a escalabilidade do aplicativo.

(voltar ao topo)

Começando

Siga esses passos para rodar o app localmente com facilidade.

Pré-requisitos

É essencial que você tenha o node.js instalado no seu sistema para poder instalar a aplicação.

• yarn

  npm install yarn@latest -g

Instalando

1. Obtenha as chaves APIs gratuitas em https://www.convex.dev · https://www.clerk.com · https://www.edgestore.dev

2. Clone o repositório

   git clone https://github.com/jvalvarenga/sendtype.git

3. Navegue até o arquivo

   cd sendtype

4. Instale pacotes com o Yarn

   yarn install

5. Coloque suas APIs no arquivo .env.local

   CONVEX_DEPLOYMENT=
   NEXT_PUBLIC_CONVEX_URL=
   CONVEX_ISSUER_URL=
   
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=
   
   EDGE_STORE_ACCESS_KEY=
   EDGE_STORE_SECRET_KEY=

6. Inicie o servidor do Next.js

   yarn dev

7. Inicie o servidor do Convex

   npx convex dev

(voltar ao topo)

Uso

• Registro e login
  • Crie uma nova conta ou faça login com uma existente.
• Criar notas e páginas
  • Use o editor de markdown para criar e formatar notas. Organize-as usando páginas aninhadas.
• Colabore em tempo real
  • Publique e compartilhe suas notas com outras pessoas e colabore em tempo real.
• Faça o upload de arquivos
  • Compartilhe arquivos, adicione emojis e banners para suas notas.
• Pesquisar
  • Use a barra de pesquisa para encontrar notas e páginas rapidamente.

(voltar ao topo)

Estrutura dos Arquivos

Sendtype

├── frontend/               # Aplicação Next.js
│   │   ├── app/            # Rota das páginas, layout e APIs
│   │   ├── components/     # Componentes do projeto
│   │   ├── convex/         # Configuração dos esquemas do convex
│   │   ├── hooks/          # Contém ganchos usados ​​em todo o projeto
│   │   ├── lib/            # Arquivos específicos que são usados ​​globalmente em toda a aplicação
│   ├── public/             # Ativos públicos como imagens e favicons
├── next.config.js          # Configuração do Next.js
└── README.md               # Documentação do projeto

Reconhecimentos

• Notion fonte de inspiração Notion

(voltar ao topo)