Desenvolvido durante a semana 05/02-07/02 de 2024 no NLW Expert, promovido pela Rocketseat 🚀. Apesar de não ser considerado um projeto de portifólio (Porque não foi eu quem idealizou e arquitetou o projeto) porém acompanhei e codei juntamente durante as aulas, e isso me fez perceber que ainda preciso aprender muita coisa de React e Typescript. E com um "simples" projeto você pode aprender skills avançadas.
O bom de projetos como este de Workshops, Bootcamps, cursos e etc... É que você acompanhou o seu desenvolvimento e codou juntamente com o "mestre jedi", então você viu (E pode ter entendido 100%) a criação do projeto. Isso é excelente para ideias futuras, pois você poderá se espelhar (Até mesmo copiar) funcionalidades que você já conhece de projetos guardados que você tem, com isso poderá criar e idealizar projetos próprios para o seu portifólio.
O Notes expert é um app web de notas onde você poderá criar suas notas por texto ou por áudio
Requisitos Funcionais:
-
Pesquisa de Notas:
- O aplicativo deve permitir que o usuário pesquise suas notas através de um input, filtrando por palavras contidas nas notas, sem distinguir entre maiúsculas e minúsculas.
-
Criação de Notas:
- O aplicativo deve fornecer um botão de criação de notas que, ao ser clicado, abre um modal com opções de criação.
-
Opções de Criação:
- O modal de criação de notas deve oferecer duas opções: texto e áudio.
-
Criação de Nota por Texto:
- Se o usuário escolher criar nota por texto, o modal deve apresentar um textarea para digitar a nota.
- Deve haver um botão para salvar a nota.
-
Criação de Nota por Áudio:
- Se o usuário optar por criar nota por áudio, o aplicativo deve solicitar permissão para gravar áudio.
- O modal deve exibir um botão com a opção de parar e salvar posteriormente.
- Se o navegador não suportar a Speech Recognition API, mostrar uma mensagem informando a incompatibilidade.
-
Exclusão de Texto no Modal:
- Se o usuário apagar todo o texto durante a criação da nota, o modal deve retornar ao estado inicial de escolha de opções.
-
Notificação de Salvamento:
- Ao clicar em salvar nota, o aplicativo deve exibir um toast notificando que a nota foi salva.
-
Visualização Detalhada de Nota:
- O usuário deve poder visualizar mais detalhes de uma nota ao clicar sobre ela.
- Deve haver um modal que exiba o conteúdo completo da nota, incluindo seu cabeçalho com o tempo de criação.
-
Exclusão de Nota:
- No modal de visualização detalhada, deve existir um botão para excluir a nota, se desejado pelo usuário.
Requisitos Não Funcionais:
-
Armazenamento Local:
- As notas devem ser armazenadas no localstorage do dispositivo para persistência, garantindo que não se percam ao reiniciar a página.
-
Compatibilidade de Navegadores:
- O aplicativo deve ser compatível com os navegadores suportados pela Speech Recognition API para oferecer a funcionalidade de criação de notas por áudio.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- Vite: Tooling frontend usado para iniciar e criar a aplicação;
- React: Usado para a componentização e manipulação de estados dos componentes;
- Typescript: Linguagem utilizada para desenvolver o projeto;
- TailwindCSS: Principal fonte de estilização do projeto;
- Radix UI: Utilizado para a criação dos modais;
- Sonner: Criação do Toast de notificação;
- date-fns: Manipulação de datas/horas;
- Lucide React: Para criar o icon de close;
- Speech Recognition API: Utilizado para o reconhecimento de voz;
- Git/Github: Para o versionamento de código;
- Vite.js - Faster frontend tooling.
- TailwindCSS - Tailwind CSS é uma estrutura CSS inovadora para construir sites modernos rapidamente, sem nunca sair do HTML.
- Radix UI - Componentes, ícones e cores para criar uma interface de usuário acessível e de alta qualidade. Gratuito e de código aberto.
- Date-fns - Imutável e Puro. date-fns é construído usando funções puras e sempre retorna uma nova instância de data em vez de alterar a passada.
- SpeechRecognition - The SpeechRecognition interface of the Web Speech API is the controller interface for the recognition service.
- Can I use - Um site para pesquisar se uma ferramenta é compatível com um navegador.
João Alison TI 👨🏽💻
2024