Skip to content

Laboratoria/SCL016-social-network-fw

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 

Repository files navigation

Rehaciendo tu red social usando librerías y frameworks

Índice


1. Preámbulo

React y Angular 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.

caracoles

2. Resumen del proyecto

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 una muy buena manera de profundizar en estas herramientas puede ser 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.

3. Objetivos de aprendizaje

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.

4. 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 dos herramientas propuestas (React y Angular) y elijan con cuál quieren trabajar.

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

5. Criterios de aceptación mínimos del proyecto

Ver 03-social-network.

6. Hacker edition

Ver 03-social-network.

7. 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.


8. Pistas, tips y lecturas complementarias

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

Hemos preparado algunos videos introductorios:

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

React

Angular

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

9. 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).

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published