Este repositório é um fork do desafio da Junto Seguros para a vaga de Desenvolvedor Frontend, a descrição completa do desafio pode ser encontrada no link.

A base do desafio é criar um SPA que conectado a API fornecida pela The Open Movie Database OMDb e permita que nosso usuário faça buscas no catálogo de filmes.

Para o desafio optei por utilizar React e construir uma Single Page Application algumas bibliotecas para chegar ao resultado esperado e entregar uma boa experiência para o usuário.

Página principal	Loader	Página de favoritos	Página de favoritos (Vazia)

Página de principal	Página de favoritos

A página busca na base da OMDb os filmes digitados pelo usário e entrega algumas informações básicas sobre o filme, como incremento o usuário pode clicar no icone de estrela e favoritar seus filmes preferidos, que podem ser consultados na aba lateral.

Utilizei como base para o desenvolvimento me guiar seguindo o conceito de mobile first e projetei toda a solução direcionada inicialmente para dispositivos movéis.

Para utilizar os projetos é necessário ter o Node instalado na máquina, o projeto foi criado utilizando node na versão 12.16.3 download aqui.

O projeto utilizou como base de sua criação o create react app.

Para rodar o projeto basta utilizar o comando:

  $ npm install
  # ou caso utilize yarn
  $ yarn install

$ npm start
# ou caso utilize yarn
$ yarn start

O projeto utiliza além do react, as seguintes bibliotecas:

• Axios (recuperar os dados da Api).
• React Router Dom (gerenciar a navegação entre as páginas)
• Redux & React Redux (estado global para a aplicação)
• Redux Persist (persistir dados na página mesmo após fecharmos a página, persistindo os dados no navegador)
• Styled Components (auxiliar na criação dos componentes, estilos, e temas)
• Styled Icons (opções de ícones para a página)

src/
  -assets/
  -components/
  -pages/
    -Favorites/
    -Home/
  -redux/
  -routes/
  -services/

Pasta para a definicação do tema padrão da nossa aplicação.

Nesse diretório ficam os componentes que podem ser compartilhados no nosso projeto, componentes 'comuns' para todo o projeto.

O diretório onde ficam armazenadas as páginas, cada página fica dentro do seu respectivo diretório, a página tem como principal responsabilidade buscar e tratar dados (através do services e redux) para serem repassados para os componentes.

Caso a pagina necessite de estilos própios eles são encontrados no arquivos styles.js que ficam dentro do diretório da página e não devem ser importados por nenhuma outra página, caso isso ocorra ele deve ser deslocado para o diretório _components- e virar dependência de ambas as páginas.

A pasta contém a configuração da nossa store, da biblioteca redux-persist. O projeto utiliza o conceito a estrutura do Redux com o padrão Duck, nesse padrão agregamos as actions, reducers e types em um único arquivo, caso queira conhecer mais sobre o padrão sugiro os links:

• Ducks Modular Redux
• Scaling your Redux App with ducks

Nosso aplicativo utiliza a biblioteca redux-persist para persistir os dados em conjunto com o LocalStorage, o nome da nossa store é movieStorage e ela é criada no redux e no localStorage assim que a página é aberta.

Organização das rotas da aplicação utilizando react router dom, nosso roteamento também depende do componente de TabBar criado na pasta components.

O diretório services armazena os arquivos responsáveis por recuperar e enviar dados para nossas API's.