diff --git a/Readme.md b/Readme.md
index ed84ec5c..151de271 100644
--- a/Readme.md
+++ b/Readme.md
@@ -1,174 +1,137 @@
-# Creando una Red Social
+Bake Recipes Book
-Bienvenida a tu primer proyecto del track de Frontend en Laboratoria.
+Conéctate a esta red social para reposteros de todo el mundo.
-En este proyecto construirás una red social, cuya temáticas dejaremos a tu elección.
-Aquí algunas ideas para inspirarte:
+Publica tus recetas en forma privada o pública. Visualízalas todas en un solo lugar, edítalas,
+ comentalas y elíminalas en el momento que quieras
-- Alimentación
-- Feminismo
-- Educación
-- Salud
-- Energías Renovables
+Puedes acceder registrándote como usuario nuevo o ingresar con tu cuenta de facebook o
+tu cuenta de Google.
-Las **caraterísticas técnicas** de tu aplicación serán las siguientes:
-- Debe ser una Single-Page Application [SPA](https://dzone.com/articles/how-single-page-web-applications-actually-work) ([versión traducida](https://dzone.com/articles/how-single-page-web-applications-actually-work))
-- Debe ser diseñada con un enfoque [mobile first](https://darwindigital.com/mobile-first-versus-responsive-web-design/) ([versión traducida](https://translate.google.com/translate?hl=&sl=auto&tl=es&u=https%3A%2F%2Fdarwindigital.com%2Fmobile-first-versus-responsive-web-design))
-- Debe permitir la persintencia de datos
-
-Para implementar tu aplicación usarás *HTML5*, *CCS3* o *SASS*, *Vanilla JavaScript(ES6+)*, *Firebase* o *LocalStogarge*
+
-## Objetivo
-El objetivo 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 :
+
-### Planificación
-* Te recomendamos utilizar *projects*, *issues* y *milestones* de GitHub para gestionar la planificación de tu proyecto. Estos recursos serán la fuente de organización de tu equipo y a través de estas herramientas tus coaches podrán ver el avance del proyecto y darte feedback.
+
-* Escribir, de manera colaborativa, las **Definiciones de terminado** y **Criterios de Aceptación** por cada **Historia de usuario** que te daremos para este proyecto y que se deberán ver reflejadas en tu planificación.
-* **Priorizar** la implementación de tus funcionalidades, en función al esfuerzo que demandan en relación al valor que le aportan al usuario, y ejecutar en equipo todas las historias de usuario dentro del tiempo estimado para cada sprint y que finalmente se vean reflejadas en publicaciones completamentamente funcionales al final de cada sprint.
+
-* Adquirir la disciplina de la completitud, terminando una historia de usuario antes de pasar a la siguiente (es decir, que cumple con *Definición de Terminado* y *Criterios de Aceptación* contemplando todos los puntos que son objetivos de aprendizaje para este proyecto).
-### Desarrollo frontend
+Investigación:
-#### Arquitectura de la aplicación
+Red social vertical
-- Diseñar la arquitectura de tu aplicación, modularizando tu código a través de *es modules* ([`import`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import) y [`export`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export))
+Son aquellas que agrupan a usuarios en torno a una temática concreta.Los usuarios registrados en ella están interesados en dicha temática.
-- Familiarizarte con el patrón modelo - vista - controlador ([MVC](https://es.wikipedia.org/wiki/Modelo%E2%80%93vista%E2%80%93controlador)).
+El objetivo son personas que aman cocinar postres y pasteles para que tengan un espacio para compartir sus recetas con otros reposteros del mundo y probar recetas de otros miembros.
-#### Tecnologías HTML5 y CSS3/SASS
-* Aplicar HTML5 semántico en tu proyecto.
-* Aplicar y reforzar los conceptos fundamentales de CSS3.
-* Implementar selectores de clase evitando la redundancia de estilos en CCS3.
-* Utilizar `flexbox` para lograr un diseño `mobile first`, implementando un layout que te permita crear un diseño adaptativo para **mobile y desktop**
+Prototipado
-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.
+
+
+
+
-* Vista mobile
+Feedback recibido: Se nos hizo el comentario que la app no era muy intuitiva, así que se cambió el diseño de la primera versión.
- 
-* Vista Desktop
+## Objetivos de aprendizaje Fabi
- 
-
-#### JavaScript (ES6+)
-
-* Utilizar modulos de ES6 para poder modularizar tu código JavaScript.
-* Reforzar tu conocimiento sobre el uso de Template literals (Template strings).
-* Reforzar tu conocimiento de la manipulacion de los elementos del DOM a traves JavaScript.
-* Implementar un sistema de rutas para cambiar de una vista a otra de manera dinámica (SPA).
-* Testear la lógica de tu aplicación, con Jest cuidando que el coverage pase el 90% de statements (sentencias), functions (funciones), lines (líneas), y branches (ramas).
-
-### Persistencia de datos
-
-En los proyectos anteriores solo has consumido (leído) datos, por ejemplo, a través de un archivo `json` o utilizando `fetch`.
-
-En este proyecto diseñarás la estructura de esos datos, la forma de consultarlos, actualizarlos, modificarlos y eliminarlos según los requerimiento del usuario. Para llevarlo a cabo utilizaras `Firestore` de `Firebase` o `LocalStogarge` una `Web Storage API`
-
-#### Firebase
-
-El objetivo de usar Firestore 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
-
-* Este proyecto debe ser desarrollado en equipos de trabajo de 3 integrantes.
-
-* La duración propuesta del proyecto es **3 sprints**, con una duración de una semana cada uno.
+Antes de empezar el proyecto, recuerda agregar tus objetivos de aprendizaje pendientes de tu proyecto
+anterior en la siguiente sección.
-* Te daremos las **historias de usuario** con el fin de presentarte los requerimientos y funcionalidades que desea el usuario final.
+### Objetivos de aprendizajes pendientes
-* La **planificación es vital**, para ello te recomendamos utilizar el flujo de trabajo colaborativo que nos ofrecen los projects de GitHub, para que puedas **escribir tus definiciones de terminado** y **criterios de aceptación** por cada historia de usuario con el objetivo que determinen, en equipo, **qué hacer** en el sprint y **cómo se realizará**.
-* Para que todas las miembros de tu equipo puedan lograr los objetivos de aprendizaje, deberán determinar cuál será la estrategia de desarrollo que utilizarán: división por sub-historias, pair programming, code reviews, etc.
+### HTML y CSS
-## Restricciones Técnicas
+* [x] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
+* [ ] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+* [ ] Construir tu aplicación respetando el diseño realizado (maquetación).
-* Debes utilizar `flexbox` o `CSSGrid` para posicionar tus elementos. Si está permitido el uso de frameworks de CCS (bootstrap), y de componentes flotantes.
+### DOM y Web APIs
-* Ya te damos un diseño (layout) de la vista mobile y desktop, queremos que lo repliques a nivel *pixel perfect*, el contenido, paleta de colores y fuentes, depende de la temática que van a elegir como equipo. La implementación de ese layout deberá formar parte de la *definición de terminado* de tus historias de usuario.
+* [x] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
+* [ ] [History API](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
+* [ ] [`localStorage`]
-* Los test son **fundamentales** y deberán formar parte de tu definición de terminado, te recomendamos que comiences a implementarlos desde el comienzo.
+### Javascript
-## Historias de Usuario
+* [x] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function)
+* [x] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises)
+* [x] Uso ES modules
+([`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+| [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export))
-* Como usuario nuevo debo poder crear una cuenta con email y password válidos para poder iniciar sesion e ingresar a la red social.
+### Firebase
-* Como usuario nuevo debo poder tener la opción de iniciar sesión con mi cuenta de Google o Facebook para ingresar a la red social sin necesidad de crear una cuenta de email válido.
+* [x] [Firestore](https://firebase.google.com/docs/firestore)
+* [x] [Firebase Auth](https://firebase.google.com/docs/auth/web/start)
+* [x] [Firebase security rules](https://firebase.google.com/docs/rules)
+* [x] [Uso de onSnapshot](https://firebase.google.com/docs/firestore/query-data/listen)
+| [onAuthStateChanged](https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data)
-* Como usuario loggeado debo poder crear, guardar, modificar en el mismo lugar (in place) y eliminar una publicación (post) privada o pública, que puede ser una frase o una imagen.
+### Testing
-* Como usuario loggeado debo poder ver todos los posts públicos y privados que he creado hasta ese momento, desde el más reciente hasta el más antiguo, así como la opción de poder cambiar la configuración de privacidad de mis post.
+* [ ] [Testeo de tus funciones](https://jestjs.io/docs/es-ES/getting-started)
+* [ ] [Testeo asíncrono](https://jestjs.io/docs/es-ES/asynchronous)
+* [ ] [Mocking](https://jestjs.io/docs/es-ES/manual-mocks)
-* Yo como usuario loggeado, puedo dar like y llevar un conteo de likes en mi publicación así como poder escribir, guardar, editar o eliminar un comentario en mi publicación.
+### Colaboración en Github
-* Al final debo poder ingresar a la red social y poder visualizar los datos de mi perfil creado o editarlos.
+* [ ] Branches
+* [ ] Pull Requests
+* [ ] Tags
-* Te dejamos un ejemplo de cómo definir criterios de aceptación y definiciones de terminado para una H.U. Si se te complica definirlas o no tienes idea de que considerar para cada H.U. es de gran ayuda revisar redes sociales como `facebok`, `twitter`, `instagram`, `devopedia` o la red social que más te guste y puedas evaluar qué consideran en cada funcionalidad para darla como terminada y aceptada.
+### Organización en Github
- > Como usuario nuevo debo poder crear una cuenta con email y password para
- > poder iniciar sesion. Por otro lado, necesito también tener la opción de
- > iniciar sesión con mi cuenta de Google o Facebook.
- >
- > **Criterios de aceptación**
- > - Si el mail o password no es válido, al momento de logearme, debo poder
- > ver un mensaje de error.
- > - Debe ser visible si hay algún mensaje de error.
- > - Debo poder ver esta página de creación en Móviles y desktop (responsive).
- > - No debe necesitar recargar la página para crear una cuenta (SPA).
- >
- > **Definición de terminado**
- > - La funcionalidad cumple satisface los criterios de aceptación.
- > - La funcionalidad tiene _test unitarios_.
- > - El diseño visual corresponde al prototipo de alta fidelidad.
- > - El código de esta funcionalidad recibió code review.
- > - La funcionalidad esta desplegada y pública para ser probada.
- > - La funcionalidad fue probada manualmente.
- > - Se hicieron pruebas de usuabilidad y se implementó el feedback si se
- > consideró necesario.
+* [ ] Projects
+* [ ] Issues
+* [ ] Labels
+* [ ] Milestones
-## Objetivos de aprendizaje
+### Buenas prácticas de desarrollo
-Antes de empezar el proyecto, recuerda agregar tus objetivos de aprendizaje pendientes de tu proyecto
-anterior en la siguiente sección.
+* [x] Modularización
+* [x] Nomenclatura / Semántica
+* [x] Linting
-### Objetivos de aprendizajes pendientes
+***
+## Objetivos de aprendizaje Shei
### HTML y CSS
-* [ ] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
-* [ ] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
-* [ ] Construir tu aplicación respetando el diseño realizado (maquetación).
+* [x] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
+* [x] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+* [x] Construir tu aplicación respetando el diseño realizado (maquetación).
### DOM y Web APIs
-* [ ] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
+* [x] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
* [ ] [History API](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
* [ ] [`localStorage`]
### Javascript
-* [ ] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function)
-* [ ] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises)
-* [ ] Uso ES modules
+* [x] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function)
+* [x] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises)
+* [x] Uso ES modules
([`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
| [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export))
### Firebase
-* [ ] [Firestore](https://firebase.google.com/docs/firestore)
-* [ ] [Firebase Auth](https://firebase.google.com/docs/auth/web/start)
+* [x] [Firestore](https://firebase.google.com/docs/firestore)
+* [x] [Firebase Auth](https://firebase.google.com/docs/auth/web/start)
* [ ] [Firebase security rules](https://firebase.google.com/docs/rules)
* [ ] [Uso de onSnapshot](https://firebase.google.com/docs/firestore/query-data/listen)
| [onAuthStateChanged](https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data)
@@ -187,86 +150,70 @@ anterior en la siguiente sección.
### Organización en Github
-* [ ] Projects
+* [x] Projects
* [ ] Issues
* [ ] Labels
* [ ] Milestones
### Buenas prácticas de desarrollo
-* [ ] Modularización
-* [ ] Nomenclatura / Semántica
+* [x] Modularización
+* [x] Nomenclatura / Semántica
* [ ] Linting
-***
+## Objetivos de aprendizaje Astrid
-## Recursos
+### HTML y CSS
-### Mobile first
+* [x] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
+* [ ] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+* [x] Construir tu aplicación respetando el diseño realizado (maquetación).
-El concepto de [_mobile first_](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-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.
+### DOM y Web APIs
-### Múltiples vistas
+* [x] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
+* [ ] [History API](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
+* [ ] [`localStorage`]
-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.
+### Javascript
-### Escritura de datos
+* [ ] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function)
+* [ ] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises)
+* [x] Uso ES modules
+([`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+| [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export))
-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 [Firestore](https://firebase.google.com/docs/firestore) o de forma
-local utilizando`localStorage`.
+### Firebase
-### Autenticación y autorización
+* [ ] [Firestore](https://firebase.google.com/docs/firestore)
+* [x] [Firebase Auth](https://firebase.google.com/docs/auth/web/start)
+* [x] [Firebase security rules](https://firebase.google.com/docs/rules)
+* [x] [Uso de onSnapshot](https://firebase.google.com/docs/firestore/query-data/listen)
+| [onAuthStateChanged](https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data)
-Hasta el momento, los proyectos han sido pensados como recursos públicos, donde todos
-los usuarios compartían un mismo rol y la misma información.
+### Testing
-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.
+* [ ] [Testeo de tus funciones](https://jestjs.io/docs/es-ES/getting-started)
+* [ ] [Testeo asíncrono](https://jestjs.io/docs/es-ES/asynchronous)
+* [ ] [Mocking](https://jestjs.io/docs/es-ES/manual-mocks)
-Para esto utilizaras respectivamente
-[`Firebase authentication`](https://firebase.google.com/docs/auth/) y
-[`Firestore security rules`](https://firebase.google.com/docs/firestore/security/get-started)
+### Colaboración en Github
-### CSS
+* [ ] Branches
+* [ ] Pull Requests
+* [ ] Tags
-En este proyecto queremos que ganes confianza y experiencia con CSS profesional,
-por eso usarás [`flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
-para posicionar tus elementos.
+### Organización en Github
-Recuerda que no puedes usar frameworks CSS, sólo *vanilla css* o [*sass*](https://sass-lang.com/).
+* [x] Projects
+* [ ] Issues
+* [ ] Labels
+* [ ] Milestones
-### Otras:
+### Buenas prácticas de desarrollo
+
+* [x] Modularización
+* [x] Nomenclatura / Semántica
+* [ ] Linting
-* [Pildora SPA](https://www.loom.com/share/fa63a8ad0e9a43428222c15b6f6613d3)
-* [Repositorio de pildora de SPA](https://github.com/betsyvies/bootcamp-spa)
-* [Pildora de mock Firebase](https://www.youtube.com/watch?v=06myVn41OTY&t=1s)
-* [Repositorio de pildora de mock Firebase](https://github.com/Danielalab/2018-2-Testing)
-* [Pildora MVC](https://github.com/merunga/todomvc-vanillajs)
-* [Modulos: Export](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export)
-* [Modulos: Import](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import)
-* [Diseño web, responsive design y la importancia del mobile first - Media Click](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-mobile-first/)
-* [Mobile First: el enfoque actual del diseño web móvil - 1and1](https://www.1and1.es/digitalguide/paginas-web/diseno-web/mobile-first-la-nueva-tendencia-del-diseno-web/)
-* [Mobile First - desarrolloweb.com](https://desarrolloweb.com/articulos/mobile-first-responsive.html)
-* [Mobile First - ZURB](https://zurb.com/word/mobile-first)
-* [Mobile First Is NOT Mobile Only - Nielsen Norman Group](https://www.nngroup.com/articles/mobile-first-not-mobile-only/)
-***
diff --git a/package.json b/package.json
index 9a365577..f59500b2 100644
--- a/package.json
+++ b/package.json
@@ -32,5 +32,8 @@
"serve": "^11.0.2",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0"
+ },
+ "dependencies": {
+ "bulma": "^0.8.2"
}
-}
\ No newline at end of file
+}
diff --git a/src/controller/firebase-controller.js b/src/controller/firebase-controller.js
new file mode 100644
index 00000000..508520c7
--- /dev/null
+++ b/src/controller/firebase-controller.js
@@ -0,0 +1,72 @@
+import { postPage } from '../views/postpageProfile.js';
+
+export const db = firebase.firestore();
+// Authentication
+const usersRef = db.collection('users');
+const auth = firebase.auth();
+
+export function saveUser(user) {
+ const { displayName, uid, photoURL, email } = user;
+ const u = {
+ displayName,
+ uid,
+ photoURL,
+ email,
+ };
+ usersRef.doc(user.uid).set(u);
+}
+export const login = (email, password) => {
+ auth.signInWithEmailAndPassword(email, password)
+ .then((snap => {
+ console.log(snap);
+ postPage();
+ return snap.user;
+ }))
+ .catch((error => {
+ let errorCode = error.code;
+ let errorMessage = error.message;
+ console.log(`Lo sentimos : ${errorCode} ${errorMessage} `);
+ return error;
+ }));
+};
+export const signup = (email, password) => {
+ auth.createUserWithEmailAndPassword(email, password)
+ .then((snap => {
+ console.log(snap);
+ saveUser(snap.user);
+ let mail = snap.user.email;
+ alert(`${mail} registro exitoso!`);
+ postPage();
+ return snap.user;
+ }))
+ .catch((error => {
+ let errorCode = error.code;
+ let errorMessage = error.message;
+ alert(`lo sentimos: ${errorCode} ${errorMessage}`)
+ return error;
+ }));
+};
+// Login with google
+export function loginGoogle() {
+ let provider = new firebase.auth.GoogleAuthProvider();
+ return firebase.auth().signInWithPopup(provider)
+ .then(snap => {
+ saveUser(snap.user);
+ postPage();
+ return snap.user;
+ });
+}
+// Login with Facebook
+export function loginFace() {
+ var provider = new firebase.auth.FacebookAuthProvider();
+ return firebase.auth().signInWithPopup(provider)
+ .then((result => {
+ saveUser(result.user);
+ postPage();
+ console.log(result.user);
+ return result.user;
+ }));
+}
+// Add Post
+
+export const postsRef = db.collection('posts');
diff --git a/src/images/Imagen1.png b/src/images/Imagen1.png
new file mode 100644
index 00000000..918ac92b
Binary files /dev/null and b/src/images/Imagen1.png differ
diff --git a/src/images/bienvenidoapp.png b/src/images/bienvenidoapp.png
new file mode 100644
index 00000000..3df6281c
Binary files /dev/null and b/src/images/bienvenidoapp.png differ
diff --git a/src/images/complete_recipe.png b/src/images/complete_recipe.png
new file mode 100644
index 00000000..f877dd9c
Binary files /dev/null and b/src/images/complete_recipe.png differ
diff --git a/src/images/faceImage.png b/src/images/faceImage.png
new file mode 100644
index 00000000..ba2fb440
Binary files /dev/null and b/src/images/faceImage.png differ
diff --git a/src/images/gmailImage.png b/src/images/gmailImage.png
new file mode 100644
index 00000000..9a16bc5e
Binary files /dev/null and b/src/images/gmailImage.png differ
diff --git a/src/images/logo.png b/src/images/logo.png
new file mode 100644
index 00000000..48365736
Binary files /dev/null and b/src/images/logo.png differ
diff --git a/src/images/logo1.png b/src/images/logo1.png
new file mode 100644
index 00000000..d346596f
Binary files /dev/null and b/src/images/logo1.png differ
diff --git a/src/images/logob.jpg b/src/images/logob.jpg
new file mode 100644
index 00000000..225487d3
Binary files /dev/null and b/src/images/logob.jpg differ
diff --git a/src/images/pantalla1.png b/src/images/pantalla1.png
new file mode 100644
index 00000000..da990af1
Binary files /dev/null and b/src/images/pantalla1.png differ
diff --git a/src/images/pantalla2.png b/src/images/pantalla2.png
new file mode 100644
index 00000000..79339a28
Binary files /dev/null and b/src/images/pantalla2.png differ
diff --git a/src/images/pantalla3.png b/src/images/pantalla3.png
new file mode 100644
index 00000000..f4d180dd
Binary files /dev/null and b/src/images/pantalla3.png differ
diff --git a/src/images/pantalla4.png b/src/images/pantalla4.png
new file mode 100644
index 00000000..7bb6e568
Binary files /dev/null and b/src/images/pantalla4.png differ
diff --git a/src/images/pantallapost.png b/src/images/pantallapost.png
new file mode 100644
index 00000000..aa0c8dfc
Binary files /dev/null and b/src/images/pantallapost.png differ
diff --git a/src/images/postingrecipes.png b/src/images/postingrecipes.png
new file mode 100644
index 00000000..f667cb77
Binary files /dev/null and b/src/images/postingrecipes.png differ
diff --git a/src/images/profileposts.png b/src/images/profileposts.png
new file mode 100644
index 00000000..2649b46e
Binary files /dev/null and b/src/images/profileposts.png differ
diff --git a/src/images/prot1v2.png b/src/images/prot1v2.png
new file mode 100644
index 00000000..33d64b27
Binary files /dev/null and b/src/images/prot1v2.png differ
diff --git a/src/images/prot2v2.png b/src/images/prot2v2.png
new file mode 100644
index 00000000..30a7cab3
Binary files /dev/null and b/src/images/prot2v2.png differ
diff --git a/src/images/prot3v2.png b/src/images/prot3v2.png
new file mode 100644
index 00000000..3b1d96d4
Binary files /dev/null and b/src/images/prot3v2.png differ
diff --git a/src/images/prot4v2.png b/src/images/prot4v2.png
new file mode 100644
index 00000000..a6e7f562
Binary files /dev/null and b/src/images/prot4v2.png differ
diff --git a/src/images/registrate.png b/src/images/registrate.png
new file mode 100644
index 00000000..7ed33f9b
Binary files /dev/null and b/src/images/registrate.png differ
diff --git a/src/index.html b/src/index.html
index bb6937cc..c11ac3cc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,9 +4,35 @@
- Document
+
+
+ social-network-recipes
+
+
+
+
+
+
+
+
+
+
-## Objetivo
-El objetivo 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 :
+
-### Planificación
-* Te recomendamos utilizar *projects*, *issues* y *milestones* de GitHub para gestionar la planificación de tu proyecto. Estos recursos serán la fuente de organización de tu equipo y a través de estas herramientas tus coaches podrán ver el avance del proyecto y darte feedback.
+
-* Escribir, de manera colaborativa, las **Definiciones de terminado** y **Criterios de Aceptación** por cada **Historia de usuario** que te daremos para este proyecto y que se deberán ver reflejadas en tu planificación.
-* **Priorizar** la implementación de tus funcionalidades, en función al esfuerzo que demandan en relación al valor que le aportan al usuario, y ejecutar en equipo todas las historias de usuario dentro del tiempo estimado para cada sprint y que finalmente se vean reflejadas en publicaciones completamentamente funcionales al final de cada sprint.
+
-* Adquirir la disciplina de la completitud, terminando una historia de usuario antes de pasar a la siguiente (es decir, que cumple con *Definición de Terminado* y *Criterios de Aceptación* contemplando todos los puntos que son objetivos de aprendizaje para este proyecto).
-### Desarrollo frontend
+Investigación:
-#### Arquitectura de la aplicación
+Red social vertical
-- Diseñar la arquitectura de tu aplicación, modularizando tu código a través de *es modules* ([`import`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import) y [`export`](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export))
+Son aquellas que agrupan a usuarios en torno a una temática concreta.Los usuarios registrados en ella están interesados en dicha temática.
-- Familiarizarte con el patrón modelo - vista - controlador ([MVC](https://es.wikipedia.org/wiki/Modelo%E2%80%93vista%E2%80%93controlador)).
+El objetivo son personas que aman cocinar postres y pasteles para que tengan un espacio para compartir sus recetas con otros reposteros del mundo y probar recetas de otros miembros.
-#### Tecnologías HTML5 y CSS3/SASS
-* Aplicar HTML5 semántico en tu proyecto.
-* Aplicar y reforzar los conceptos fundamentales de CSS3.
-* Implementar selectores de clase evitando la redundancia de estilos en CCS3.
-* Utilizar `flexbox` para lograr un diseño `mobile first`, implementando un layout que te permita crear un diseño adaptativo para **mobile y desktop**
+Prototipado
-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.
+
+
+
+
-* Vista mobile
+Feedback recibido: Se nos hizo el comentario que la app no era muy intuitiva, así que se cambió el diseño de la primera versión.
- 
-* Vista Desktop
+## Objetivos de aprendizaje Fabi
- 
-
-#### JavaScript (ES6+)
-
-* Utilizar modulos de ES6 para poder modularizar tu código JavaScript.
-* Reforzar tu conocimiento sobre el uso de Template literals (Template strings).
-* Reforzar tu conocimiento de la manipulacion de los elementos del DOM a traves JavaScript.
-* Implementar un sistema de rutas para cambiar de una vista a otra de manera dinámica (SPA).
-* Testear la lógica de tu aplicación, con Jest cuidando que el coverage pase el 90% de statements (sentencias), functions (funciones), lines (líneas), y branches (ramas).
-
-### Persistencia de datos
-
-En los proyectos anteriores solo has consumido (leído) datos, por ejemplo, a través de un archivo `json` o utilizando `fetch`.
-
-En este proyecto diseñarás la estructura de esos datos, la forma de consultarlos, actualizarlos, modificarlos y eliminarlos según los requerimiento del usuario. Para llevarlo a cabo utilizaras `Firestore` de `Firebase` o `LocalStogarge` una `Web Storage API`
-
-#### Firebase
-
-El objetivo de usar Firestore 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
-
-* Este proyecto debe ser desarrollado en equipos de trabajo de 3 integrantes.
-
-* La duración propuesta del proyecto es **3 sprints**, con una duración de una semana cada uno.
+Antes de empezar el proyecto, recuerda agregar tus objetivos de aprendizaje pendientes de tu proyecto
+anterior en la siguiente sección.
-* Te daremos las **historias de usuario** con el fin de presentarte los requerimientos y funcionalidades que desea el usuario final.
+### Objetivos de aprendizajes pendientes
-* La **planificación es vital**, para ello te recomendamos utilizar el flujo de trabajo colaborativo que nos ofrecen los projects de GitHub, para que puedas **escribir tus definiciones de terminado** y **criterios de aceptación** por cada historia de usuario con el objetivo que determinen, en equipo, **qué hacer** en el sprint y **cómo se realizará**.
-* Para que todas las miembros de tu equipo puedan lograr los objetivos de aprendizaje, deberán determinar cuál será la estrategia de desarrollo que utilizarán: división por sub-historias, pair programming, code reviews, etc.
+### HTML y CSS
-## Restricciones Técnicas
+* [x] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
+* [ ] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+* [ ] Construir tu aplicación respetando el diseño realizado (maquetación).
-* Debes utilizar `flexbox` o `CSSGrid` para posicionar tus elementos. Si está permitido el uso de frameworks de CCS (bootstrap), y de componentes flotantes.
+### DOM y Web APIs
-* Ya te damos un diseño (layout) de la vista mobile y desktop, queremos que lo repliques a nivel *pixel perfect*, el contenido, paleta de colores y fuentes, depende de la temática que van a elegir como equipo. La implementación de ese layout deberá formar parte de la *definición de terminado* de tus historias de usuario.
+* [x] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
+* [ ] [History API](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
+* [ ] [`localStorage`]
-* Los test son **fundamentales** y deberán formar parte de tu definición de terminado, te recomendamos que comiences a implementarlos desde el comienzo.
+### Javascript
-## Historias de Usuario
+* [x] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function)
+* [x] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises)
+* [x] Uso ES modules
+([`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+| [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export))
-* Como usuario nuevo debo poder crear una cuenta con email y password válidos para poder iniciar sesion e ingresar a la red social.
+### Firebase
-* Como usuario nuevo debo poder tener la opción de iniciar sesión con mi cuenta de Google o Facebook para ingresar a la red social sin necesidad de crear una cuenta de email válido.
+* [x] [Firestore](https://firebase.google.com/docs/firestore)
+* [x] [Firebase Auth](https://firebase.google.com/docs/auth/web/start)
+* [x] [Firebase security rules](https://firebase.google.com/docs/rules)
+* [x] [Uso de onSnapshot](https://firebase.google.com/docs/firestore/query-data/listen)
+| [onAuthStateChanged](https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data)
-* Como usuario loggeado debo poder crear, guardar, modificar en el mismo lugar (in place) y eliminar una publicación (post) privada o pública, que puede ser una frase o una imagen.
+### Testing
-* Como usuario loggeado debo poder ver todos los posts públicos y privados que he creado hasta ese momento, desde el más reciente hasta el más antiguo, así como la opción de poder cambiar la configuración de privacidad de mis post.
+* [ ] [Testeo de tus funciones](https://jestjs.io/docs/es-ES/getting-started)
+* [ ] [Testeo asíncrono](https://jestjs.io/docs/es-ES/asynchronous)
+* [ ] [Mocking](https://jestjs.io/docs/es-ES/manual-mocks)
-* Yo como usuario loggeado, puedo dar like y llevar un conteo de likes en mi publicación así como poder escribir, guardar, editar o eliminar un comentario en mi publicación.
+### Colaboración en Github
-* Al final debo poder ingresar a la red social y poder visualizar los datos de mi perfil creado o editarlos.
+* [ ] Branches
+* [ ] Pull Requests
+* [ ] Tags
-* Te dejamos un ejemplo de cómo definir criterios de aceptación y definiciones de terminado para una H.U. Si se te complica definirlas o no tienes idea de que considerar para cada H.U. es de gran ayuda revisar redes sociales como `facebok`, `twitter`, `instagram`, `devopedia` o la red social que más te guste y puedas evaluar qué consideran en cada funcionalidad para darla como terminada y aceptada.
+### Organización en Github
- > Como usuario nuevo debo poder crear una cuenta con email y password para
- > poder iniciar sesion. Por otro lado, necesito también tener la opción de
- > iniciar sesión con mi cuenta de Google o Facebook.
- >
- > **Criterios de aceptación**
- > - Si el mail o password no es válido, al momento de logearme, debo poder
- > ver un mensaje de error.
- > - Debe ser visible si hay algún mensaje de error.
- > - Debo poder ver esta página de creación en Móviles y desktop (responsive).
- > - No debe necesitar recargar la página para crear una cuenta (SPA).
- >
- > **Definición de terminado**
- > - La funcionalidad cumple satisface los criterios de aceptación.
- > - La funcionalidad tiene _test unitarios_.
- > - El diseño visual corresponde al prototipo de alta fidelidad.
- > - El código de esta funcionalidad recibió code review.
- > - La funcionalidad esta desplegada y pública para ser probada.
- > - La funcionalidad fue probada manualmente.
- > - Se hicieron pruebas de usuabilidad y se implementó el feedback si se
- > consideró necesario.
+* [ ] Projects
+* [ ] Issues
+* [ ] Labels
+* [ ] Milestones
-## Objetivos de aprendizaje
+### Buenas prácticas de desarrollo
-Antes de empezar el proyecto, recuerda agregar tus objetivos de aprendizaje pendientes de tu proyecto
-anterior en la siguiente sección.
+* [x] Modularización
+* [x] Nomenclatura / Semántica
+* [x] Linting
-### Objetivos de aprendizajes pendientes
+***
+## Objetivos de aprendizaje Shei
### HTML y CSS
-* [ ] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
-* [ ] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
-* [ ] Construir tu aplicación respetando el diseño realizado (maquetación).
+* [x] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
+* [x] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+* [x] Construir tu aplicación respetando el diseño realizado (maquetación).
### DOM y Web APIs
-* [ ] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
+* [x] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
* [ ] [History API](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
* [ ] [`localStorage`]
### Javascript
-* [ ] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function)
-* [ ] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises)
-* [ ] Uso ES modules
+* [x] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function)
+* [x] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises)
+* [x] Uso ES modules
([`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
| [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export))
### Firebase
-* [ ] [Firestore](https://firebase.google.com/docs/firestore)
-* [ ] [Firebase Auth](https://firebase.google.com/docs/auth/web/start)
+* [x] [Firestore](https://firebase.google.com/docs/firestore)
+* [x] [Firebase Auth](https://firebase.google.com/docs/auth/web/start)
* [ ] [Firebase security rules](https://firebase.google.com/docs/rules)
* [ ] [Uso de onSnapshot](https://firebase.google.com/docs/firestore/query-data/listen)
| [onAuthStateChanged](https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data)
@@ -187,86 +150,70 @@ anterior en la siguiente sección.
### Organización en Github
-* [ ] Projects
+* [x] Projects
* [ ] Issues
* [ ] Labels
* [ ] Milestones
### Buenas prácticas de desarrollo
-* [ ] Modularización
-* [ ] Nomenclatura / Semántica
+* [x] Modularización
+* [x] Nomenclatura / Semántica
* [ ] Linting
-***
+## Objetivos de aprendizaje Astrid
-## Recursos
+### HTML y CSS
-### Mobile first
+* [x] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
+* [ ] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+* [x] Construir tu aplicación respetando el diseño realizado (maquetación).
-El concepto de [_mobile first_](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-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.
+### DOM y Web APIs
-### Múltiples vistas
+* [x] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
+* [ ] [History API](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
+* [ ] [`localStorage`]
-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.
+### Javascript
-### Escritura de datos
+* [ ] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function)
+* [ ] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises)
+* [x] Uso ES modules
+([`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+| [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export))
-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 [Firestore](https://firebase.google.com/docs/firestore) o de forma
-local utilizando`localStorage`.
+### Firebase
-### Autenticación y autorización
+* [ ] [Firestore](https://firebase.google.com/docs/firestore)
+* [x] [Firebase Auth](https://firebase.google.com/docs/auth/web/start)
+* [x] [Firebase security rules](https://firebase.google.com/docs/rules)
+* [x] [Uso de onSnapshot](https://firebase.google.com/docs/firestore/query-data/listen)
+| [onAuthStateChanged](https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data)
-Hasta el momento, los proyectos han sido pensados como recursos públicos, donde todos
-los usuarios compartían un mismo rol y la misma información.
+### Testing
-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.
+* [ ] [Testeo de tus funciones](https://jestjs.io/docs/es-ES/getting-started)
+* [ ] [Testeo asíncrono](https://jestjs.io/docs/es-ES/asynchronous)
+* [ ] [Mocking](https://jestjs.io/docs/es-ES/manual-mocks)
-Para esto utilizaras respectivamente
-[`Firebase authentication`](https://firebase.google.com/docs/auth/) y
-[`Firestore security rules`](https://firebase.google.com/docs/firestore/security/get-started)
+### Colaboración en Github
-### CSS
+* [ ] Branches
+* [ ] Pull Requests
+* [ ] Tags
-En este proyecto queremos que ganes confianza y experiencia con CSS profesional,
-por eso usarás [`flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
-para posicionar tus elementos.
+### Organización en Github
-Recuerda que no puedes usar frameworks CSS, sólo *vanilla css* o [*sass*](https://sass-lang.com/).
+* [x] Projects
+* [ ] Issues
+* [ ] Labels
+* [ ] Milestones
-### Otras:
+### Buenas prácticas de desarrollo
+
+* [x] Modularización
+* [x] Nomenclatura / Semántica
+* [ ] Linting
-* [Pildora SPA](https://www.loom.com/share/fa63a8ad0e9a43428222c15b6f6613d3)
-* [Repositorio de pildora de SPA](https://github.com/betsyvies/bootcamp-spa)
-* [Pildora de mock Firebase](https://www.youtube.com/watch?v=06myVn41OTY&t=1s)
-* [Repositorio de pildora de mock Firebase](https://github.com/Danielalab/2018-2-Testing)
-* [Pildora MVC](https://github.com/merunga/todomvc-vanillajs)
-* [Modulos: Export](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export)
-* [Modulos: Import](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import)
-* [Diseño web, responsive design y la importancia del mobile first - Media Click](https://www.mediaclick.es/blog/diseno-web-responsive-design-y-la-importancia-del-mobile-first/)
-* [Mobile First: el enfoque actual del diseño web móvil - 1and1](https://www.1and1.es/digitalguide/paginas-web/diseno-web/mobile-first-la-nueva-tendencia-del-diseno-web/)
-* [Mobile First - desarrolloweb.com](https://desarrolloweb.com/articulos/mobile-first-responsive.html)
-* [Mobile First - ZURB](https://zurb.com/word/mobile-first)
-* [Mobile First Is NOT Mobile Only - Nielsen Norman Group](https://www.nngroup.com/articles/mobile-first-not-mobile-only/)
-***
diff --git a/package.json b/package.json
index 9a365577..f59500b2 100644
--- a/package.json
+++ b/package.json
@@ -32,5 +32,8 @@
"serve": "^11.0.2",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0"
+ },
+ "dependencies": {
+ "bulma": "^0.8.2"
}
-}
\ No newline at end of file
+}
diff --git a/src/controller/firebase-controller.js b/src/controller/firebase-controller.js
new file mode 100644
index 00000000..508520c7
--- /dev/null
+++ b/src/controller/firebase-controller.js
@@ -0,0 +1,72 @@
+import { postPage } from '../views/postpageProfile.js';
+
+export const db = firebase.firestore();
+// Authentication
+const usersRef = db.collection('users');
+const auth = firebase.auth();
+
+export function saveUser(user) {
+ const { displayName, uid, photoURL, email } = user;
+ const u = {
+ displayName,
+ uid,
+ photoURL,
+ email,
+ };
+ usersRef.doc(user.uid).set(u);
+}
+export const login = (email, password) => {
+ auth.signInWithEmailAndPassword(email, password)
+ .then((snap => {
+ console.log(snap);
+ postPage();
+ return snap.user;
+ }))
+ .catch((error => {
+ let errorCode = error.code;
+ let errorMessage = error.message;
+ console.log(`Lo sentimos : ${errorCode} ${errorMessage} `);
+ return error;
+ }));
+};
+export const signup = (email, password) => {
+ auth.createUserWithEmailAndPassword(email, password)
+ .then((snap => {
+ console.log(snap);
+ saveUser(snap.user);
+ let mail = snap.user.email;
+ alert(`${mail} registro exitoso!`);
+ postPage();
+ return snap.user;
+ }))
+ .catch((error => {
+ let errorCode = error.code;
+ let errorMessage = error.message;
+ alert(`lo sentimos: ${errorCode} ${errorMessage}`)
+ return error;
+ }));
+};
+// Login with google
+export function loginGoogle() {
+ let provider = new firebase.auth.GoogleAuthProvider();
+ return firebase.auth().signInWithPopup(provider)
+ .then(snap => {
+ saveUser(snap.user);
+ postPage();
+ return snap.user;
+ });
+}
+// Login with Facebook
+export function loginFace() {
+ var provider = new firebase.auth.FacebookAuthProvider();
+ return firebase.auth().signInWithPopup(provider)
+ .then((result => {
+ saveUser(result.user);
+ postPage();
+ console.log(result.user);
+ return result.user;
+ }));
+}
+// Add Post
+
+export const postsRef = db.collection('posts');
diff --git a/src/images/Imagen1.png b/src/images/Imagen1.png
new file mode 100644
index 00000000..918ac92b
Binary files /dev/null and b/src/images/Imagen1.png differ
diff --git a/src/images/bienvenidoapp.png b/src/images/bienvenidoapp.png
new file mode 100644
index 00000000..3df6281c
Binary files /dev/null and b/src/images/bienvenidoapp.png differ
diff --git a/src/images/complete_recipe.png b/src/images/complete_recipe.png
new file mode 100644
index 00000000..f877dd9c
Binary files /dev/null and b/src/images/complete_recipe.png differ
diff --git a/src/images/faceImage.png b/src/images/faceImage.png
new file mode 100644
index 00000000..ba2fb440
Binary files /dev/null and b/src/images/faceImage.png differ
diff --git a/src/images/gmailImage.png b/src/images/gmailImage.png
new file mode 100644
index 00000000..9a16bc5e
Binary files /dev/null and b/src/images/gmailImage.png differ
diff --git a/src/images/logo.png b/src/images/logo.png
new file mode 100644
index 00000000..48365736
Binary files /dev/null and b/src/images/logo.png differ
diff --git a/src/images/logo1.png b/src/images/logo1.png
new file mode 100644
index 00000000..d346596f
Binary files /dev/null and b/src/images/logo1.png differ
diff --git a/src/images/logob.jpg b/src/images/logob.jpg
new file mode 100644
index 00000000..225487d3
Binary files /dev/null and b/src/images/logob.jpg differ
diff --git a/src/images/pantalla1.png b/src/images/pantalla1.png
new file mode 100644
index 00000000..da990af1
Binary files /dev/null and b/src/images/pantalla1.png differ
diff --git a/src/images/pantalla2.png b/src/images/pantalla2.png
new file mode 100644
index 00000000..79339a28
Binary files /dev/null and b/src/images/pantalla2.png differ
diff --git a/src/images/pantalla3.png b/src/images/pantalla3.png
new file mode 100644
index 00000000..f4d180dd
Binary files /dev/null and b/src/images/pantalla3.png differ
diff --git a/src/images/pantalla4.png b/src/images/pantalla4.png
new file mode 100644
index 00000000..7bb6e568
Binary files /dev/null and b/src/images/pantalla4.png differ
diff --git a/src/images/pantallapost.png b/src/images/pantallapost.png
new file mode 100644
index 00000000..aa0c8dfc
Binary files /dev/null and b/src/images/pantallapost.png differ
diff --git a/src/images/postingrecipes.png b/src/images/postingrecipes.png
new file mode 100644
index 00000000..f667cb77
Binary files /dev/null and b/src/images/postingrecipes.png differ
diff --git a/src/images/profileposts.png b/src/images/profileposts.png
new file mode 100644
index 00000000..2649b46e
Binary files /dev/null and b/src/images/profileposts.png differ
diff --git a/src/images/prot1v2.png b/src/images/prot1v2.png
new file mode 100644
index 00000000..33d64b27
Binary files /dev/null and b/src/images/prot1v2.png differ
diff --git a/src/images/prot2v2.png b/src/images/prot2v2.png
new file mode 100644
index 00000000..30a7cab3
Binary files /dev/null and b/src/images/prot2v2.png differ
diff --git a/src/images/prot3v2.png b/src/images/prot3v2.png
new file mode 100644
index 00000000..3b1d96d4
Binary files /dev/null and b/src/images/prot3v2.png differ
diff --git a/src/images/prot4v2.png b/src/images/prot4v2.png
new file mode 100644
index 00000000..a6e7f562
Binary files /dev/null and b/src/images/prot4v2.png differ
diff --git a/src/images/registrate.png b/src/images/registrate.png
new file mode 100644
index 00000000..7ed33f9b
Binary files /dev/null and b/src/images/registrate.png differ
diff --git a/src/index.html b/src/index.html
index bb6937cc..c11ac3cc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,9 +4,35 @@
-