[PT-br - Português do Brasil 🇧🇷]

Carrossel mobile

Projeto de estudo implementando um carrossel versão mobile usando vanilla Javascript.

Esse app carrega os dados através da AmiiboAPI (Copyright © 2021;Coded by Nevin Vu) e os apresenta na forma de um componente carrossel.

Conceitos abordados:

• ECMAScript 6: Sintaxe de Classes, arrow functions, Herança de classe, operador spread, etc;
• Promises -> Chamadas assíncronas para API e classe customizada HttpService;
• Padrão Singleton -> Implementado na classe State para ser utilizada em todas as classes responsáveis;
• Padrão Observable -> Implementado na classe State para notificar todos os seus inscritos sobre as mudanças no estado (classe State);
• Arquitetura MVC -> Faz uso de Template Strings para criar a camada View;
• Serviços para consumir os dados da API e manter a responsabilidade da lógica de processamento;
• Injeção de dependência para desacoplar as classes;
• Arquitetura BEM para CSS;
• Variáveis CSS;
• CSS partials e imports;
• Animações Placeholder para entregar uma resposta mais rápida antes do conteúdo ser carregado;

Para rodar

Para esse projeto, eu usei a extensão do VSCode chamada Live Server para testar e rodar o app. Veja as instruções no site da extensão (em inglês)

Demo

Protótipo usado como referência do site Dribble:

Vídeo Demo:

[US - English 🇺🇸]

Mobile Carousel

Study project implementing a "mobile" carousel app using vanilla Javascript.

This app loads its data based on the AmiiboAPI (Copyright © 2021;Coded by Nevin Vu) and presents it in the form of a carousel component.

Concepts approached here:

• ECMAScript 6: Class syntax, arrow functions, Class inherintance, spread operator, etc;
• Promises -> Asnyc calls to API and custom HttpService class;
• Singleton pattern -> Implemented on the State class to be used for all responsible classes;
• Observable pattern -> Implemented on the State class to notify subscribers about changes on state;
• MVC-like architecture -> Using Template Strings to create the View Layer;
• Services to consume data from API and keep the parsing logic responsibility;
• Dependency injection to decouple classes;
• BEM architecture for CSS;
• CSS variables;
• CSS partials and imports;
• Placeholder animations to deliver a faster response before the content is loaded;

To run

For this project I used VSCode Live server extension to test and run the app. See instructions on the extension site

Demo

Mockup used as reference from Dribble site:

Demo video: