Este projeto desenvolvido através da Rocketseat, é uma aplicação desenvolvida em React e TypeScript, com o objetivo de fornecer uma plataforma para o cadastro e visualização de anotações. Com esta aplicação, os usuários podem criar notas de texto ou de áudio utilizando reconhecimento de voz (speech recognition), visualizar essas notas em forma de cards na tela, excluir notas indesejadas e filtrar ou pesquisar notas com base em seu conteúdo.
-
Cadastro de Notas: Os usuários podem criar novas notas de texto ou de áudio.
-
Reconhecimento de Voz: A aplicação permite a criação de notas por meio de reconhecimento de voz.
-
Visualização de Cards: As notas são exibidas em forma de cards na tela principal da aplicação.
-
Exclusão de Notas: Os usuários têm a opção de excluir notas que não são mais necessárias.
-
Filtragem e Pesquisa: É possível filtrar ou pesquisar notas com base em seu conteúdo, facilitando a localização de informações específicas.
-
React: Biblioteca JavaScript para a construção de interfaces de usuário.
-
TypeScript: Superset de JavaScript que adiciona tipagem estática ao código.
-
Tailwind CSS: Framework CSS para o desenvolvimento de interfaces modernas e responsivas.
-
Speech Recognition API: API que permite o reconhecimento de voz em navegadores compatíveis.
-
Radix UI: Biblioteca de componentes React acessíveis e com design moderno.
-
Biblioteca Lucide: Biblioteca de ícones personalizável para React, ideal para adicionar ícones elegantes e funcionais ao seu aplicativo.
-
Biblioteca Sonner: Biblioteca de toasts para React que permite exibir notificações breves e informativas em sua aplicação.
-
Git: Sistema de controle de versão distribuído para rastreamento de alterações no código-fonte.
-
Vite: Build tool que permite o desenvolvimento rápido de projetos front-end com React e outras tecnologias.
-
Hooks de Estado (useState): Utilizados para gerenciar o estado dos componentes, incluindo o estado de pesquisa, notas e gravação de áudio.
-
Local Storage: Utilizado para armazenar as notas no navegador do usuário.
-
Componentização: Utilização de componentes para modularizar a aplicação e promover a reutilização de código.
-
Event Handling: Manipulação de eventos como criação e exclusão de notas, manipulação de pesquisa e controle de gravação de áudio.
-
List Rendering: Renderização dinâmica da lista de notas utilizando o método map.
-
Conditional Rendering: Renderização condicional de componentes e elementos com base em determinadas condições.
O projeto foi desenvolvido com responsividade utilizando o framework Tailwind CSS, garantindo uma experiência de usuário consistente em diferentes dispositivos e tamanhos de tela.
git clone https://github.com/bielxrd/nlw-expert.git
npm install
npm run dev
O projeto foi implantado no Netlify.
Você pode acessá-lo em Expert Notes.