https://github.com/abeatrizsc/notes

No projeto Notes, é possível gravar uma nota em áudio que será convertida para texto automaticamente | Typescript, ReactJS, Tailwind, Speech Recognition API.
https://github.com/abeatrizsc/notes

api radix-ui reactjs responsive sonner speech-recognition tailwind tailwindcss typescript vitejs

Last synced: about 1 year ago
JSON representation

No projeto Notes, é possível gravar uma nota em áudio que será convertida para texto automaticamente | Typescript, ReactJS, Tailwind, Speech Recognition API.

• Host: GitHub
• URL: https://github.com/abeatrizsc/notes
• Owner: ABeatrizSC
• Created: 2024-02-06T20:14:45.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-10T01:20:02.000Z (over 2 years ago)
• Last Synced: 2025-03-13T17:19:38.959Z (over 1 year ago)
• Topics: api, radix-ui, reactjs, responsive, sonner, speech-recognition, tailwind, tailwindcss, typescript, vitejs
• Language: TypeScript
• Homepage: https://notes-three-sooty.vercel.app
• Size: 90.8 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
 

    

    

    

    

    

    

    

    

    

    

    

    



 

  
Projeto Notes

    

  [Sobre](#sobre)   |    [Deploy](#deploy)   |    [Utilizacoes](#utilizacoes)   |    [Instalacoes necessarias](#instalacoes)   |    [Contato](#contato)



https://github.com/ABeatrizSC/notes/assets/105675205/d06f6da2-a512-40df-8ba2-f94f1a807c9f

📝Sobre



  
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.



🔗Deploy

Acesse a visualização completa do Projeto Notes  aqui.


💻Utilizações

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.

  



💾 Instalações necessárias

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.


Clone o repositório e entre em sua pasta

git clone https://github.com/ABeatrizSC/notes.git 







cd notes


Instalação das dependências do projeto

npm install


Inicie o servidor local utilizando o Vite.js

npm run dev







Dê ctrl + click  no endereço de link gerado para abrir o projeto em seu navegador.


🔍 Contato: