Rehaciendo tu red social usando librerías y frameworks

Preámbulo

React, Angular y Vue son algunos de los frameworks y librerías de JavaScript más utilizados por lxs desarrolladorxs alrededor del mundo, y hay una razón para eso. En el contexto del navegador, mantener la interfaz sincronizada con el estado es difícil. 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. Esto nos permite concentrarnos mejor (dedicar más tiempo) en las caractrí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, ...

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.

Introducción

En este proyecto tendrás la oportunidad de re-escribir tu anterior proyecto de la Red Social, pero esta vez usando un framework o una librería.

Creemos que la mejor manera de enfrentarte a estas herramientas es eliminando de la ecuación el hecho de que tengas que entender un proyecto desde cero, su alcance, sus particularidades, el flujo, las validaciones, etc. Concéntrate en aprender y utilizar estas nuevas tecnologías.

El alcance del proyecto y el detalle de sus características es exactamente el mismo que el original, incluyendo la parte de Hacker Edition pero excluyendo la parte de UX.

Objetivos

El objetivo principal de aprendizaje es familiarizarse con el desarrollo web usando el framework o librería elegido, y todo lo que ello conlleva: documentación, arquitectura, principios de diseño, paradigma, abstracciones, vocabulario, herramientas, comunidad, ...

Por otro lado, tener que re-escribir un programa es una experiencia de aprendizaje muy valiosa en sí misma, llevándonos a re-evaluar e iterar sobre un producto o prototipo. Dada la velocidad a la que evoluciona la tecnología web, es muy común tener que enfrentarse a este tipo de escenario donde decidimos (o alguien decide por nosotros) que lo mejor para seguir evolucionando una aplicación es re-escribirla usando una nueva tecnología.

Consideraciones generales

Este proyecto se debe "resolver" en duplas.

Discutan y pónganse de acuerdo sobre cuál de los proyectos van a hacer desde cero. Si no se pueden poner de acuerdo en 10 minutos, aquí hay algo que puede ayudar

Investiguen un poco sobre estas tres herramientas propuestas (React, Angular y Vue) y elijan con cuál quieren trabajar.

Para comenzar tendrás que hacer un fork y clonar este repositorio.

Parte obligatoria

Ver 03-social-network.

Hacker edition

Ver 03-social-network.

Entrega

El proyecto será entregado subiendo tu código a GitHub (commit/push) y la interfaz será desplegada usando GitHub pages u otro servicio de hosting que puedas haber encontrado en el camino.

Evaluación

Tech

Habilidades Blandas

Para este proyecto esperamos que ya hayas consolidado el nivel 4 en todas tus habilidades blandas pero te invitamos que las lleves al siguiente nivel alcanzando el nivel 5 en todasvellas. Particularmente, entrena tu habilidad de autoaprendizaje, planificación y organización, y dar y recibir feedback.

Recuerda la importancia de organizar, dividir y planificar tu trabajo. Particularmente lo que se refiere a probar/experimentar lo nuevo de manera aislada y no necesariamente en el mismo código que ya tienes implementado. Muchas cosas pueden interferir en lo que estás intentando hacer y puede parecer que no está bien lo que intentas cuando no es así. Revisa las diapos 15 y 16 de la guia general para organizar, dividir y planificar tu ttrabajo

Te aconsejamos revisar la rúbrica:

Pistas / Tips / Lecturas complementarias

Antes de elegir un framework, te recomendamos leer los siguientes artículos:

• The deepest reason why modern JavaScript frameworks exist
• Should I use frameworks or libraries such as Angular, React, or VueJS or not?

Hemos preparado algunos videos introductorios:

• Introducción a Frameworks de JavaScript (Lupo)
• Introducción a Angular (Fabián)
• Introducción a React (Elizabeth)
• Introducción a Vue (Luis)

No dejes de explorar la documentación oficial de cada herramienta:

React

• React - docs oficiales
• React - tutorial
• Redux - tutorial
• create-react-app
• React js en español - tutorial básico, primeros pasos y ejemplos - frontendlabs.io

Angular

• Angular - docs oficiales
• Angular CLI
• Angular - tutorial
• Angular - crud
• Angular - redux

Vue

• Vue - docs oficiales
• Vue CLI
• Vue- adicional
• Vue- school

Independientemente de si eliges React, Vue o Angular, todos estas herramientes se usan muchas veces en conjunción con Redux como manejador de estado.

• Redux - docs oficiales

Checklist

General

• Producto final sigue los lineamientos del diseño.

README.md

• Información sobre instalación y despliegue de tu aplicación.

Pruebas / tests

• Tests unitarios cubren un mínimo del 70% de statements, functions, lines, y branches.
• Pasa tests (y linters) (npm test).

Creación de cuenta (sign up)

• Permite crear cuenta.
• Valida email.
• Valida password.
• Muestra mensajes de error.

Inicio de sesión (sign in)

• Permite iniciar sesión.
• Valida email.
• Valida password.
• Muestra mensajes de error.

Muro (wall/feed)

• Muestra muro.
• Permite publicar nuevos posts.
• Permite eliminar posts.
• Pide confirmación antes de borrar posts.
• Permite editar posts (in place).
• Permite filtrar posts por público/amigos.
• Permite marcar posts como gustados (like).