O KissNotes é um aplicativo de bloco de notas minimalista e intuitivo, construído com ReactJS, Vite e Styled Components. Ele oferece uma interface simples e fácil de usar para criar, editar e organizar notas de texto, links e outros recursos. O KissNotes é perfeito para quem procura uma maneira rápida e eficiente de tomar notas, organizar ideias e salvar informações importantes.
Front-end: ReactJS, Vite e Styled Components
O KissNotes é um gerenciador de notas desenvolvido utilizando as tecnologias React.Js e Styled Components. A aplicação oferece as seguintes páginas:
- Login: Autenticação do usuário com email e senha. Opção para recuperar senha esquecida. Criação de nova conta (link para "Criar Cadastro").
- Criar Cadastro: Formulário para inserir dados do usuário (nome, email, senha). Confirmação de senha. Opção para ler os termos de serviço e política de privacidade. Botão para finalizar o cadastro.
- Profile: Visualização dos dados do usuário (nome, email). Edição dos dados do usuário. Opção para alterar a senha. Visualização do histórico de logins. Botão para desativar a conta.
- Nova Nota: Título e conteúdo da nota em um editor de texto simples. Formatação básica (negrito, itálico, listas). Opção para adicionar tags. Salvar a nota como rascunho ou publicar.
- Home: Lista de todas as notas do usuário em ordem cronológica inversa. Filtros por tags e data de criação. Barra de pesquisa para encontrar notas específicas. Botão para criar nova nota.
- Editar Nota: Título e conteúdo da nota em um editor de texto simples. Formatação básica (negrito, itálico, listas). Opção para adicionar tags. Salvar as alterações na nota. Excluir a nota.
- Detalhes da Nota: Título, conteúdo, tags e data de criação da nota. Opção para editar a nota. Opção para excluir a nota. Visualização do histórico de edições da nota. Compartilhamento da nota por link ou e-mail.
202404132015.mp4
- Criação e edição de notas: O KissNotes permite que você crie e edite notas de texto com formatação básica, como negrito, itálico e listas. Você também pode adicionar imagens, vídeos e outros arquivos às suas notas.
- Gerenciamento de links: Adicione links para páginas da web ou outros recursos e organize-os em categorias personalizadas.
- Organização em pastas: Crie pastas e subpastas para organizar suas notas e links de forma eficiente.
- Pesquisa: Encontre rapidamente as notas e links que você procura usando a função de pesquisa.
- Compartilhamento: Compartilhe suas notas com outras pessoas por meio de um link ou e-mail.
Clone o projeto
git clone https://github.com/darioreisjr/kissnotes_reactjs.gitEntre no diretório do projeto
cd kissnotes_reactjsInstale as dependências
pnpm installInicie o servidor
pnpm run dev| Cor | Hexadecimal |
|---|---|
| Cor WHITE | |
| Cor ORANGE | |
| Cor GRAY_100 | |
| Cor GRAY_300 | |
| Cor BACKGROUND_900 | |
| Cor BACKGROUND_800 | |
| Cor BACKGROUND_700 |
import { Container, Links, Content } from "./styles";
import { Button } from "../../components/Button";
import { Header } from "../../components/Header";
import { Section } from "../../components/Section";
import { Tag } from "../../components/Tag";
import { ButtonText } from "../../components/ButtonText";
export function Details() {
return (
<Container>
<Header />
<main>
<Content>
<ButtonText title="Excluir nota" />
<h1>Introdução ao React</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
venenatis vel turpis a maximus. Nam sit amet lacinia turpis. In
hac habitasse platea dictumst. Pellentesque tincidunt, mauris vel
sollicitudin tempus, purus augue tincidunt neque, sit amet
iaculis ante nisl in odio. Nulla facilisi. Duis sit amet nunc sed
sapien volutpat viverra.
</p>
<Section title="Links úteis">
<Links>
<li>
<a href="#">https://darioreisjr.vercel.app/</a>
</li>
<li>
<a href="#">https://darioreisjr.vercel.app/</a>
</li>
</Links>
</Section>
<Section title="Marcadores">
<Tag title="express" />
<Tag title="nodejs" />
</Section>
<Button title="Voltar" />
</Content>
</main>
</Container>
);
}
- Implementar um sistema de lembretes para notificar os usuários sobre notas importantes ou prazos.
- Adicionar suporte para colaboração em tempo real.
- Permitir a integração com calendários e gerenciadores de tarefas.
- Tornar o aplicativo offline para que os usuários possam acessar suas notas e criar novas notas mesmo sem conexão com a internet.
- Criar um sistema de recompensas para incentivar os usuários a usar o KissNotes com mais frequência.
- Ao implementar essas melhorias, o KissNotes se tornará um aplicativo de bloco de notas ainda mais poderoso, versátil e fácil de usar, atendendo às necessidades de um público ainda maior de usuários.
- Domínio de conceitos: Aprofundamento na construção de interfaces web com ReactJS, incluindo componentes, estado, props, hooks e gerenciamento de rotas.
- Experiência com Vite: Aprimoramento no uso do Vite como ferramenta de bundling moderna, rápida e eficiente para projetos ReactJS.
- Maestria em Styled Components: Domínio da biblioteca Styled Components para estilização declarativa e reutilizável de componentes ReactJS.
- Arquitetura de Software: Planejamento e implementação de uma arquitetura de software modular e escalável para um aplicativo web robusto.
- Gerenciamento de Estado: Domínio de técnicas de gerenciamento de estado no ReactJS, utilizando Redux ou Context API para garantir a consistência dos dados da aplicação.
- Acessibilidade: Implementação de práticas de acessibilidade para garantir que o aplicativo seja utilizável por pessoas com deficiência.
- Testes Unitários: Aprimoramento na escrita de testes unitários para garantir a qualidade e confiabilidade do código.
- Desempenho: Otimização do código para melhorar o tempo de carregamento das páginas e a fluidez da interface.
- Segurança: Implementação de medidas de segurança para proteger os dados dos usuários.
- Gerenciamento de Projetos: Desenvolvimento de habilidades de gerenciamento de projetos para planejar, executar e monitorar o desenvolvimento do aplicativo.
- Trabalho em Equipe: Aprimoramento da capacidade de trabalhar em equipe em um projeto colaborativo, comunicando-se de forma eficaz e resolvendo conflitos de forma construtiva.
- Aprendizagem Contínua: Reconhecimento da importância da aprendizagem contínua no desenvolvimento de software, mantendo-se atualizado com as últimas tecnologias e tendências.
- Importância do Design: Reconhecimento da importância de um bom design de interface para a usabilidade e a experiência do usuário.
- Valor do Feedback: Compreensão do valor do feedback dos usuários para melhorar o aplicativo e atender às suas necessidades.
- Gestão de Tempo: Desenvolvimento de habilidades de gestão de tempo para cumprir prazos e entregar o projeto dentro do cronograma.
- Superação de Desafios: Aprimoramento da capacidade de superar desafios técnicos e encontrar soluções inovadoras para problemas.
- O processo de construção do KissNotes foi uma experiência valiosa que proporcionou aprendizados significativos em diversas áreas do desenvolvimento de software. As habilidades e conhecimentos adquiridos durante o projeto serão essenciais para futuros projetos e contribuirão para o meu crescimento profissional como desenvolvedor web.
Para suporte ou melhorias, mande um email para dev.darioreis@gmail.com
Se você tiver algum feedback, por favor nos deixe saber por meio de dev.darioreis@gmail.com
Segue alguns projetos relacionados