Este repositório foi um desafio realizado pela corporação Rocketseat com intuito de firmar conhecimentos e fundamentos de componentização utilizando ReactJS

A aplicação é um sistema de serviço de streaming de séries e filmes conforme imagem ilustrada abaixo:

Observando o código original, todo código HTML da aplicação estava sendo feita dentro do arquivo App.tsx. Por mais que no momento o código em questão esteja pequeno, é preciso avaliar a questão de novas features, ficará cada vez mais dificil dar manutenção ao código.

O objetivo desse desafio é identificar o que pode ser componentizado no momento para deixar a aplicação com um código limpo e escalável.

Analisando o código e a aplicação, foi possível detectar os seguintes elementos a serem componentizados:

• Sidebar: conteúdo que lista os botões de gênero de filmes
• Content: conteúdo que lista os filmes de acordo com o gênero selecionado

Foi realizado então a componentização dos elementos, possibilitando assim mais escalabilidade na aplicação e um código limpo.

Antes de rodar a aplicação deverá ter instalado e configurado previamente o NodeJS e Yarn.

Para instalar as dependências do projeto, digite a linha de comando abaixo:

$ yarn

A aplicação possui um Fake API utilizando MirageJS para listar os filmes e gêneros que serão exibidos em tela. Execute o servidor fake para consumir a API Fake:

$yarn server

E logo em seguida, execute em outro terminal o comando para executar o frontent da aplicação:

$ yarn dev

No navegador, abra a rota http://localhost:8080 e será exibido a aplicação com a melhoria dos elementos componentizados.

Desafio concluído com sucesso! :)