Desenvolvimento de um Mercado de Filmes Online com Angular

Vamos explorar em detalhes o desenvolvimento de um mercado de filmes online usando o Angular, um dos frameworks de desenvolvimento web mais populares da atualidade. Discutiremos as tecnologias e técnicas utilizadas, desde a integração de APIs até a implementação de recursos responsivos.

Link do projeto.

https://ramontrndd.github.io/marketplace-angular

Link do repositório.

https://github.com/ramontrndd/marketplace-angular

1. Integração de API Rest:

A base do projeto foi a integração de uma API Rest para obter informações sobre os filmes disponíveis. Utilizamos requisições HTTP para consumir esta API, permitindo que os dados fossem atualizados em tempo real. Essa abordagem proporcionou uma vasta gama de filmes e informações detalhadas para os usuários do mercado.

2. Implementação de um Snackbar Dinâmico:

Para fornecer uma experiência interativa aos usuários, implementei um snackbar dinâmico. Quando os usuários adicionam ou removem itens do carrinho, um snackbar é exibido, fornecendo feedback imediato sobre a ação realizada. Isso aumenta a usabilidade e a satisfação do usuário durante a navegação e compra de filmes.

3. Utilização de Angular 17:

Aproveitamos ao máximo as novas funcionalidades e melhorias do Angular 17. Uma das características mais impactantes foi o uso de sinais (signals) para otimizar o fluxo de dados dentro da aplicação. Isso resultou em uma performance mais eficiente e uma manipulação de dados mais elegante em toda a aplicação.

4. Desenvolvimento de um Layout Totalmente Responsivo:

Um aspecto crucial do projeto foi o desenvolvimento de um layout responsivo e funcional em todos os tipos de dispositivos. Utilizamos técnicas avançadas de SASS e o poderoso sistema de layout do Angular para garantir que a experiência do usuário fosse consistente em smartphones, tablets e desktops de alta resolução. Isso incluiu o uso de media queries, flexbox para criar uma interface adaptável e atraente.

5. Refatoração do Projeto:

Houve uma refatoração para garantir uma estrutura limpa e modularizada. Isso facilitou a manutenção e a escalabilidade do código ao longo do tempo.

6. Deploy usando GitHub Pages e GitHub Actions CI/CD:

Para implantar nosso mercado de filmes online, utilizamos o GitHub Pages como plataforma de hospedagem. Além disso, implementamos o GitHub Actions CI/CD para automatizar o processo de implantação. Cada vez que um commit for feito no repositório do GitHub, o GitHub Actions era acionado para automatizar as atualizações na aplicação em produção, garantindo um fluxo de desenvolvimento contínuo e eficiente.

7. Implementação de um Botão de Dark Mode:

Pensando na experiência do usuário e na personalização visual, adicionamos um botão de Dark Mode ao projeto. Ao clicar neste botão, os usuários podem alternar entre o tema claro e o tema escuro, proporcionando uma experiência visual mais confortável, especialmente em ambientes com pouca luminosidade.