Teste Supliu.

Esta é uma solução para o teste de conhecimento Supliu tecnologia, proprosto pela empresa Supliu tecnologia.

🎯 Resumo de conteúdos

Visão Geral.

🌐 O desafio

Os usuários devem ser capazes de:

  • Visualizar o layout ideal para o aplicativo, dependendo do tamanho da tela do dispositivo.
  • Visualizar os estados de foco para todos os elementos interativos na página.
  • Visualizar toastify de sucesso e error nos inputs da página inicial e formulários de edição da discografia.
  • Visualizar Esqueleto da página enquanto a requisição é feita na API.
  • Interações ao clicar nos botões de submit nos formulários e botão de pesquisar na página inicial.
  • Inteção de excluir álbum e excluir músicas na tabela da página inicial.

Captura de tela

  • Tabela Desktop

Tela desktop da página inicial.

  • Tabela Tablet

Tela do tablet na tabela da página inicial

  • Tabela Mobile

Tela do celular na tabela da página inicial

  • Formulário de cadastro de álbuns Desktop

Tela de formulário de cadastro de álbuns no desktop

  • Formulário de cadastro de músicas Desktop

Tela de formulário de cadastro de músicas no desktop

  • Formulário no Tablet

Tela de formulário de cadastro no tablet

  • Formulário no celular

Tela de formulário de cadastro no celular

  • Formulário no celular

Tela de formulário de cadastro no celular

Links

📃 Meu processo

Construído com

  • Typescript
  • Axios
  • React-hook-form
  • react-router-dom
  • Yup
  • react-icons
  • react-toastfy
  • Styled-Components
  • Design responsivo

Continuação dos desenvolvimentos

Pretendo continuar fazendo projetos de desafios entre outros para melhorar meus conhecimentos em ReactJS, TypeScript e outras tecnologias.

Recursos utilizados

  • Developer Mozilla - A documentação do Developer Mozilla é essencial para compreender as funções e conseguir aplicar as mesmas no projeto.

  • Typescript - Documentação do Typescript utilizada para realizar a tipagem da propriedades.

  • React-hook-form - Utilizado para fazer o formulário de inserção dos inputs.

  • Yup - Utilização do yup para formatação do formulário.

  • React-router-dom - Documentação utilizada para solução de dúvidas em relação ao react-router-dom

  • React-toastify - Documentação utilizada para implementação do react-toastify

  • React-icons - Site utilizado na busca de ícones para implementação do site.

  • Ioasys-books - Projeto do Github que serviu como base de algumas funções e soluções utilizadas neste projeto.

  • Be-The-Hero - Projeto do Github que serviu como base de algumas funções e soluções utilizadas neste projeto.

  • Github-Explorer - Projeto do Github que serviu como base de algumas funções e soluções utilizadas neste projeto.

🎖️ Autor