+
+
-## Objetivo
+## Prototipo de alta fidelidad
-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.
+Integramos los elementos de cada sketch que aportaban más valor a la propuesta de la aplicación, optimizando la navegación y la experiencia del usuario al interactuar con la misma, todo esto tomando en cuenta el feedback recibido por los coaches y las compañeras.
-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
-
### 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)
-* [ ] [History API](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
-* [ ] [`localStorage`]
+- [x] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n)
+- [x] [History API](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
+- [x] [`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
-([`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))
+- [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)
-* [ ] [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)
+- [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)
### Testing
-* [ ] [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)
+- [ ] [Testeo de tus funciones](https://jestjs.io/docs/es-ES/getting-started)
+- [ ] [Testeo asíncrono](https://jestjs.io/docs/es-ES/asynchronous)
+- [x] [Mocking](https://jestjs.io/docs/es-ES/manual-mocks)
### Colaboración en Github
-* [ ] Branches
-* [ ] Pull Requests
-* [ ] Tags
-
-### Organización en Github
+- [x] Branches
+- [x] Pull Requests
+- [ ] Tags
-* [ ] Projects
-* [ ] Issues
-* [ ] Labels
-* [ ] Milestones
+- [x] 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/)
+- [x] Modularización
+- [x] Nomenclatura / Semántica
+- [ ] Linting
-***
+---
diff --git a/_mocks_/firebase-mock.js b/_mocks_/firebase-mock.js
new file mode 100644
index 00000000..e69de29b
diff --git a/firebase.json b/firebase.json
new file mode 100644
index 00000000..e7829392
--- /dev/null
+++ b/firebase.json
@@ -0,0 +1,10 @@
+{
+ "hosting": {
+ "public": "public",
+ "ignore": [
+ "firebase.json",
+ "**/.*",
+ "**/node_modules/**"
+ ]
+ }
+}
diff --git a/img_readme/figma1.png b/img_readme/figma1.png
new file mode 100644
index 00000000..03736067
Binary files /dev/null and b/img_readme/figma1.png differ
diff --git a/img_readme/figma2.png b/img_readme/figma2.png
new file mode 100644
index 00000000..f5499ed8
Binary files /dev/null and b/img_readme/figma2.png differ
diff --git a/img_readme/h5.png b/img_readme/h5.png
new file mode 100644
index 00000000..8789b5ce
Binary files /dev/null and b/img_readme/h5.png differ
diff --git a/img_readme/sketch_Bren.jpg b/img_readme/sketch_Bren.jpg
new file mode 100644
index 00000000..a1700925
Binary files /dev/null and b/img_readme/sketch_Bren.jpg differ
diff --git a/img_readme/sketch_Kari.jpg b/img_readme/sketch_Kari.jpg
new file mode 100644
index 00000000..fac6f257
Binary files /dev/null and b/img_readme/sketch_Kari.jpg differ
diff --git a/img_readme/sketch_Xel.jpg b/img_readme/sketch_Xel.jpg
new file mode 100644
index 00000000..5c3094cc
Binary files /dev/null and b/img_readme/sketch_Xel.jpg differ
diff --git a/package.json b/package.json
index 9a365577..076cbe5a 100644
--- a/package.json
+++ b/package.json
@@ -14,23 +14,52 @@
"eslint": "eslint --ext .js src/ test/",
"stylelint": "stylelint --aei src/**/*.css",
"pretest": "npm run htmlhint && npm run eslint && npm run stylelint",
- "test": "jest --coverage",
+ "test:coverage": "jest --coverage",
+ "test:watch": "jest --watch",
"start": "serve src/"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-transform-modules-commonjs": "^7.2.0",
"babel-core": "^7.0.0-bridge.0",
- "babel-jest": "^24.8.0",
+ "babel-jest": "^24.9.0",
+ "babel-preset-env": "^1.7.0",
"eslint": "^6.0.1",
"eslint-config-airbnb-base": "^13.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jest": "^22.1.2",
+ "firestore-jest-mock": "^0.3.0",
"htmlhint": "^0.11.0",
- "jest": "^24.8.0",
- "regenerator-runtime": "^0.13.1",
+ "jest": "^24.9.0",
+ "mock-cloud-firestore": "^0.12.0",
+ "regenerator-runtime": "^0.13.5",
"serve": "^11.0.2",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0"
- }
-}
\ No newline at end of file
+ },
+ "dependencies": {
+ "bulma": "^0.8.2",
+ "firebase-admin": "^8.11.0",
+ "mockfirebase": "^0.12.0"
+ },
+ "settings": {
+ "import/resolver": {
+ "node": {
+ "paths": ["src"],
+ "extensions": [".js", ".ts", ".d.ts"]
+ }
+ }
+ },
+ "directories": {
+ "test": "test"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/Kari2406/CDMX009-Social-Network.git"
+ },
+ "author": "",
+ "bugs": {
+ "url": "https://github.com/Kari2406/CDMX009-Social-Network/issues"
+ },
+ "homepage": "https://github.com/Kari2406/CDMX009-Social-Network#readme"
+}
diff --git a/public/firebase-auth.js b/public/firebase-auth.js
new file mode 100644
index 00000000..5ac0e197
--- /dev/null
+++ b/public/firebase-auth.js
@@ -0,0 +1,57 @@
+// Firebase auth functions
+
+// Login with email
+export const emailLoginFb = (userEmail, userPassword) => {
+ firebase.auth().signInWithEmailAndPassword(userEmail, userPassword);
+};
+
+// Login with google
+export const googleLogin = () => {
+ const provider = new firebase.auth.GoogleAuthProvider();
+ return firebase.auth().signInWithRedirect(provider);
+};
+// Login with facebook
+export const facebookLogin = () => {
+ const provider = new firebase.auth.FacebookAuthProvider();
+ return firebase.auth().signInWithRedirect(provider);
+};
+// Logup with email
+export const emailLogup = (userEmail, userPassword) => {
+ firebase.auth().createUserWithEmailAndPassword(userEmail, userPassword);
+};
+// Sign out
+export const logOut = () => {
+ firebase.auth().signOut();
+};
+
+ // Observator
+let displayName;
+let photoURL;
+
+const observatorState = () => {
+ firebase.auth().onAuthStateChanged((user) => {
+ const menu = document.querySelector('.menu');
+ if (user) {
+ const menuPic = document.querySelector('#user-photoURL');
+ const menuName = document.querySelector('#user-displayName');
+ const deskPic = document.querySelector('#userdesk-photoURL');
+ const deskName = document.querySelector('#userdesk-displayName');
+ menuName.innerHTML = user.displayName;
+ menuPic.innerHTML = `#${doc.data().activity}
+${doc.data().location}
+${doc.data().description}
++ ${doc.data().date} +
+ + ++ +
+
+
+ El archivo especificado no se encontró en este sitio web. Por favor, compruebe la URL para errores y vuelva a intentarlo. +
+ `; + const divElemt = document.createElement('div'); + divElemt.setAttribute('id', 'message'); + divElemt.innerHTML = viewDifferent; + return divElemt; +}; diff --git a/public/view/follow.js b/public/view/follow.js new file mode 100644 index 00000000..5ccd416c --- /dev/null +++ b/public/view/follow.js @@ -0,0 +1,21 @@ +export default () => { + const viewConexions = ` +
Bren Carranco
Karina Sanchez
Karina Sanchez
Bren Carranco
+ Puedes ingresar con:
++ ¿No tienes una cuenta? + Regístrate ahora +
+
+ O crear cuenta con:
+
+
+ #mascotas
+hace 3 horas
+
+
+ 
+ 
+
+ Karina Sr
+ Los bowls
+
#comida
+ Hace 2 hrs
+
+
+
+
+ Karina Sr
+ Los bowls
+
#comida
+ Hace 2 hrs
+
+ 
+ 
+ 
+