💻 Sobre o projeto

Este projeto foi criado para avaliação final do curso DEVInHouse em parceria com ACATE e ConectaNuvem. Foram utilizados vários dos conhecimentos adquiridos ao longo do curso.

O site online está hospedado no link: https://labinventary-369921.web.app/#/login

A ideia do projeto consiste na construção de uma aplicação com o framework Vue JS no Front-end e Python + Flask no BackEnd para uma Single Page Application de Inventário com a finalidade de controlar o empréstimo de itens aos colaboradores. Para alcançar o resultado almejado, os seguintes aprendizados foram aplicados na confecção do projeto:

HTML: uso das principais tags como head, meta, title, body, div, h1, form, input, button, ul, li. Atributos de tags como class, id, type. Inclusão de arquivos de estilos (css) e de script (js) na página.
CSS/SASS: estilização da página, botões, inputs, alteração de atributos dos elementos da tela de acordo com a interação do usuário, (UX), responsividade a diferentes tamanhos de telas (mobile📱/web💻)
Vue JS / Javascript: vue router, vuex, axios, variáveis, arrays, funções síncronas e assíncronas, manipulação do DOM (eventos, elementos e seus atributos), manipulação de objetos (JSON), utilização do localStorage, uso de bibliotecas Javascript.
Cypress: para utilização nos testes de componentes e E2E no frotend.
Flask + Python: funções sincronas e assíncronas, classes, testes unitarios, construção de uma API em MongoDB.
Versionamento: utilização do github como ferramenta de versionamento, utilizando os conceitos de gitflow.

🖥️ Demonstração

⚙️ Instalação

IDE recomendada

VSCode + Volar (necessário desabilitar o Vetur) + TypeScript Vue Plugin (Volar).

Setup do Projeto

# Clone este repositório
$ git clone https://github.com/DEVin-ConectaNuvem/M3P2-LABinventory-FrontEnd-Squad1

Instale as dependências

npm install

Compilação para desenvolvimento

npm run dev

Compilação e Build do projeto

npm run build

📝 Funcionalidades

As seguintes funcionalidades foram implementadas:

Registro e logins de usuários com validação;
Dashboard com estatísticas do sistema e ferramentas de pesquisa;
View para adição/edição e listagem de colaboradores;
View para adição/edição e listagem de itens;
Possibilidade de empréstimo de itens para colaboradores;

🎨 Layout

O aplicativo foi criado sob o conceito de design responsivo mobile first, de modo a atender diversos tamanhos de telas.

📱 Mobile

💻 Web

💡 Tecnologias utilizadas:

Vue.JS;
JavaScript;
HTML;
CSS;
SASS;
Bootstrap.
Cypress.
Python.
Flask.

👋 Desenvolvedores

_{Breno Martins}	_{Luiz Gustavo Seemann}	_{Eduardo Martins Ribeiro}
_{Rafael Telles Carneiro}	_{Bruno V}	_{Thiago William}

🤝 Agradecimentos:

A realização deste projeto apenas foi possível em razão do excelente ensino disponibilizado por toda a equipe DEVInHouse e ConectaNuvem!

Breno-MT/LABInventory-FrontEnd