diff --git a/Readme.md b/Readme.md
index ed84ec5c..9675f0a1 100644
--- a/Readme.md
+++ b/Readme.md
@@ -1,148 +1,24 @@
-# Creando una Red Social
+# Life Style: Creando una red social
-Bienvenida a tu primer proyecto del track de Frontend en Laboratoria.
+Lifestyle está dirigido a hombres y mujeres de 25-35 años principalmente que tienen una vida sana y activa y/o desean tenerla. Esta aplicación gratuita está diseñada para que los usuarios interesados en el tema puedan mejorar su estilo de vida y que también personas desde principiantes a expertas en el tema compartan su conocimiento sobre temas saludables.
-En este proyecto construirás una red social, cuya temáticas dejaremos a tu elección.
+### Prototipo de baja fidelidad (sketch)
-Aquí algunas ideas para inspirarte:
+
-- Alimentación
-- Feminismo
-- Educación
-- Salud
-- Energías Renovables
+### Prototipo de alta fidelidad
-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
+### Demo Lifestyle
+
+
+
-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
-
-#### Arquitectura de la aplicación
-
-- 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))
-
-- Familiarizarte con el patrón modelo - vista - controlador ([MVC](https://es.wikipedia.org/wiki/Modelo%E2%80%93vista%E2%80%93controlador)).
-
-#### 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**
-
-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
-
- 
-
-* Vista Desktop
-
- 
-
-#### 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.
-
-* Te daremos las **historias de usuario** con el fin de presentarte los requerimientos y funcionalidades que desea el usuario final.
-
-* 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.
-
-## Restricciones Técnicas
-
-* Debes utilizar `flexbox` o `CSSGrid` para posicionar tus elementos. Si está permitido el uso de frameworks de CCS (bootstrap), y de componentes flotantes.
-
-* 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.
-
-* Los test son **fundamentales** y deberán formar parte de tu definición de terminado, te recomendamos que comiences a implementarlos desde el comienzo.
-
-## Historias de Usuario
-
-* Como usuario nuevo debo poder crear una cuenta con email y password válidos para poder iniciar sesion e ingresar a la red social.
-
-* 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.
-
-* 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.
-
-* 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.
-
-* 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.
-
-* Al final debo poder ingresar a la red social y poder visualizar los datos de mi perfil creado o editarlos.
-
-* 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.
-
- > 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.
-
-## Objetivos de aprendizaje
-
-Antes de empezar el proyecto, recuerda agregar tus objetivos de aprendizaje pendientes de tu proyecto
-anterior en la siguiente sección.
-
-### Objetivos de aprendizajes pendientes
+### Objetivos de aprendizaje Edith Ortiz Cortés
### HTML y CSS
@@ -153,24 +29,24 @@ anterior en la siguiente sección.
### DOM y Web APIs
-* [ ] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
+* ☑ [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`]
+* ☑ [`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
+* ☑ [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises)
+* ☑ 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)
+* ☑ [Firestore](https://firebase.google.com/docs/firestore)
+* ☑ [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)
+* ☑ [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)
### Testing
@@ -181,92 +57,19 @@ anterior en la siguiente sección.
### Colaboración en Github
-* [ ] Branches
-* [ ] Pull Requests
+* ☑ Branches
+* ☑ Pull Requests
* [ ] Tags
### Organización en Github
-* [ ] Projects
-* [ ] Issues
-* [ ] Labels
-* [ ] Milestones
+* ☑ Projects
+* ☑ Issues
+* ☑ Labels
+* ☑ Milestones
### Buenas prácticas de desarrollo
* [ ] Modularización
* [ ] Nomenclatura / Semántica
-* [ ] Linting
-
-***
-
-## Recursos
-
-### Mobile first
-
-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.
-
-### 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 [Firestore](https://firebase.google.com/docs/firestore) o de forma
-local utilizando`localStorage`.
-
-### Autenticación y autorización
-
-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.
-
-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`](https://firebase.google.com/docs/auth/) y
-[`Firestore security rules`](https://firebase.google.com/docs/firestore/security/get-started)
-
-### CSS
-
-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.
-
-Recuerda que no puedes usar frameworks CSS, sólo *vanilla css* o [*sass*](https://sass-lang.com/).
-
-### Otras:
-
-* [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/)
-
-***
+* [ ] Linting
\ No newline at end of file
diff --git a/_mocks_/firebase-mock.js b/_mocks_/firebase-mock.js
new file mode 100644
index 00000000..3afcd5cc
--- /dev/null
+++ b/_mocks_/firebase-mock.js
@@ -0,0 +1,21 @@
+const firestoreMock = () => {
+ return {
+ collection: (nameCollection) =>{
+ return {
+ add: (objData) => {
+ return new Promise((resolve) => {
+ resolve('Hola!')
+ })
+ }
+ }
+ }
+ }
+}
+
+const firebase = {
+ firestore: firestoreMock
+}
+
+export default jest.fn(() => {
+ return firebase;
+})
\ No newline at end of file
diff --git a/images/demo.PNG b/images/demo.PNG
new file mode 100644
index 00000000..f2d07fc1
Binary files /dev/null and b/images/demo.PNG differ
diff --git a/images/demo2.PNG b/images/demo2.PNG
new file mode 100644
index 00000000..d11f52bf
Binary files /dev/null and b/images/demo2.PNG differ
diff --git a/images/demo3.PNG b/images/demo3.PNG
new file mode 100644
index 00000000..4687c6ae
Binary files /dev/null and b/images/demo3.PNG differ
diff --git a/images/proboceto.PNG b/images/proboceto.PNG
new file mode 100644
index 00000000..39f967b2
Binary files /dev/null and b/images/proboceto.PNG differ
diff --git a/images/protalta.PNG b/images/protalta.PNG
new file mode 100644
index 00000000..e2c4e7f0
Binary files /dev/null and b/images/protalta.PNG differ
diff --git a/images/protalta2.PNG b/images/protalta2.PNG
new file mode 100644
index 00000000..c005dfb9
Binary files /dev/null and b/images/protalta2.PNG differ
diff --git a/images/protalta3.PNG b/images/protalta3.PNG
new file mode 100644
index 00000000..a233d6b3
Binary files /dev/null and b/images/protalta3.PNG differ
diff --git a/images/protalta4.PNG b/images/protalta4.PNG
new file mode 100644
index 00000000..c84c3a0f
Binary files /dev/null and b/images/protalta4.PNG differ
diff --git a/package.json b/package.json
index 9a365577..54cd991e 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,6 @@
],
"license": "MIT",
"scripts": {
- "htmlhint": "htmlhint dist/*.html ",
- "eslint": "eslint --ext .js src/ test/",
- "stylelint": "stylelint --aei src/**/*.css",
- "pretest": "npm run htmlhint && npm run eslint && npm run stylelint",
"test": "jest --coverage",
"start": "serve src/"
},
@@ -28,9 +24,13 @@
"eslint-plugin-jest": "^22.1.2",
"htmlhint": "^0.11.0",
"jest": "^24.8.0",
+ "mock-cloud-firestore": "^0.12.0",
"regenerator-runtime": "^0.13.1",
"serve": "^11.0.2",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0"
+ },
+ "dependencies": {
+ "https-localhost": "^4.5.2"
}
-}
\ No newline at end of file
+}
diff --git a/src/example.js b/src/example.js
deleted file mode 100644
index 52d2c7ea..00000000
--- a/src/example.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const example = () => {
- // aquí tu código
-}
\ No newline at end of file
diff --git a/src/images/browser.png b/src/images/browser.png
new file mode 100644
index 00000000..1c96e24c
Binary files /dev/null and b/src/images/browser.png differ
diff --git a/src/images/camera.png b/src/images/camera.png
new file mode 100644
index 00000000..ce1e4704
Binary files /dev/null and b/src/images/camera.png differ
diff --git a/src/images/comment.png b/src/images/comment.png
new file mode 100644
index 00000000..b6db1915
Binary files /dev/null and b/src/images/comment.png differ
diff --git a/src/images/edit.png b/src/images/edit.png
new file mode 100644
index 00000000..6f8fba75
Binary files /dev/null and b/src/images/edit.png differ
diff --git a/src/images/facebook.png b/src/images/facebook.png
new file mode 100644
index 00000000..ad6e9e68
Binary files /dev/null and b/src/images/facebook.png differ
diff --git a/src/images/gmail.png b/src/images/gmail.png
new file mode 100644
index 00000000..ba182765
Binary files /dev/null and b/src/images/gmail.png differ
diff --git a/src/images/grayHeart.png b/src/images/grayHeart.png
new file mode 100644
index 00000000..b8c676dc
Binary files /dev/null and b/src/images/grayHeart.png differ
diff --git a/src/images/logOut.png b/src/images/logOut.png
new file mode 100644
index 00000000..871b7e39
Binary files /dev/null and b/src/images/logOut.png differ
diff --git a/src/images/logo.png b/src/images/logo.png
new file mode 100644
index 00000000..126d7a68
Binary files /dev/null and b/src/images/logo.png differ
diff --git a/src/images/logoLifestyle.png b/src/images/logoLifestyle.png
new file mode 100644
index 00000000..13f928f8
Binary files /dev/null and b/src/images/logoLifestyle.png differ
diff --git a/src/images/logoWhite.png b/src/images/logoWhite.png
new file mode 100644
index 00000000..4448b966
Binary files /dev/null and b/src/images/logoWhite.png differ
diff --git a/src/images/plusImage.png b/src/images/plusImage.png
new file mode 100644
index 00000000..13498d87
Binary files /dev/null and b/src/images/plusImage.png differ
diff --git a/src/images/redHeart.png b/src/images/redHeart.png
new file mode 100644
index 00000000..3c6b1c34
Binary files /dev/null and b/src/images/redHeart.png differ
diff --git a/src/images/whiteHeart.png b/src/images/whiteHeart.png
new file mode 100644
index 00000000..ea451868
Binary files /dev/null and b/src/images/whiteHeart.png differ
diff --git a/src/images/xGreen.png b/src/images/xGreen.png
new file mode 100644
index 00000000..ea80c559
Binary files /dev/null and b/src/images/xGreen.png differ
diff --git a/src/images/xRed.png b/src/images/xRed.png
new file mode 100644
index 00000000..77f04cb3
Binary files /dev/null and b/src/images/xRed.png differ
diff --git a/src/index.html b/src/index.html
index bb6937cc..2c1ca8e4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,9 +4,37 @@
- Document
+
+ lifestyle
-
+
+
-- Alimentación
-- Feminismo
-- Educación
-- Salud
-- Energías Renovables
+### Prototipo de alta fidelidad
-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
+### Demo Lifestyle
+
+
+
-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
-
-#### Arquitectura de la aplicación
-
-- 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))
-
-- Familiarizarte con el patrón modelo - vista - controlador ([MVC](https://es.wikipedia.org/wiki/Modelo%E2%80%93vista%E2%80%93controlador)).
-
-#### 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**
-
-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
-
- 
-
-* Vista Desktop
-
- 
-
-#### 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.
-
-* Te daremos las **historias de usuario** con el fin de presentarte los requerimientos y funcionalidades que desea el usuario final.
-
-* 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.
-
-## Restricciones Técnicas
-
-* Debes utilizar `flexbox` o `CSSGrid` para posicionar tus elementos. Si está permitido el uso de frameworks de CCS (bootstrap), y de componentes flotantes.
-
-* 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.
-
-* Los test son **fundamentales** y deberán formar parte de tu definición de terminado, te recomendamos que comiences a implementarlos desde el comienzo.
-
-## Historias de Usuario
-
-* Como usuario nuevo debo poder crear una cuenta con email y password válidos para poder iniciar sesion e ingresar a la red social.
-
-* 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.
-
-* 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.
-
-* 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.
-
-* 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.
-
-* Al final debo poder ingresar a la red social y poder visualizar los datos de mi perfil creado o editarlos.
-
-* 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.
-
- > 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.
-
-## Objetivos de aprendizaje
-
-Antes de empezar el proyecto, recuerda agregar tus objetivos de aprendizaje pendientes de tu proyecto
-anterior en la siguiente sección.
-
-### Objetivos de aprendizajes pendientes
+### Objetivos de aprendizaje Edith Ortiz Cortés
### HTML y CSS
@@ -153,24 +29,24 @@ anterior en la siguiente sección.
### DOM y Web APIs
-* [ ] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
+* ☑ [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`]
+* ☑ [`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
+* ☑ [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises)
+* ☑ 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)
+* ☑ [Firestore](https://firebase.google.com/docs/firestore)
+* ☑ [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)
+* ☑ [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)
### Testing
@@ -181,92 +57,19 @@ anterior en la siguiente sección.
### Colaboración en Github
-* [ ] Branches
-* [ ] Pull Requests
+* ☑ Branches
+* ☑ Pull Requests
* [ ] Tags
### Organización en Github
-* [ ] Projects
-* [ ] Issues
-* [ ] Labels
-* [ ] Milestones
+* ☑ Projects
+* ☑ Issues
+* ☑ Labels
+* ☑ Milestones
### Buenas prácticas de desarrollo
* [ ] Modularización
* [ ] Nomenclatura / Semántica
-* [ ] Linting
-
-***
-
-## Recursos
-
-### Mobile first
-
-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.
-
-### 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 [Firestore](https://firebase.google.com/docs/firestore) o de forma
-local utilizando`localStorage`.
-
-### Autenticación y autorización
-
-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.
-
-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`](https://firebase.google.com/docs/auth/) y
-[`Firestore security rules`](https://firebase.google.com/docs/firestore/security/get-started)
-
-### CSS
-
-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.
-
-Recuerda que no puedes usar frameworks CSS, sólo *vanilla css* o [*sass*](https://sass-lang.com/).
-
-### Otras:
-
-* [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/)
-
-***
+* [ ] Linting
\ No newline at end of file
diff --git a/_mocks_/firebase-mock.js b/_mocks_/firebase-mock.js
new file mode 100644
index 00000000..3afcd5cc
--- /dev/null
+++ b/_mocks_/firebase-mock.js
@@ -0,0 +1,21 @@
+const firestoreMock = () => {
+ return {
+ collection: (nameCollection) =>{
+ return {
+ add: (objData) => {
+ return new Promise((resolve) => {
+ resolve('Hola!')
+ })
+ }
+ }
+ }
+ }
+}
+
+const firebase = {
+ firestore: firestoreMock
+}
+
+export default jest.fn(() => {
+ return firebase;
+})
\ No newline at end of file
diff --git a/images/demo.PNG b/images/demo.PNG
new file mode 100644
index 00000000..f2d07fc1
Binary files /dev/null and b/images/demo.PNG differ
diff --git a/images/demo2.PNG b/images/demo2.PNG
new file mode 100644
index 00000000..d11f52bf
Binary files /dev/null and b/images/demo2.PNG differ
diff --git a/images/demo3.PNG b/images/demo3.PNG
new file mode 100644
index 00000000..4687c6ae
Binary files /dev/null and b/images/demo3.PNG differ
diff --git a/images/proboceto.PNG b/images/proboceto.PNG
new file mode 100644
index 00000000..39f967b2
Binary files /dev/null and b/images/proboceto.PNG differ
diff --git a/images/protalta.PNG b/images/protalta.PNG
new file mode 100644
index 00000000..e2c4e7f0
Binary files /dev/null and b/images/protalta.PNG differ
diff --git a/images/protalta2.PNG b/images/protalta2.PNG
new file mode 100644
index 00000000..c005dfb9
Binary files /dev/null and b/images/protalta2.PNG differ
diff --git a/images/protalta3.PNG b/images/protalta3.PNG
new file mode 100644
index 00000000..a233d6b3
Binary files /dev/null and b/images/protalta3.PNG differ
diff --git a/images/protalta4.PNG b/images/protalta4.PNG
new file mode 100644
index 00000000..c84c3a0f
Binary files /dev/null and b/images/protalta4.PNG differ
diff --git a/package.json b/package.json
index 9a365577..54cd991e 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,6 @@
],
"license": "MIT",
"scripts": {
- "htmlhint": "htmlhint dist/*.html ",
- "eslint": "eslint --ext .js src/ test/",
- "stylelint": "stylelint --aei src/**/*.css",
- "pretest": "npm run htmlhint && npm run eslint && npm run stylelint",
"test": "jest --coverage",
"start": "serve src/"
},
@@ -28,9 +24,13 @@
"eslint-plugin-jest": "^22.1.2",
"htmlhint": "^0.11.0",
"jest": "^24.8.0",
+ "mock-cloud-firestore": "^0.12.0",
"regenerator-runtime": "^0.13.1",
"serve": "^11.0.2",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0"
+ },
+ "dependencies": {
+ "https-localhost": "^4.5.2"
}
-}
\ No newline at end of file
+}
diff --git a/src/example.js b/src/example.js
deleted file mode 100644
index 52d2c7ea..00000000
--- a/src/example.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const example = () => {
- // aquí tu código
-}
\ No newline at end of file
diff --git a/src/images/browser.png b/src/images/browser.png
new file mode 100644
index 00000000..1c96e24c
Binary files /dev/null and b/src/images/browser.png differ
diff --git a/src/images/camera.png b/src/images/camera.png
new file mode 100644
index 00000000..ce1e4704
Binary files /dev/null and b/src/images/camera.png differ
diff --git a/src/images/comment.png b/src/images/comment.png
new file mode 100644
index 00000000..b6db1915
Binary files /dev/null and b/src/images/comment.png differ
diff --git a/src/images/edit.png b/src/images/edit.png
new file mode 100644
index 00000000..6f8fba75
Binary files /dev/null and b/src/images/edit.png differ
diff --git a/src/images/facebook.png b/src/images/facebook.png
new file mode 100644
index 00000000..ad6e9e68
Binary files /dev/null and b/src/images/facebook.png differ
diff --git a/src/images/gmail.png b/src/images/gmail.png
new file mode 100644
index 00000000..ba182765
Binary files /dev/null and b/src/images/gmail.png differ
diff --git a/src/images/grayHeart.png b/src/images/grayHeart.png
new file mode 100644
index 00000000..b8c676dc
Binary files /dev/null and b/src/images/grayHeart.png differ
diff --git a/src/images/logOut.png b/src/images/logOut.png
new file mode 100644
index 00000000..871b7e39
Binary files /dev/null and b/src/images/logOut.png differ
diff --git a/src/images/logo.png b/src/images/logo.png
new file mode 100644
index 00000000..126d7a68
Binary files /dev/null and b/src/images/logo.png differ
diff --git a/src/images/logoLifestyle.png b/src/images/logoLifestyle.png
new file mode 100644
index 00000000..13f928f8
Binary files /dev/null and b/src/images/logoLifestyle.png differ
diff --git a/src/images/logoWhite.png b/src/images/logoWhite.png
new file mode 100644
index 00000000..4448b966
Binary files /dev/null and b/src/images/logoWhite.png differ
diff --git a/src/images/plusImage.png b/src/images/plusImage.png
new file mode 100644
index 00000000..13498d87
Binary files /dev/null and b/src/images/plusImage.png differ
diff --git a/src/images/redHeart.png b/src/images/redHeart.png
new file mode 100644
index 00000000..3c6b1c34
Binary files /dev/null and b/src/images/redHeart.png differ
diff --git a/src/images/whiteHeart.png b/src/images/whiteHeart.png
new file mode 100644
index 00000000..ea451868
Binary files /dev/null and b/src/images/whiteHeart.png differ
diff --git a/src/images/xGreen.png b/src/images/xGreen.png
new file mode 100644
index 00000000..ea80c559
Binary files /dev/null and b/src/images/xGreen.png differ
diff --git a/src/images/xRed.png b/src/images/xRed.png
new file mode 100644
index 00000000..77f04cb3
Binary files /dev/null and b/src/images/xRed.png differ
diff --git a/src/index.html b/src/index.html
index bb6937cc..2c1ca8e4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,9 +4,37 @@
-