projeto_notes.mp4
- Durante a Next Level Week (NLW) da Rocketseat, foi criado uma aplicação onde é possível gravar notas utilizando áudios que serão convertidos em texto automaticamente;
- Possui também outras funcionalidades, como: Busca, exclusão, validação para salvamento de notas, verificação de disponiblidade da API utilizada no navegador do usuário e uso do LocalStorage para a permanência dos dados mesmo ao recarregar a página;
- No desenvolvimento, pude aprender mais sobre os conceitos do ReactJS e seus componentes, integração e uso da API Speech Recognition, o framework de estilização Tailwind, entre outras tecnologias descritas mais detalhadamente no tópico Utilizações.
Acesse a visualização completa do Projeto Notes aqui.
Feito através do editor Visual Studio Code.
Tecnologias utilizadas:
- HTML: Linguagem de marcação utilizada na construção de páginas na Web;
- CSS: Linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML ou em XML;
- Tailwind: Framework CSS. Através de classes utilitárias, é possível adicionar estilos de maneira mais ágil na criação de aplicações;
- Typescript: Linguagem de programação baseada em Javascript, com recursos e ferramentas novas não presentes na linguagem nativa, como tipagem forte;
- React.js: Biblioteca Javascript que permite aos desenvolvedores criar interfaces de usuário interativas e reutilizáveis. Sua abordagem baseada em componentes facilita a construção de aplicativos web modulares e escaláveis;
- Speech Recognition API: Esta interface de programa de aplicação (API) permite o reconhecimento de fala e processamento da mesma para um formato escrito;
- Radix UI: Biblioteca de componentes UI de código aberto otimizada para desenvolvimento rápido, fácil manutenção e acessibilidade. Ela disponibiliza componentes com apenas seu funcionamento, sem nenhum visual pré-estabelecido, facilitando a implementação de estilos próprios a cada componente;
- Date-fns: Biblioteca que facilita a manipulação de datas;
- Sonner: Biblioteca ReactJS de componentes toast (alertas);
- ViteJS: É um build tool que permite um desenvolvimento rápido para projetos web. Ele simula um servidor durante o desenvolvimento para melhorar o desempenho e a produtividade.
Para executar os seguintes comandos em seu terminal, é necessário ter o Git e o Node.JS (preferencialmente na versão LTS) instalados previamente e configurados.
git clone https://github.com/ABeatrizSC/notes.git
cd notes
npm install
npm run dev
Dê ctrl + click no endereço de link gerado para abrir o projeto em seu navegador.