diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..147ea27
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,22 @@
+module.exports = {
+ env: {
+ browser: true,
+ es2021: true
+ },
+ extends: [
+ 'plugin:react/recommended',
+ 'pluging:react/jsx-runtime',
+ 'standard'
+ ],
+ overrides: [
+ ],
+ parserOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module'
+ },
+ plugins: [
+ 'react'
+ ],
+ rules: {
+ }
+}
diff --git a/README.md b/README.md
index 718321f..28e436f 100644
--- a/README.md
+++ b/README.md
@@ -1,522 +1,182 @@
-# Lab Notes
-
+# Journal Note
+![imagen-de-pagina-desplegada]
+***
## Índice
-* [1. Preámbulo](#1-preámbulo)
-* [2. Resumen del Proyecto](#2-resumen-del-proyecto)
-* [3. Objetivos de Aprendizaje](#3-objetivos-de-aprendizaje)
-* [4. Consideraciones generales](#4-consideraciones-generales)
-* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto)
-* [6. Consideraciones técnicas](#6-consideraciones-técnicas)
-* [7. Hacker Edition](#7-hacker-edition)
-* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias)
+* [1. Introducción](#1-introducción)
+* [2. Descripción del Proyecto](#2-descripción-del-proyecto)
+* [3. Objetivos del Proyecto](#3-objetivos-del-proyecto)
+* [3.1 Objetivos generales](#3.1-objetivos-generales)
+* [3.2 Objetivos específicos](#3.2-objetivos-específicos)
+* [3.3 Objetivos de aprendizaje](#3.3-objetivos-de-aprendizaje)
+* [4. Desarrollo del proyecto](#4-Desarrollo-del-proyecto)
+* [4.1 Historia de usuaria 1](#4.1-historia-de-usuaria-1)
+* [4.2 Historia de usuaria 2](#4.2-historia-de-usuaria-2)
+* [4.3 Historia de usuaria 3](#4.3-historia-de-usuaria-3)
+* [4.4 Historia de usuaria 4](#4.4-historia-de-usuaria-4)
+* [4.5 Historia de usuaria 5](#4.5-historia-de-usuaria-5)
+* [5. Prototipos](#5-prototipos)
+* [5.1 Prototipos de baja fidelidad](#5.1-prototipos-de-baja-fidelidad)
+* [5.2 Prototipos de alta fidelidad](#5.2-prototipos-de-alta-fidelidad)
+* [6. Consideraciones generales](#6-consideraciones-generales)
+* [7. Criterios de aceptación mínimos del proyecto](#7-criterios-de-aceptación-mínimos-del-proyecto)
+* [8. Consideraciones técnicas](#8-consideraciones-técnicas)
+* [9. Tecnologías utilizadas](#9-tecnologías-utilizadas)
+* [10. Conclusiones del proyecto](#10-conclusiones-del-proyecto)
***
-## 1. Preámbulo
-
-Hoy en día no es práctico imaginar el desarrollo web sin HTML, CSS y JavaScript,
-esta última es el alma del desarrollo de aplicaciones web.
-[React](https://reactjs.org/), [Angular](https://angular.io/) y [Vue](https://vuejs.org/)
-son algunos de los _frameworks_ y _librerías_ de JavaScript más utilizados por
-lxs desarrolladorxs alrededor del mundo, y hay una razón para eso.
-En el contexto del navegador, [_mantener la interfaz sincronizada con el estado
-es difícil_](https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445).
-Al elegir un _framework_ o _librería_ para nuestra interfaz, nos apoyamos en una
-serie de convenciones e implementaciones _probadas_ y _documentadas_ para
-resolver un problema común a toda interfaz web. Esto nos permite concentrarnos
-mejor (dedicar más tiempo) en las características _específicas_ de
-nuestra aplicación.
-
-Cuando elegimos una de estas tecnologías no solo importamos un pedacito de
-código para reusar (lo cual es un gran valor per se), si no que adoptamos una
-**arquitectura**, una serie de **principios de diseño**, un **paradigma**, unas
-**abstracciones**, un **vocabulario**, una **comunidad**, etc.
+## 1. Introducción
+***
+PENDIENTE ...................................................
-Como desarrolladora front-end, estos kits de desarrollo pueden resultarte
-de gran ayuda para implementar rápidamente características de los proyectos en
-los que trabajes.
+## 2. Descripción del proyecto
+***
+En este proyecto se construyó una aplicación llamada ‘JOURNAL NOTE’ que tiene como objetivo permitir a la usuaria de manera digital tomar notas, editar, eliminar y consultarlas cuando así lo requiera.
+La ventaja que tiene esta app es que puedes apuntar cualquier información que necesites en muy poco tiempo.
+Debido a lo anterior, se elaboró un producto digital en el cual se pueda capturar datos importantes del día a día de forma dinámica y de acuerdo a sus necesidades y haciéndolo desde un ordenador, tablet o en el móvil.
-## 2. Resumen del Proyecto
+Para este proyecto fue necesario completar los OAs trabajando de manera colaborativa (dupla). Para ello fue indispensable realizar prototipos de baja y alta fidelidad, manejo de React (librería JS) HTML semántico, JavaScript, CSS, web APIs, base de datos como firebase(AUTH) y firestore, Vite como empaquetador, control de versiones con GIT-GITHUB así como testeos de usabilidad. El conjunto de estas funciones nos llevará a una interfaz donde se mostrará la aplicación una vez se registre con correo electrónico o google para entrar y crear sus notas personalizadas de manera organizada y manejable para el usuario final.
-En este proyecto construiremos una aplicación para tomar notas, que nos permita
-crear, editar, eliminar y consultarlas en cualquier momento.
+## 3. Objetivos del proyecto
+***
+Reflexionar y luego marcar los objetivos que hemos llegado a entender y aplicarlo.
-No existe día que no tomemos notas, siempre necesitamos apuntar alguna
-dirección, número telefónico, notas de alguna reunión o guardar nuestras URLs
-favoritas para poder consultarlas más tarde. Muchas veces para esta actividad
-utilizamos libretas o agendas que terminan siendo olvidadas, o anotamos de
-manera dispersa de tal manera que perdemos de vista la prioridad y el propósito
-de la nota lo cual da como resultado una nota perdida.
+### 3.1 Objetivos generales
-
+El objetivo principal de este proyecto es aprender a diseñar y construir una interfaz web donde se pueda visualizar y manipular sus notas y mantener la interfaz y el estado sincronizados.
-El objetivo principal de este proyecto es aprender a construir una _interfaz
-web_ usando el _framework_ elegido. Todos estos frameworks de Frontend atacan el
-mismo problema: **cómo mantener la interfaz y el estado sincronizados**. Así que
-esta experiencia espera familiarizarte con el concepto de _estado de pantalla_,
-y cómo cada cambio sobre el estado se va a ir reflejando en la interfaz (por
-ejemplo, cada vez que agregamos una _nota_, la interfaz debe actualizar la lista
-de notas).
+### 3.2 Objetivos específicos
-## 3. Objetivos de Aprendizaje
+Buscar y entender quién es la usuaria y cuales son sus necesidades creando una interfaz dinámica y fácil de manejar que permite registrar en su propia base de datos de todas sus notas así como, editar, guardar y eliminar de ser necesario.
-Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
+### 3.2 Objetivos de aprendizaje
### HTML
-- [ ] **Uso de HTML semántico**
-
- Links
-
- * [CSS media queries - MDN](https://developer.mozilla.org/es/docs/CSS/Media_queries)
-
+- Uso de selectores de CSS
+- Modelo de caja (box model): borde, margen, padding
+- Uso de flexbox en CSS**
+- Uso de CSS Grid Layout
+- Uso de media queries
### JavaScript
-- [ ] **Arrays (arreglos)**
-
- Links
-
- * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects)
-
-
-- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos**
-
-- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)**
-
- Links
-
- * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops)
- * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)
-
-
- * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)
-
-
-- [ ] **Pruebas asíncronas**
-
- Links
-
- * [Tests de código asincrónico con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/asynchronous)
-
-
-- [ ] **Uso de mocks y espías**
-
- Links
-
- * [Manual Mocks con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/manual-mocks)
-
-
-- [ ] **Uso de linter (ESLINT)**
-
-- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)**
-
-- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)**
+- Arrays (arreglos)
+- Objetos (key, value)
+- Diferenciar entre tipos de datos primitivos y no primitivos
+- Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
+- Funciones (params, args, return)
+- Pruebas unitarias (unit tests)
+- Pruebas asíncronas
+- Uso de mocks y espías
+- Uso de linter (ESLINT)
+- Uso de identificadores descriptivos (Nomenclatura y Semántica)
+- Diferenciar entre expresiones (expressions) y sentencias (statements)
### 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
-
- * [Sitio oficial de GitHub Pages](https://pages.github.com/)
-
-
-### Centrado en el usuario
-
-- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro**
-
-### Diseño de producto
-
-- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones**
-
-- [ ] **Seguir los principios básicos de diseño visual**
+- 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
### Firebase
-- [ ] **Firebase Auth**
-
- Links
-
- * [Primeros pasos con Firebase Authentication en sitios web - Documentación oficial](https://firebase.google.com/docs/auth/web/start?hl=es)
- * [Administra usuarios en Firebase (onAuthStateChanged)](https://firebase.google.com/docs/auth/web/manage-users?hl=es#get_the_currently_signed-in_user)
-
-
-- [ ] **Firestore**
-
- Links
-
- * [Firestore - Documentación oficial](https://firebase.google.com/docs/firestore?hl=es)
- * [Reglas de seguridad de Firestore - Documentación oficial](https://firebase.google.com/docs/rules?hl=es)
- * [Obtén actualizaciones en tiempo real con Cloud Firestore - Documentación oficial](https://firebase.google.com/docs/firestore/query-data/listen?hl=es)
-
-
- * [Angular Components Overview - Documentación oficial (en inglés)](https://angular.io/guide/component-overview)
- * [Introduction to components and templates - Documentación oficial (en inglés)](https://angular.io/guide/architecture-components#introduction-to-components)
-
-
- * [Pasando datos a componentes secundarios con Props - Documentación oficial](https://es.vuejs.org/v2/guide/components.html#Pasando-datos-a-componentes-secundarios-con-Props)
-
-
- * [Mapeando una matriz a elementos con v-for - Documentación oficial](https://es.vuejs.org/v2/guide/list.html#Mapeando-una-matriz-a-elementos-con-v-for)
-
-
-- [ ] **Eventos (v-on)**
-
- Links
-
- * [Manejo de eventos - Documentación oficial](https://es.vuejs.org/v2/guide/events.html)
-
-
- * [Propiedades Computadas y Observadores](https://es.vuejs.org/v2/guide/computed.html)
-
+- JSX
+- Componentes y propiedades (props)
+- Manejo de eventos
+- Listas y keys
+- Renderizado condicional
+- Elevación de estado
+- Hooks
+- CSS modules
+- React Router
+- Datos y métodos
+- Uso y creación de componentes
+- Props
+- Directivas (v-bind | v-model)
+- Iteración (v-for)
+- Eventos (v-on)
+- Propiedades Computadas y Observadores
+
+## 4. Desarrollo del proyecto
+***
+### 4.1 Historia de usuaria 1
-- [ ] **Routing**
+* Debería poder crear cuenta, iniciar y cerrar sesión.
- Links
+* Yo como usuaria debo poder crear una cuenta y autenticarse usando el login de Google para acceder a mis notas.
- * [Getting Started - Documentación oficial de Vue Router](https://router.vuejs.org/guide/#html)
-
+### 4.2 Historia de usuaria 2
-- [ ] **Clases y Estilos**
+* Debería poder tomar nota
- Links
+* Yo como usuaria quiero tomar nota para no depender de mi mala memoria y tener presente en todo momento los apuntes o cosas importantes que antes escribía en papel.
- * [Enlace Clases y Estilos - Documentación oficial](https://es.vuejs.org/v2/guide/class-and-style.html)
-
+### 4.3 Historia de usuaria 3
-## 4. Consideraciones generales
+* Debería poder ver las notas
-* Este proyecto se debe "resolver" de forma individual.
+* yo como usuaria quiero leer mis notas para poder modificar lo que escribí antes.
-* La duración estimada del proyecto es de 4 sprints, con una duración de una
- semana cada uno.
+### 4.4 Historia de usuaria 4
-* Trabaja en una historia hasta terminarla antes de pasar a la siguiente.
+* Debería poder editar mis notas
-* La aplicación debe ser un _Single Page App_. Las notas serán realizadas desde
-una _tablet_, pero **no debe ser una app nativa**, sino una web app que sea
-**responsive** y pueda funcionar **offline**.
+* Yo como usuaria quiero editar mis notas para poder modificar lo que escribí antes.
-* Necesitamos pensar bien en el aspecto UX de quienes van a tomar las notas, el
-tamaño y aspecto de los botones, la visibilidad del estado actual del pedido,
-etc.
+### 4.5 Historia de usuaria 5
-* Implementar pruebas unitarias de tus componentes.
+* Debería poder borrar notas
-## 5. Criterios de aceptación mínimos del proyecto
+* Yo como usuaria quiero borrar una nota para no volver a verla.
-### Definición del producto
+## 5. Prototipos
-La [_Product Owner_](https://youtu.be/r2hU7MVIzxs) nos presenta este _backlog_
-que es el resultado de su trabajo colaborativo.
+### 5.1 prototipos de baja fidelidad
+![imagen-prototipos-de-baja-fidelidad] .....................
***
+Estos prototipos fueron pensados para la mujer digital, buscando como objetivo que la utilización sea sumamente fácil y simple.
-### Historias de usuaria
-#### [Historia de usuaria 1] Debería poder crear cuenta, iniciar y cerrar sesión
-
-Yo como usuaria debo poder crear una cuenta y autenticarme usando login de
-Google para acceder a mis notas.
+### 5.2 prototipos de alta fidelidad
+![imagen-prototipos-de-alta-fidelidad] ......................
***
+Basándonos en los prototipos de baja fidelidad, reestructuramos y determinamos paleta de colores a utilizar, así como la fuentes de las letras, el logo y dinámica de cómo se mostrará la página de primeras en una tablet usando como recurso Figma.
-#### [Historia de usuaria 2] Debería poder tomar nota
-
-Yo como usuaria quiero tomar nota para no depender de mi mala
-memoria y tener presente en todo momento los apuntes ó cosas importantes que
-antes escribía en papel.
-
+## 6. Consideraciones generales
***
+- El proyecto se resolvió en dupla.
+- duración estimada del proyecto de 4 sprints, con una duración de una semana cada uno.
+- La aplicación debe ser Single Page App, las notas serán realizadas a partir de una tablet pero a la vez responsive.
+- Necesitamos pensar bien en el aspecto UX de quienes van a tomar las notas, el tamaño y aspecto de los botones, la visibilidad del estado actual del pedido, etc.
+- implementación de pruebas unitarias de sus componentes.
-#### [Historia de usuaria 3] Debería poder ver las notas
-
-Yo como usuaria quiero leer mis notas para recordar lo que escribí
-antes.
-
+## 7. Criterios de aceptación mínimos del proyecto
***
-
-#### [Historia de usuaria 4] Debería poder editar las notas
-
-Yo como usuaria quiero editar notas para poder modificar lo que
-escribí antes.
-
+Lo que debe ocurrir para que se satisfagan las necesidades del usuario.
+- Anotar el título de la nota
+- Agregar contenido de la nota
+- Ver todas mis notas
+- Ver la última modificación de mi nota
+- Eliminar notas
+- Se ve y funciona bien en una tablet
+
+## 8. Consideraciones técnicas
***
-
-#### [Historia de usuaria 5] Debería poder borrar notas
-
-Yo como usuaria quiero borrar una nota para no volver a verla.
-
-***
-
-##### Criterios de aceptación
-
-Lo que debe ocurrir para que se satisfagan las necesidades del usuario
-
-* Anotar un título a mi nota
-* Agregar el contenido de mi nota.
-* Ver todas mis notas.
-* Ver la última modificación de la nota.
-* Modificar las notas.
-* Eliminar notas.
-* Se ve y funciona bien en una _Tablet_
-
-##### Definición de terminado
-
-Lo acordado que debe ocurrir para decir que la historia está terminada.
-
-* Debes haber recibido _code review_ de al menos una compañera.
-* Haces _test_ unitarios y, además, has testeado tu producto manualmente.
-* Desplegaste tu aplicación y has etiquetado tu versión ([`git tag`](https://youtu.be/5DkX3HFgklM)).
-
-## 6. Consideraciones técnicas
-
El proyecto deberá contener los siguientes archivos base de configuración,
aunque no serán los únicos archivos que quizás tendrás que crear.
@@ -528,57 +188,17 @@ aunque no serán los únicos archivos que quizás tendrás que crear.
* `.eslintrc` este archivo contiene reglas para formatear el código además de
ser una buena practica tener configurado un linter.
-Para este proyecto necesitas crear una Web App con **una librería o
-framework de JavaScript** (`React`, `Angular` o `Vue`) y **Firebase**.
-
-Para este proyecto tendrás que manejar _vistas_. Esto significa que cada sección
-tendrá su propia URL, la cual indica que _vista_ o _componente_ será mostrado en
-pantalla. Para ello necesitaremos investigar acerca de _la API para el manejo de
-rutas (en la librería o framework que elijas)_ y el concepto de _Single Page
-Application_.
-
-## 7. Hacker Edition
+Para este proyecto se crea una Web App con una librería de JavaScript en nuestro caso React y Firebase.
-Una vez que hayas terminado las funcionalidades base del proyecto, puedes
-pasarte a esta sección.
-
-* Si la usuaria empieza a escribir una nota y por alguna razón la pestaña del
- navegador se cierra, cuando la vuelva a abrir, la nota debería mostrarse como
- estaba.
-* Subir imágenes.
-* Ver el número de veces que he editado mi nota.
-* Consumo de API/s (Google Maps, Spotify, Pinterest, etc.)
-* Progressive Web App (PWA).
-* Puedes crear categorías y clasificar por tipo de nota.
-* Guardar el color de la nota.
-* Crear una nota como publica.
-
-## 8. Pistas, tips y lecturas complementarias
-
-### Frameworks / libraries
-
-* [React](https://reactjs.org/)
-* [Angular](https://angular.io/)
-* [Vue](https://es.vuejs.org/index.html)
-
-### Herramientas
-
-* [npm-scripts](https://docs.npmjs.com/misc/scripts)
-* [Babel](https://babeljs.io/)
-* [webpack](https://webpack.js.org/)
-
-### PWA
-
-* [Tu primera Progressive Web App - Google developers](https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=es)
-* [Progressive Web Apps - codigofacilito.com](https://codigofacilito.com/articulos/progressive-apps)
-* [offlinefirst.org](http://offlinefirst.org/)
-* [Usando Service Workers - MDN](https://developer.mozilla.org/es/docs/Web/API/Service_Worker_API/Using_Service_Workers)
-* [Cómo habilitar datos sin conexión - Firebase Docs](https://firebase.google.com/docs/firestore/manage-data/enable-offline?hl=es-419)
+## 9. Tecnologías utilizadas
+***
+- Visual Studio Code
+- Git y GitHub
+- React
+- Vite
+- Figma
-### Otros recursos
-* [create-react-app](https://create-react-app.dev/docs/getting-started)
-* [npm-scripts](https://docs.npmjs.com/misc/scripts)
-* [deploy con gh-pages](https://medium.com/the-andela-way/how-to-deploy-your-react-application-to-github-pages-in-less-than-5-minutes-8c5f665a2d2a)
-* [Usando Service Workers - MDN](https://developer.mozilla.org/es/docs/Web/API/Service_Worker_API/Using_Service_Workers)
-* [What is a Single Page Application](https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58)
+## 10. Conclusiones del proyecto
+***
+PENDIENTE...............................
\ No newline at end of file
diff --git a/index.html b/index.html
index d53d578..41032d4 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,21 @@
-
-
-
-
-
- Lab Notes
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ Journal Note
+
+
+
+
+
+
+
+