A forma como assistimos à filmes mudou radicalmente nos últimos anos devido, em parte, ao surgimento dos serviços de streaming que nos permitem fazê-lo de onde estivermos e a qualquer momento. O melhor reflexo desse fenômeno é o sucesso da Netflix, HBO, Disney+ e outros.
Acreditamos que há uma grande oportunidade de propor produtos/experiências inovadoras de todos os tipos usando dados de filmes (diretores, atores, sagas, sequências, datas, etc.). Podemos pensar em jogos, comunidades, catálogos, recomendações com base em preferências pessoais, etc. (apenas para citar algumas ideias óbvias).
Neste projeto, você criará uma página da web destinada a visualizar, filtrar e ordenar o catálogo de filmes da The Movie Database API V3. Esta página pode servir como um catálogo de filmes geral, mas também, se você quiser, pode considerar a possibilidade de projetá-la para um público específico com preferências como "filmes western" ou "filmes dos anos 80", por exemplo.
Para implementar este projeto, você deve escolher um framework entre React e Angular. Ao escolher um framework ou biblioteca para nossa interface, baseamo-nos em uma série de convenções e implementações comprovadas e documentadas para resolver um problema comum a todas as interfaces da web: manter a interface sincronizada com o estado. Isso nos permite nos concentrar melhor (dedicar mais tempo) nas características específicas de nossa aplicação.
Quando escolhemos uma dessas tecnologias, não estamos apenas importando um pedaço de código para reutilizá-lo (o que por si só é um grande valor), mas também adotando uma arquitetura, uma série de princípios de design, um paradigma, abstrações, um vocabulário, uma comunidade, etc...
Como desenvolvedora Front-end, esses kits de desenvolvimento podem ser de grande ajuda para implementar rapidamente características nos projetos em que você trabalha.
Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho.
[ ] Uso de HTML semântico
* [HTML semântico](https://curriculum.laboratoria.la/pt/topics/html/html5/semantic-html) * [Semantics in HTML - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
[ ] Uso de seletores de CSS
* [Intro a CSS](https://curriculum.laboratoria.la/pt/topics/css/css/intro-css) * [CSS Selectors - MDN](https://developer.mozilla.org/pt_BR/docs/Web/CSS/CSS_Selectors)
[ ] Modelo de caixa (box model): borda, margem, preenchimento
* [Modelo de Caixa e Display](https://curriculum.laboratoria.la/pt/topics/css/css/boxmodel-and-display) * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)
[ ] Uso de flexbox em CSS
* [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) * [Flexbox Froggy](https://flexboxfroggy.com/#pt-br) * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
[ ] Uso de CSS Grid Layout
* [A Complete Guide to Grid - CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) * [Grids - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
[ ] Uso de media queries
* [CSS media queries - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries)
[ ] Uso de linter (ESLINT)
[ ] Uso de identificadores descritivos (Nomenclatura e Semântica)
[ ] Testes unitários (unit tests)
* [Introdução ao Jest - Documentação oficial](https://jestjs.io/docs/pt-BR/getting-started)
[ ] Testes assíncronos
* [Testando Código Assíncrono - Documentação oficial](https://jestjs.io/docs/pt-BR/asynchronous)
[ ] Uso de mocks e espiões
* [Simulações Manuais - Documentação oficial](https://jestjs.io/docs/pt-BR/manual-mocks)
[ ] Módulos de ECMAScript (ES modules)
* [import - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import) * [export - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/export)
[ ] Git: Instalação e configuração
[ ] Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)
[ ] Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)
[ ] GitHub: Criação de contas e repositórios, configuração de chave SSH
[ ] GitHub: Implantação com GitHub Pages
* [Site oficial do GitHub Pages](https://pages.github.com/)
[ ] GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)
[ ] GitHub: Organização pelo Github (projects | issues | labels | milestones | releases)
[ ] Consulta ou solicitação (request) e resposta (response).
* [Visão geral do protocolo HTTP - MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Overview) * [Mensagens HTTP - MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Messages)
[ ] Cabeçalhos (headers)
* [Cabeçalhos HTTP - MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Headers)
[ ] Corpo (body)
* [Mensagens HTTP / Corpo - MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Messages#corpo)
[ ] Verbos HTTP
* [Métodos de requisição HTTP - MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods)
[ ] Códigos de status de HTTP
* [Códigos de status de respostas HTTP - MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Status) * [The Complete Guide to Status Codes for Meaningful ReST APIs - dev.to](https://dev.to/khaosdoctor/the-complete-guide-to-status-codes-for-meaningful-rest-apis-1-5c5)
[ ] Encodings e JSON
* [Introdução ao JSON - Documentação oficial](https://www.json.org/json-pt.html)
[ ] CORS (Cross-Origin Resource Sharing)
* [Cross-Origin Resource Sharing (CORS) - MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/CORS)
[ ] Components & templates
* [Angular Components Overview - Documentação oficial (em inglês)](https://angular.io/guide/component-overview) * [Introduction to components and templates - Documentação oficial (em inglês)](https://angular.io/guide/architecture-components#introduction-to-components)
[ ] Diretivas estruturais (ngIf / ngFor)
* [Writing structural directives - Documentação oficial (em inglês)](https://angular.io/guide/structural-directives)
[ ] @Input | @Output
* [Component interaction - Documentação oficial (em inglês)](https://angular.io/guide/component-interaction#component-interaction)
[ ] Criação e uso de serviços
* [Providing services - Documentação oficial (em inglês)](https://angular.io/guide/architecture-services#providing-services)
[ ] Gerenciamento de rotas
* [In-app navigation: routing to views - Documentação oficial (em inglês)](https://angular.io/guide/router)
[ ] Criação e uso de Observables
* [Observables in Angular - Documentação oficial (em inglês)](https://angular.io/guide/observables-in-angular)
[ ] Uso de HttpClient
* [Communicating with backend services using HTTP - Documentação oficial (em inglês)](https://angular.io/guide/http)
[ ] Estilos de componentes (ngStyle / ngClass)
* [Template syntax - Documentação oficial (em inglês)](https://angular.io/guide/template-syntax#built-in-directives)
[ ] JSX
* [Introduzindo JSX - Documentação oficial](https://pt-br.react.dev/learn/writing-markup-with-jsx)
[ ] Componentes e propriedades (props)
* [Componentes e propriedades - Documentação oficial](https://pt-br.react.dev/learn/passing-props-to-a-component)
[ ] Manipulação de eventos
* [Manipulando eventos - Documentação oficial](https://pt-br.react.dev/learn/responding-to-events)
[ ] Listas e keys
* [Listas e chaves - Documentação oficial](https://pt-br.react.dev/learn/rendering-lists)
[ ] Renderização condicional
* [Renderização condicional - Documentação oficial](https://pt-br.react.dev/learn/conditional-rendering)
[ ] Elevação de estado
* [Elevação de estado - Documentação oficial](https://pt-br.react.dev/learn/sharing-state-between-components)
[ ] Hooks
* [Introduzindo Hooks - Documentação oficial](https://pt-br.react.dev/reference/react)
[ ] CSS modules
* [Adding a CSS Modules Stylesheet - Documentação de Create React App (em inglês)](https://vitejs.dev/guide/features.html#css-modules)
[ ] React Router
* [Quick Start - Documentação oficial (em inglês)](https://reactrouter.com/en/main/start/tutorial)
[ ] Instância de Vue.js
* [A Instância Vue - Documentação oficial](https://br.vuejs.org/v2/guide/instance.html)
[ ] Dados e métodos
* [Dados e métodos - Documentação oficial](https://br.vuejs.org/v2/guide/instance.html#Dados-e-Metodos)
[ ] Uso e criação de componentes
* [Conceitos Básicos de Componentes - Documentação oficial](https://br.vuejs.org/v2/guide/components.html)
[ ] Props
* [Passando dados aos componentes filhos com Props - Documentação oficial](https://br.vuejs.org/v2/guide/components.html#Passando-Dados-aos-Filhos-com-Props)
[ ] Diretivas (v-bind | v-model)
* [v-bind - Documentação oficial](https://br.vuejs.org/v2/api/#v-bind) * [Binding/Interligações em Formulários - Documentação oficial](https://br.vuejs.org/v2/guide/forms.html)
[ ] Iteração (v-for)
* [Array em elementos com v-for - Documentação oficial](https://br.vuejs.org/v2/guide/list.html#Array-em-Elementos-com-v-for)
[ ] Eventos (v-on)
* [Manipulação de eventos - Documentação oficial](https://br.vuejs.org/v2/guide/events.html)
[ ] Dados Computados e Observadores
* [Dados Computados e Observadores](https://br.vuejs.org/v2/guide/computed.html)
[ ] Routing
* [Getting Started - Documentação oficial de Vue Router](https://router.vuejs.org/guide/#html)
[ ] Classes e Estilos
* [Interligações de Classe e Estilo - Documentação oficial](https://br.vuejs.org/v2/guide/class-and-style.html)
[ ] Narrowing
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/narrowing.html)
[ ] Decoradores
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/decorators.html)
[ ] Verificação estática de tipos
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/basic-types.html#static-type-checking)
[ ] Rigor
* [Documentação oficial do Typescript 1](https://www.typescriptlang.org/docs/handbook/2/basic-types.html#strictness) * [Documentação oficial do Typescript 2](https://www.typescriptlang.org/tsconfig#Type_Checking_6248)
[ ] Tipos primitivos
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#the-primitives-string-number-and-boolean)
[ ] Arrays
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#arrays)
[ ] Tipo any
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any)
[ ] Funções
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#functions) * [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/functions.html)
[ ] Tipos de união
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types)
[ ] Alias de tipos
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases)
[ ] Interfaces
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#interfaces)
[ ] Type assertions
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions)
[ ] Tipos literais
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#literal-types)
[ ] null e undefined
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#null-and-undefined)
[ ] Enums
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums)
[ ] Propriedades opcionais
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#optional-properties)
[ ] Visibilidade dos membros da classe (public, private, protected)
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/classes.html#member-visibility)
[ ] Membros estáticos da classe
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/classes.html#static-members)
[ ] this
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/classes.html#this-at-runtime-in-classes)
[ ] Classes abstratas
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/classes.html#abstract-classes-and-members)
[ ] Campos
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/classes.html#fields)
[ ] Constructors
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/classes.htmll#constructors)
[ ] Métodos
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/classes.html#methods)
[ ] Getters e Setters
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/classes.html#getters--setters)
[ ] implements Cláusulas
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/classes.html#implements-clauses)
[ ] extends Cláusulas
* [Documentação oficial do Typescript](https://www.typescriptlang.org/docs/handbook/2/classes.html#extends-clauses)
[ ] Criar protótipos para obter feedback e iterar
[ ] Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
Este projeto deve ser resolvido individualmente.
O prazo estimado para concluir o projeto é de 2 a 3 Sprints.
Os testes unitários devem cobrir no mínimo 90% de statements, functions, lines e branches.
Além disso, você deve definir a estrutura de pastas e arquivos que considerar necessária. Você pode seguir as convenções do framework escolhido. Portanto, os testes e a configuração necessária para executá-los serão de sua responsabilidade.
A aplicação deve ser uma Single Page App.
A aplicação não precisa ser responsiva.
Para poder usar a API da The Movie Database API V3, você deve criar uma conta e, em seguida, uma chave de acesso (key) e usá-la em cada solicitação que fizer ao servidor. Lembre-se de que você tem um limite máximo de 1.000 solicitações diárias à API por cada IP, portanto, aconselhamos a fazer um uso responsável desse recurso gratuito.
Um dos principais objetivos deste projeto é aprender a usar uma biblioteca ou framework popular para desenvolver um aplicativo da web. Você deve escolher entre React ou Angular.
Lembre-se de que, se escolher o Angular, é obrigatório usar o TypeScript. O TypeScript é uma linguagem de programação fortemente tipada baseada em JavaScript.
Se escolher o React, a decisão de usar o TypeScript é opcional (mas recomendada!). Aqui você pode encontrar mais informações sobre como iniciar seu projeto com TypeScript e React.
A aplicação deve usar npm-scripts
e deve incluir scripts start
, test
,
build
e deploy
para iniciar, executar testes, empacotar e implantar a
aplicação, respectivamente.
O Product Owner nos fornece uma primeira iteração do protótipo de baixa fidelidade da aplicação nesta imagem e nesta outra.
O Product Owner nos apresenta este backlog que é o resultado de seu trabalho com o cliente até o momento.
Eu, como usuária, quero visualizar um catálogo de filmes em uma tabela (linhas e colunas).
Eu, como usuária, quero filtrar e ordenar o catálogo de filmes usando os critérios suportados pela TheMovie Database API V3.
Eu, como usuária, quero consultar os detalhes de um filme.
Você pode escolher o provedor (ou provedores) que preferir, juntamente com o mecanismo de deploy e estratégia de hospedagem. Recomendamos explorar as seguintes opções:
Antes de agendar seu feedback do projeto com um coach, certifique-se de que seu projeto:
Lembre-se de fazer uma autoavaliação dos objetivos de aprendizagem e habilidades pessoais em seu painel de estudante.
Se você não concluiu todos os itens acima, não consideramos que você está pronto para sua sessão de feedback do projeto.
Junte-se ao canal do Slack #project-movie-challenge-fw para conversar e pedir ajuda sobre o projeto.
Com base no protótipo de baixa fidelidade fornecido, crie um protótipo de alta fidelidade no Figma. Defina uma paleta de cores e um design gráfico. Tente concluir isso em 1 ou 2 dias.
Explore a documentação da API do The Movie Database. Comece lendo a seção Getting Started, depois AUTHENTICATION --> Application e, finalmente, as referências dos endpoints /discover/movie e /movie/{movie_id}.
Em seguida, crie uma conta e gere uma chave (key) de acesso para consumir a API.
Finalmente, faça solicitações HTTP de teste à API usando ferramentas como Postman ou REST Client. Identifique os cabeçalhos, corpo, verbos, códigos de resposta e codificações das solicitações.
A comunidade de desenvolvedores de cada framework se esforçou muito para criar documentações amigáveis para aqueles que estão começando com cada tecnologia. Portanto, dê a si mesma a oportunidade de explorar a documentação e experimentar seus exemplos e tutoriais.
Pegue a primeira história de usuário e divida-a em tarefas menores. Identifique a ordem e a prioridade de cada tarefa. Documente seu planejamento no Trello ou Github Project.
Pegue a primeira visualização do protótipo de alta fidelidade e a implemente. Sugerimos seguir os seguintes passos, independentemente do framework que você estiver usando: