Skip to content

CRUD Angular - Segundo projeto avaliativo do DEVinHouse

Notifications You must be signed in to change notification settings

get-Friday/DIH-Solar-Energy

Repository files navigation

Solar Energy

Projeto avaliativo do DevInHouse desenvolvido com Angular versão 13.3.3.

Sobre

O projeto DevInHouse Solar Energy é um sistema de cadastro e monitoramento de unidades geradoras de energia. A primeira tela implementa um sistema de login com validação de formulário, ao acessar utilizando as credenciais de administrador será redirecionado para o dashboard que contém informações gerais das unidades de energia juntamente de um gráfico com a geração geral de energia ao longo do ano. Uma tela de listagem de unidades com opções para adicionar, editar ou remover uma unidade, e uma tela de lançamento de geração mensal.

Rodando o projeto

Rode npm run all para o servidor Angular e o protótipo de banco de dados. O servidor angular roda na rota http://localhost:4200/ enquanto o servidor json roda na rota http://localhost:3000/.

Acessando o projeto

A primeira tela do projeto implementa um login que impede usuários não permitidos de acessar a tela de administrador, para garantir seu acesso use as seguintes credenciais:

Email: admin@email.com

Senha: admin

Recursos

O projeto coloca em prática estudos em:

  • Angular: utilização de recursos como: angular router, route guards, lazy-loading feature modules, httpclient, services, components, modules, manipulação de dados usando data binding (interpolação, property binding, event binding), diretivas de atributo (ngClass) e de estrutura (ngFor, ngIf), manipulação de dados entre componentes usando input(property) e output(event).
  • Typescript: utilizar recursos do TS, inferindo tipos, interfaces, classes, constantes, propriedades, métodos, arrays, funções .forEach(), .filter(), .reduce().
  • CSS: Estilizar a página, os botões, inputs, alterar atributos dos elementos da tela de acordo com a interação do usuário para uma melhor experiência do usuário (UX), alinhamento de elementos usando flex-box. Utilizando pré-processador SASS (SCSS) para aumentar a produtividade da estilização.

Desenvolvido em

wakatime

About

CRUD Angular - Segundo projeto avaliativo do DEVinHouse

Topics

Resources

Stars

Watchers

Forks