Desafio de Desenvolvimento Front-End de Formulário para Cadastro de Fornecedores e Produtos, com o objetivo de avaliar conhecimentos técnicos, requisitos e capacidade de conceber soluções.
Deployment
.
Reportar Bug
Este projeto foi desenvolvido como parte de um teste técnico para uma oportunidade de estágio, o desenvolvimento foi seguindo o Layout já existente com um prazo de entrega de três dias. Encarei esse desafio com determinação, embora tenha enfrentado algumas complexidades, especialmente quando explorei o uso do jQuery. Segui rigorosamente o guia de estilo Fluig, o que tornou o desenvolvimento mais fluido, especialmente quando comparado ao Tailwind CSS. Estou satisfeito com o resultado alcançado, considerando as limitações de tempo e experiência. Tenho planos de aprimorar este projeto no futuro, conforme aprofundo meus conhecimentos e habilidades no desenvolvimento front-end.
-
HTML: na versão 5;
-
JAVASCRIPT: Dar preferência a ao ECMA-6 no desenvolvimento do código;
-
BOOTSTRAP:
-
Outras Considerações:
- Usar documentação de recursos e estilos conforme este link
- Não deverão ser utilizados outros recursos tecnológicos para desenvolvimento
Tive minha primeira experiência com jQuery e Bootstrap. Compreendi rapidamente o propósito de cada uma dessas tecnologias, como elas funcionam e até mesmo sua origem. Achei o jQuery muito agradável de trabalhar, uma vez que algumas ações que executei durante o projeto se mostraram significativamente mais simples do que com JavaScript puro. Embora saiba que o jQuery não seja tão amplamente utilizado nos dias de hoje, devido à evolução do JavaScript, ainda aprecio suas facilidades.
Além disso, o Bootstrap provou ser uma ferramenta altamente eficiente para lidar com estilos e componentes pré-estilizados, o que simplificou a criação do modal e do spinner no projeto.
Resumindo, com este sistema, você segue um processo simples:
-
Comece inserindo as informações do fornecedor.
-
Em seguida, adicione pelo menos um produto e forneça os detalhes, como quantidade em estoque e valor unitário.
-
Inclua pelo menos um arquivo anexo.
-
Clique no botão 'Salvar Fornecedor'.
-
Agora, os dados serão enviados e exibidos no console do navegador.
Dessa forma, você pode registrar fornecedores, produtos e documentos de maneira eficiente.
- Preenchimento automático do endereço com base no CEP.
- Cálculo automático do valor total, considerando o valor unitário do produto e a quantidade em estoque.
- Capacidade de adicionar e remover produtos e anexos dinamicamente.
- Download automático de arquivos anexados.
Neste projeto, empreguei as seguintes tecnologias e ferramentas:
-
JavaScript: Utilizado para a criação de conteúdo dinâmico.
-
HTML: Empregado para a estruturação do formulário.
-
CSS (Style Guide Fluig): Responsável pela estilização.
-
Bootstrap: Aplicado para estilizar o modal e o componente spinner.
-
Vite: Utilizado para a inicialização do projeto.
-
ViaCEP API: Incorporada para automatizar o preenchimento do endereço com base no CEP informado.
# 1° Clone este repositório utilizando HTTPS OU SSH
# HTTPS
$ git clone https://github.com/Fransuelton/desafio-vflows.git
# SSH
$ git clone [email protected]:Fransuelton/desafio-vflows.git
# 2° Acesse a pasta do projeto no terminal
$ cd desafio-vflows
# 3° Instale as dependências
$ npm install
# 4° Execute a aplicação em modo de desenvolvimento
$ npm run devPara acessar o protótipo Figma que elaborei como guia para o desenvolvimento seguindo o Layout original Clique aqui
- Fransuelton - Desenvolvedor Front-End
- Logo de formulário usado no projeto foi criados por Smashicons - Flaticon
