LIM009-Social-Network

Creando una Red Social

Bienvenida a tu primer proyecto del track de Frontend en Laboratoria.

En este proyecto construirás una red social, cuya temáticas dejaremos a tu elección.

Aquí algunas ideas para inspirarte:

Las caraterísticas técnicas de tu aplicación serán las siguientes:

Para implementar tu aplicación usarás HTML5, CCS3, Vanilla JavaScript(ES6+) y Firebase.

Objetivos de Aprendizaje

El objetivo de aprendizaje de este proyecto es construir una Red Social, Single-Page Application (SPA), responsiva en la que podamos escribir, leer, actualizar y eliminar datos.

Para ello deberás poner en juego tu creatividad para generar ideas que lleven a una solución original y valiosa del problema, trabajando en equipo buscando feedback constante.

En otras palabras, seguirás afianzando todo lo aprendido en el Common Core, pero en particular verás :

A nivel de planificación

A nivel del desarrollo frontend

Arquitectura de la aplicación

Tecnologías HTML5 y CSS3

A continuación te proporcionamos el layout (diseño) de la vista mobile y desktop que deberás replicar visualmente y cuyo contenido, colores y fuentes de texto, dejaremos a tu elección.

JavaScript (ES6+)

A nivel de datos

En los proyectos anteriores solo has consumido (leído) datos, por ejemplo, a través de un archivo json.

En este proyecto diseñarás la estructura esos datos, la forma de consultarlos, actualizarlos, modificarlos y eliminarlos según los requerimiento del usuario. Para llevarlo a cabo utilizaras Firebase.

Firebase

El objetivo de usar Firebase, en este proyecto, es que aprendes a manejar y persistir datos a traves de una base de datos no relacional, en tiempo real y puedas implementar operaciones CRUD (Creación, Lectura, Actualización y eliminación) de datos.

Consideraciones generales del proyecto

Restricciones Técnicas

Historias de Usuario


Recursos

Mobile first

El concepto de mobile first hace referencia a un proceso de diseño y desarrollo donde partimos de cómo se ve y cómo funciona la aplicación en un dispositivo móvil primero, y más adelante se ve como adaptar la aplicación a pantallas progresivamente grandes y características específicas del entorno desktop. Esto es en contraposición al modelo tradicional, donde primero se diseñaban los websites (o webapps) para desktop y después se trataba de arrugar el diseño para que entre en pantallas más chicas. La clave acá es asegurarse de que desde el principio diseñan usando la vista responsive de las herramientas de desarrollador (developer tools) del navegador. De esa forma, partimos de cómo se ve y comporta la aplicación en una pantalla y entorno móvil.

Múltiples vistas

En proyectos anteriores nuestras aplicaciones habían estado compuestas de una sola vista principal (una sóla página). En este proyecto se introduce la necesidad de tener que dividir nuestra interfaz en varias vistas o páginas y ofrecer una manera de navegar entre ellas.

Escritura de datos

En los proyectos anteriores hemos consumido (leído) datos, pero todavía no habíamos escrito datos (salvar cambios, crear datos, borrar, …). En este proyecto tendrás que crear (salvar) nuevos datos, así como leer, actualizar y modificar datos existentes. Estos datos se podrán guardar de forma remota usando Firebase.

Autenticación y autorización

Los proyectos anteriores han sido pensados como recursos públicos, donde todos los usuarios compartían un mismo rol y la misma información.

En este proyecto tendrás que diferenciar la información a mostrar y modificar, dependiendo de la identidad del usuario. De la misma manera deberás crear reglar de autorización para el acceso a los datos.

Para esto utilizaras respectivamente Firebase authentication y Firestore security rules

CSS

En este proyecto queremos que ganes confianza y experiencia con CSS profesional, por eso usarás flexbox para posicionar tus elementos y media queries para hacer tu diseño responsivo.

Recuerda que no puedes usar frameworks CSS, sólo vanilla css.

Otras: