/hypnix_ang

Esta é uma landing page simples de uma loja de eletrônicos fícticia. Para saber mais leia o README.

Primary LanguageTypeScript

Bem vindo(a) a esse repositório, esse projeto foi criado com muito carinho. Espero que se divirta. Haha! ;)

Este projeto foi criado com intuito de ser a solução de um desafio que recebi durante o curso de desenvolvimento front-end do SENAI, desafio esse no qual fui desafiado a recriar o HYPNIX , porém, em Angular usando a biblioteca Angular Material, bootstrap e com funcionalidades específicas.

DEPLOY ALTERNATIVO: https://hypnix.netlify.app/

Nesse projeto você pode:

  • desfrutar da landing page inicial e páginas de alta performance e responsivas;
  • utilizar um sistema de login integrado a API externa para autenticação e criação de usuários;
  • gerenciamento de produtos(ver, criar, atualizar e excluir) feature ADMIN;
  • gerenciamento de usuários(em breve...) feature ADMIN;

Vale ressaltar também que alterei um pouco a interface em comparação com o ultimo protótipo para ficar mais perfomática, dinâmica e divertida.

<>FEATURES ADMIN<>(obs: você pode criar seu próprio usuario!!!)

  • usuario: admin
  • senha: admin

Funcionalidades requisitadas durante o desafio:

  • Desenvolver a tela que Lista de Produtos;
  • Listar produtos na Tela inicial com as informações da API;
  • Listar produtos na Área Restrita com as informações da API;
  • Criar um Service para Cadastro de Produtos;
  • Desenvolver a tela de Cadastro Produto;
  • Desenvolver utilizando componentes do Angular Material e Bootstrap;
  • Desenvolver Service de Login;
  • Desenvolver tela de Login;
  • Criar token;
  • Criar usuário e senha para redirecionar a página de Área Restrita;
  • Utilizar Guards do Angular;
  • Configurar Rota para redirecionar a área restrita;
  • Esconder Menu.

Vale também ressaltar que fui um pouco além do pedido nesse desafio e me empenhei em criar outras funcionalidades:

  • criação de API externa para requisições com endpoints para o serviço de Usuario e o de Produtos;
  • CRUD de produtos com API externa;
  • sistema para autenticação e criação de novos usuários com API externa;
  • menu responsivo que é exibido conforme a página da aplicação e tamanho de tela.

Tecnologias usadas:

  • Angular MATERIAL 15.2.9
  • Angular CLI 15.0.4
  • Bootstrap 5.3.3
  • HTML5
  • CSS3
  • TypeScript 4.8.2