/LIM015-social-network

Discover es una red social(SPA) que permite a cualquier usuario crear una cuenta de acceso y loguearse con ella, el usuario podra crear, editar y borrar publicaciones en tiempo real.

Primary LanguageJavaScript

Discover ✈️ 🌎

Made by Alisson Segura

Social Network Project

Índice

Es una red social en donde todos los usuarios podrán compartir sus experiencias obtenidas en cualquier lugar del mundo, usuarios que esten planeando un viaje y busquen recomendaciones, como tambien usuarios que deseen recomendar hospedajes, restaurantes o cualquier interes o información que pueda ayudar a otro viajero.

Esta red social va enfocada para usuarios apartir de los 18 , sin limite de edad para hombres y mujeres entre ellos turistas, aficionados, exploradores y mucho más.

Nuestros usuarios utilizarán nuestro producto cuando quieran emprender un nuevo viaje y necesiten reseñas o tips de algún lugar en específico, cuando quieran contactar a un/a viajero/a directamente o cuando simplemente quiera ver que hay de nuevo en la red social.

2. Historias de Usuario 👤 📝

Las historias de usuario estan organizadas segun prioridad.

1. Los usuarios nuevos deben poder crear una cuenta con email y password válidos para ingresar
a la red social.

2. Como usuario nuevo debo poder iniciar sesión con mi cuenta de Google para ingresar a la red social (sin necesidad de crear una cuenta de email válido).

3. Los usuario registrados deben poder iniciar sesión con email y password válidos para ingresar
a la red social.

4. El usuario loggeado debo poder visualizar sus datos tales como nombre y imagen.

5. El usuario loggeado debe poder crear, guardar, modificar y eliminar un post.

6. El usuario loggeado debe poder ver todos los posts que ha creado desde el más reciente hasta el más antiguo.

8. El usuario loggeado debe poder visualizar las publicaciones de otros usuarios.

3. Diseño de la Interfaz de Usuario

  • Vista mobile

    login

    signup

    news

  • Vista Desktop

    login

    signup

    news

  • Prototipado en Figma

    Figma

4. Objetivos de aprendizaje

HTML

  • Diferenciar entre expression y statements

  • Diferenciar entre tipos de datos atómicos y estructurados

  • Uso de Media Queries

DOM

  • Uso de selectores del DOM

  • Manejo de eventos del DOM

  • Manipulación dinámica del DOM (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)

  • History-API

  • Localstorage

CSS

JavaScript

  • Uso de linter (ESLINT)

  • Uso de identificadores descriptivos (Nomenclatura y Semántica)

  • Diferenciar entre expresiones (expressions) y sentencias (statements)

  • Callbacks

    Links

Control de Versiones (Git y GitHub)

  • Git: Instalación y configuración

  • Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

  • Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)

  • GitHub: Creación de cuenta y repos, configuración de llaves SSH

  • GitHub: Despliegue con GitHub Pages

    Links

  • GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)

  • GitHub: Organización en Github (projects | issues | labels | milestones | releases)

UX (User eXperience)

  • Diseñar la aplicación pensando en 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

Firebase