- 1. Preámbulo
- 2. Challege
- 3. Resumen del proyecto
- 4. Objetivos de aprendizaje
- 5. Especificaciones
- 6. Otras Especificaciones
- 7. Imagenes
- 8. Links relacionados
- 9. Autores
Sabemos que la pandemia ha dejado estragos en todos y nos ha privado de una de las cosas que mas nos gusta hacer que es viajar, y que mejor que una red social para compartir experiencias ¿no? es aquí donde nace LA RUTA, para volvernos a conectar con nuestros paisajes compartiendo las mejores experiencias con otros usuarios y la clave es el ahorro.
Este challenge es proporcionado por el equipo de Laboratoria, el cual consiste en realizar una red social básica implementando SPA, router, firebase y sus servicios con vanilla js.
Pensando en el usuario y la situación actual que nos acontece, traemos una propuesta acerca de lo que nos hemos privado por muchos meses durante la pandemia, que es viajar, tenemos en cuenta que la economía esta desgastada también y mucha gente que no viajaba lo empezará a realizar cuando las cosas se regulen, es por eso que esta red social es para los amantes de los viajes y tienen la oportunidad de compartir sus experiencias, gastos de viajes, mejores hoteles a un precio accesible para aquellas personas que viajan por primera vez o quieren escaparse de la ciudad sin tener que invertir tanto. Confiamos en que esta red sea amigable, sencilla pero muy útil para que el usuario (Viajero empedernido o no jaja) pueda encontrar una variedad de recomendaciones y opte por la que mejor le parezca.
UX:
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía).
- Planear y ejecutar tests de usabilidad.
HTML:
- Uso de HTML semántico.
CSS:
- Uso de selectores de CSS.
- Modelo de caja (box model): borde, margen, padding.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de flexbox en CSS.
- Uso de CSS Grid Layout
DOM - WEB API:
- Uso de selectores del DOM.
- Manejo de eventos del DOM (listeners, propagación, delegación)
- Manipulación dinámica del DOM (appendChild |createElement | createTextNode| innerHTML | textContent | etc.).
- Ruteado (History API, evento hashchange, window.location)
- History API
- Localstorage
JAVASCRIPT:
- Uso de condicionales (if-else | switch | operador ternario).
- Uso de funciones (parámetros | argumentos | valor de retorno).
- Manipular arrays (filter | map | sort | reduce).
- Manipular objects (key | value).
- Uso de ES Modules (import | export).
- Diferenciar entre expression y statements.
- Diferenciar entre tipos de datos atómicos y estructurados (datos primitivos y no primitivos).
- Variables (declaración, asignación, ámbito)
- Uso de bucles/ciclos (while, for, for..of)
- Funciones (params, args, return)
- Uso de Callbacks
- Consumo de Promesas
TESTING:
- Testeo unitario.
- Testeo asíncrono.
- Uso de librerias de Mock.
ESTRUCTURA DEL CODIGO, GUIA DE ESTILO - Organizar y dividir el código en módulos (Modularización).
- Uso de identificadores descriptivos (Nomenclatura | Semántica).
- Uso de mocks y espías.
- Módulos de ECMAScript (ES Modules)
- Uso de identificadores descriptivos (Nomenclatura y Semántica)
- Uso de linter (ESLINT). GIT / GITHUB
- Instalación y configuración
- Uso de comandos de git (add | commit | pull | status | push).
- Manejo de repositorios de GitHub (clone | fork | gh-pages | code review)
- Colaboración en Github (branches | pull requests | tags)/(branch, checkout, fetch, merge, reset, rebase, tag)
- Creación de cuenta y repos, configuración de llaves SSH
- Organización en Github (projects | issues | labels | milestones)
FIREBASE:
- Firestore
- Firebase Auth
- Firebase security rules
- Observables
TOPIC:
Turismo
OBJETIVOS PRINCIPALES:
- Permitir a cualquier usuario crear una cuenta de acceso y loguearse con ella; crear, editar, borrar y "likear" publicacciones.
- Permitir al usuario loguearse con su cuenta de google
- Permitir compartir publicaciones con la comunidad de viajeros
- Permitir al usuario editar, eliminar sus posts
- Poder darle 1 solo like por usuario a cada publicación
Quiénes son los principales usuarios de producto:
Todas las personas que les interesa viajar o compartir sus experiencias
Qué problema resuelve el producto / para qué le servirá a estos usuarios:
Luego de la pandemia, muchas personas desearan salir de sus hogares a un viaje ya sea express o de larga estadia, sin embargo muchas personas no conocen los destinos turisticos que tiene su país y con esta red pueden descubrir a través de otros viajeros propuestas económicas, divertidas y completas
Este proyecto esta realizado desde el frontend con vanilla js y con ayuda de firebase poemos tener un backend amigable y en tiempo real
Test de Usabilidad
Realizamos las sgtes preguntas a algunos de nuestros usuarios:
- ¿Todas los botones fueron visibles y accesibles para ti ?
- ¿Cómo te sentiste al usar este sistema?
- Si tuvieras la oportunidad de ser parte de esta red social, ¿te registrarías?
- ¿Sentiste que la página era sobrecargada o demasiado minimalista?
- ¿Te fue sencillo usar la aplicación?
- ¿Qué te gustaría mejorar en la página y por qué?
Las respuesta que tuvimos fueron:
| USUARIO | FECHA | COMENTARIO | CHECK |
|---|---|---|---|
| USUARIO1 | 03/09/2021 |
|
✅ |
| USUARIO2 | 03/09/2021 |
|
✅ |
| USUARIO3 | 03/09/2021 |
|
❕ |
| USUARIO4 | 03/09/2021 |
|
❕ |
| USUARIO5 | 03/09/2021 |
|
❕ |
PROTOTIPO DEN FIGMA:
Inicio del proyecto: 27/07/2021
- PRODUCTO FINAL:
Fin del proyecto: 31/08/2021
Estos son acuerdos, herramientas y archivos que usamos durate el proceso del proyecto para organizarnos y hacer un trabajo eficiente y colaborativo.
Trabajo colaborativo: 💪
Este proyecto fue hecho posible gracias a:
- Noelis Hernández - noelishernandezdg
- Emily Fernandez - Emily3000
- Andrea Blanco - Andu15