Processo Seletivo Clubbi - Pessoa Desenvolvedora Frontend - Teste Técnico

Este repositório aborda as questões referentes ao desafio técnico proposto pela Clubbi para vaga de Dev Frontend.

Clique aqui e confira o deploy da aplicação no seu navegador.

👩‍💻 Autora

@Laís Nametala

---

🔧 Dependências utilizadas

Dependencies: Docker, React, React Router, Redux Toolkit, Cypress e Material UI

DevDependencies: Vite, ESLint, StyleLint e Typescript

---

👨‍💻 O que foi desenvolvido:

• Foi construída uma SPA (single page application) que consume as API's dos Estudios Ghibli.

• Foram implementadas três páginas de exibição de dados:

  • Filmes, que podem ser filtrados por nome e ordenados por: data de lançamento, tempo de duração, avaliação e em ordem alfabética dos títulos;
  • Personagens, que podem ser filtrados por nome e ordenados por: idade e em ordem alfabética dos nomes;
  • Locais, que podem ser filtrados por nome e ordenados por: água superficial e em ordem alfabética dos nomes;

💻 Versão desktop

📱 Versão mobile

---

📌 Instalação da aplicação

Para instalar a aplicação, siga os seguintes passos:

Pre-requisitos de sistema:

• Git
• Node

Clone o repositório

  git clone git@github.com:lalanametala/frontend-test.git

Entre na pasta do repositório referente ao projeto

cd frontend-test
cd frontend-test-clubbi

Instale as dependências

npm install

Inicie a aplicação

npm run dev

Para acessar a aplicação, navegue até

http://localhost:3000

Execute os testes de ponta a ponta com:

npm run cy

Execute os testes no navegador com:

npm run cy:open

---

🐳 Rodando a aplicação no Docker

Para instalar a aplicação e utilizá-la via Docker, siga os seguintes passos:

Clone o repositório caso não o tenha feito ainda

  git clone git@github.com:lalanametala/frontend-test.git

Entre na pasta do repositório referente ao projeto

cd frontend-test
cd frontend-test-clubbi

Instale as dependências

npm install

Execute a composição dos containers Docker

docker-compose up -d

Para acessar a aplicação, navegue até

http://localhost:3000

Para executar os testes de ponta a ponta, execute os seguintes passos:

Abra um terminal do container do Cypress com:

docker exec -it frontend-test-clubbi_cypress_1 bash

No terminal do container Cypress inicie a aplicação com:

npm run dev

Sem fechar o terminal anterior, em um novo terminal, acompanhe os testes de ponta a ponta com:

docker logs --tail 1000 -f frontend-test-clubbi_cypress_1 

---