Bem-vindo ao projeto Lista de Produtos! Este é um aplicativo com front-end desenvolvido com Angular e backend desenvolvido com Yii2, com o objetivo de fornecer uma lista de produtos de forma minimalista, performática e eficiente. 🚀
- Filtragem Dinâmica: Permite filtrar os produtos por nome ou categoria, proporcionando uma experiência de busca intuitiva. 🔍
- Ordenação Alfabética: Os produtos são organizados de forma alfabética para facilitar a busca e a navegação. 📝
- Paginação: Divide a lista de produtos em páginas, facilitando a navegação. 📄
- CRUD de Produtos: Possibilita criar, visualizar, editar e excluir produtos. ✏️ 🗑️
- Validação de Formulários: Utiliza a validação de formulários do Angular para garantir dados válidos e consistentes. ✅
- UI Responsiva e Amigável: Utiliza o framework Bootstrap para criar componentes responsivos e amigáveis. 🎨
- Componentes Reutilizáveis: O código é modular e escalável, com componentes reutilizáveis para acelerar o desenvolvimento e manter a consistência da UI. 🔄
- Loader para Melhor UX: Implementa loaders para indicar carregamento de dados e melhorar a experiência do usuário durante as interações. ⏳
-
Instale as dependências do projeto:
npm install
-
Inicie o aplicativo Angular:
ng serve
-
Acesse o aplicativo no navegador em http://localhost:4200/. 🌐
- Conexão com Backend Yii2: Integrado com uma API backend desenvolvida em Yii2, permitindo operações CRUD de produtos e categorias.
- Banco de Dados MySQL: Utiliza um banco de dados MySQL para armazenar os dados dos produtos e categorias.
- Migrações Automáticas: A API cria automaticamente o banco de dados e suas tabelas quando utiliza o comando
php yii migrate
. - Controllers para Manipulação de Dados: Utiliza dois controllers para manipular o banco de dados através das operações CRUD.
-
Instale as dependências do projeto com Composer:
composer install
-
Inicie o servidor PHP para rodar a API na porta 8000:
php -S 127.0.0.1:8000
-
Execute as migrações para criar o banco de dados e as tabelas:
php yii migrate
O aplicativo possui duas telas acessíveis por diferentes rotas:
- Dashboard Inicial: A rota
/
exibe o dashboard inicial com a lista de produtos. - Criar Novos Produtos: A rota
/new
permite criar novos produtos. ➕
Ao clicar em um produto no dashboard, você pode:
- Visualizar: Visualizar os detalhes do produto.
- Editar: Editar os dados do produto, incluindo nome, quantidade e categoria. 🖊️
- Minimalismo e Paleta de Cores: O design foi criado com um estilo minimalista, seguindo a paleta de cores da empresa.
- Atomic Design: A UI foi desenvolvida seguindo o conceito de Atomic Design, visando a reutilização de componentes para acelerar o desenvolvimento e garantir a escalabilidade.
- Bootstrap: Utiliza o framework Bootstrap para criar componentes responsivos e melhorar a consistência visual da aplicação. 🎨
Obrigado por conferir o projeto Lista de Produtos! 🚀