📋 Indíce

Proposta
- O desafio
- Requisitos
Screenshots
O que aprendi
Pré-requisitos
Procedimentos de instalação
Desafios similares e dicas
Autor

🚀 Proposta

Para começar:

recomenda-se que crie um fork desse repositório
Leia atentamente os requisitos
Vá para parte que está escrito Requisitos adicionais e adicione pontos a mais que queira contemplar com esse projeto, se comenda nunca tirar um requisito, apenas adicionar.
Inicie o seu projeto e desenvolva normalmente.
Não esqueça de atualizar o readme com imagens do seu projeto e adicionar informações de autor
- As imagens podem ser salvas na pasta presentation
Quando terminar , envie um pull request para este repositório, explicando como você fez e quais foram suas principais dificuldades e aprendizados e se houveram requisitos adicionais descreva isso.
- não esqueça de adicionar um bom título a sua pr para pessoas que verem se interessarem e isso favorecer o networking
- a PR não será aceita para o repositório, mas isso regstrará sua participação.
Ao completar, não esqueça de publicar no linkedin e adicionar #handsOnRoadmap e se quiser pode me marcar.

🏆 O desafio

Imagine que foi pedido a você para fazer uma aplicação para filtrar séries dentre dados fornecidos.

Os dados estão na pasta data em um arquivo db.js

Cada série tem um id único, nome, descrição, quantidade de temporadas, quantidade de episódios e gêneros da série.

🎯 Os requisitos

🎯 Requisitos funcionais

Sua aplicação deve ter:

Uma lista com as séries
Ser possível filtrar por um input de pesquisa que busque pelo nome da série
Ser possível filtrar pelas tags, podendo selecionar uma ou mais tags, e a aplicação irá pesquisar quais séries tem todas as tags de gênero indicada.
Ser possível buscar por um input numérico para temporadas, ao colocar um valor é buscado séries com número de temporadas igual ao valor;
Ser possível buscar por um input numérico para episódios, ao colocar um valor é buscado séries com número de episódios igual ao valor;
É possível buscar de múltiplas formas ao mesmo tempo, nome/gêneros/temporadas e episódios. Sendo qualquer combinação entre esses.
Deve ter um botão de reset, que limpa todos filtros.

🎯 Requisitos não funcionais

É obrigatório a utilização de:

ReactJs
fazer deploy

📌 Requisitos não obrigatórios

Você será bem avaliado se usar:

usar HTML semântico, como tags main, section...
usar responsividade
organizar e dividir bem os arquivos
Componentizar e separar bem o que achar que deve
Usar typeScript
Deixar descrições muito grandes com opção de mostrar tudo ou esconder, e quando estiver esconder só mostra uma quantidade limitada de caracteres.
Permitir clicar em uma série da lista, e exibir ela em um modal.

📌 Requisitos adicionais

📸 Screenshots

📱 Mobile design

📱 Tablets design

🖥️ Desktop design

🖥️ Resultado final

✔️ O que aprendi

☑️ Pré-requisitos para rodar

adicione os requisitos aqui

📝 Procedimentos de instalação

Adicione o processo para instalar o projeto abaixo e se quiser crie mais espaços de código:

#processos aqui

#processos adicionais aqui

👨🏾‍💻 Desafios similares e dicas

Antes ou depois de realizar esse desafio, você pode pegar desafios parecidos do front-end mentor ou similares. Isso te ajuda a fixar e melhorar. Vou deixar alguns a seguir, pode te ajudar a se inspirar.

O segredo aqui é fazer modelos parecidos até ganhar algum conforto com fazer algo com essas técnicas e esse modelo de desafio, então quem sabe pegar outros mais difíceis.

Job listings with filtering

Você também pode usar o dribbble para se inspirar.

Dribbble

😎 Autor

Linkedin:
GitHub:

Overcode-Inst/challenge-FR-012-search-series