La manera en que vemos películas ha cambiado radicalmente durante los últimos años debido, en parte, a la aparición de los servicios de streaming que nos permiten hacerlo desde donde estemos y en cualquier momento. El mejor reflejo de este fenómeno es el éxito de Netflix, HBO y Disney+, etc.
Creemos que hay una gran oportunidad de proponer productos/experiencias innovadoras de todo tipo utilizando datos de películas (directorxs, actorxs, sagas, secuelas, fechas, etc.). Podríamos pensar en juegos, comunidades, catálogos, recomendaciones basadas en gustos personales, etc. (sólo por mencionar algunas ideas obvias).
La idea de este proyecto es que, usando una API con información de películas, puedas idear, planear, organizar y desarrollar una aplicación web que aproveche estos datos y tenga una propuesta de valor atractiva para lxs usuarixs.
Aunque la decisión de qué hacer es enteramente tuya, hay algunas consideraciones generales que se presentan a continuación. Puedes cumplir esos requisitos en proyectos muy diferentes, ¡depende de tu creatividad y del entendimiento que tengas de tus potenciales usuarixs!
Para implementar este proyecto deberás elegir un framework entre React y Angular. Al elegir un framework o librería para nuestra interfaz, nos apoyamos en una serie de convenciones e implementaciones probadas y documentadas para resolver un problema común a toda interfaz web: mantener la interfaz sincronizada con el estado. Esto nos permite concentrarnos mejor (dedicar más tiempo) en las características específicas de nuestra aplicación.
Cuando elegimos una de estas tecnologías no solo importamos un pedacito de código para reusarlo (lo cuál es un gran valor per se), si no que adoptamos una arquitectura, una serie de principios de diseño, un paradigma, unas abstracciones, un vocabulario, una comunidad, etc...
Como desarrolladora Front-end, estos kits de desarrollo pueden resultarte de gran ayuda para implementar rápidamente características de los proyectos en los que trabajes.
Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Ten en cuenta eso al decidir tu estrategia de trabajo.
[ ] Uso de HTML semántico
* [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
[ ] Uso de selectores de CSS
* [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)
[ ] Modelo de caja (box model): borde, margen, padding
* [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-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 en CSS
* [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) * [Flexbox Froggy](https://flexboxfroggy.com/#es) * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
[ ] Uso de selectores del DOM
* [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
[ ] Manejo de eventos del DOM (listeners, propagación, delegación)
* [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)
[ ] Manipulación dinámica del DOM
* [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent)
[ ] Fetch API
* [Fetch API - MDN](https://developer.mozilla.org/es/docs/Web/API/Fetch_API)
[ ] Diferenciar entre tipos de datos primitivos y no primitivos
[ ] Arrays (arreglos)
* [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays) * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/) * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
[ ] Objetos (key, value)
* [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects)
[ ] Variables (declaración, asignación, ámbito)
* [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables)
[ ] Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
* [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)
[ ] Uso de bucles/ciclos (while, for, for..of)
* [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops) * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)
[ ] Funciones (params, args, return)
* [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)
[ ] Pruebas unitarias (unit tests)
* [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)
[ ] Módulos de ECMAScript (ES Modules)
* [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export)
[ ] Uso de linter (ESLINT)
[ ] Uso de identificadores descriptivos (Nomenclatura y Semántica)
[ ] Diferenciar entre expresiones (expressions) y sentencias (statements)
[ ] Git: Instalación y configuración
[ ] Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)
[ ] Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)
[ ] GitHub: Creación de cuenta y repos, configuración de llaves SSH
[ ] GitHub: Despliegue con GitHub Pages
* [Sitio oficial de GitHub Pages](https://pages.github.com/)
[ ] GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)
[ ] Consulta o petición (request) y respuesta (response).
* [Generalidades del protocolo HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Overview) * [Mensajes HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Messages)
[ ] Cabeceras (headers)
* [HTTP headers - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Headers)
[ ] Cuerpo (body)
* [Cuerpo de Mensajes HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Messages#cuerpo)
[ ] Verbos HTTP
* [Métodos de petición HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Methods)
[ ] Códigos de status de HTTP
* [Códigos de estado de respuesta HTTP - MDN](https://developer.mozilla.org/es/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 y JSON
* [Introducción a JSON - Documentación oficial](https://www.json.org/json-es.html)
[ ] CORS (Cross-Origin Resource Sharing)
* [Control de acceso HTTP (CORS) - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/CORS)
[ ] Components & templates
* [Angular Components Overview - Documentación oficial (en inglés)](https://angular.io/guide/component-overview) * [Introduction to components and templates - Documentación oficial (en inglés)](https://angular.io/guide/architecture-components#introduction-to-components)
[ ] Directivas estructurales (ngIf / ngFor)
* [Writing structural directives - Documentación oficial (en inglés)](https://angular.io/guide/structural-directives)
[ ] @Input | @Output
* [Component interaction - Documentación oficial (en inglés)](https://angular.io/guide/component-interaction#component-interaction)
[ ] Creación y uso de servicios
* [Providing services - Documentación oficial (en inglés)](https://angular.io/guide/architecture-services#providing-services)
[ ] Manejo de rutas
* [In-app navigation: routing to views - Documentación oficial (en inglés)](https://angular.io/guide/router)
[ ] Creación y uso de Observables.
* [Observables in Angular - Documentación oficial (en inglés)](https://angular.io/guide/observables-in-angular)
[ ] Uso de HttpClient
* [Communicating with backend services using HTTP - Documentación oficial (en inglés)](https://angular.io/guide/http)
[ ] Estilos de componentes (ngStyle / ngClass)
* [Template syntax - Documentación oficial (en inglés)](https://angular.io/guide/template-syntax#built-in-directives)
[ ] JSX
* [Presentando JSX - Documentación oficial](https://es.react.dev/learn/writing-markup-with-jsx)
[ ] Componentes y propiedades (props)
* [Componentes y propiedades - Documentación oficial](https://es.react.dev/learn/passing-props-to-a-component)
[ ] Manejo de eventos
* [Manejando eventos - Documentación oficial](https://es.react.dev/learn/responding-to-events)
[ ] Listas y keys
* [Listas y keys - Documentación oficial](https://es.react.dev/learn/rendering-lists)
[ ] Renderizado condicional
* [Renderizado condicional - Documentación oficial](https://es.react.dev/learn/conditional-rendering)
[ ] Elevación de estado
* [Levantando el estado - Documentación oficial](https://es.react.dev/learn/sharing-state-between-components)
[ ] Hooks
* [Presentando Hooks - Documentación oficial](https://es.react.dev/reference/react)
[ ] CSS modules
* [Adding a CSS Modules Stylesheet - Documentación de Create React App (en inglés)](https://vitejs.dev/guide/features.html#css-modules)
[ ] React Router
* [Quick Start - Documentación oficial (en inglés)](https://reactrouter.com/en/main/start/tutorial)
[ ] Crear prototipos de alta fidelidad que incluyan interacciones
[ ] Seguir los principios básicos de diseño visual
[ ] Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad
* [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15) * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7)
https
en la URL.Trata de divertirte. ¡a empezar esta aventura 🎬!