SpaceNotes es una single page application donde los usuarios pueden iniciar sesión en la aplicación con su usuario o con una cuenta de Google así como registrarse con correo electrónico y contraseña, dentro de SpaceNotes el usuario puede crear notas, editarlas y borrarlas, dichas notas se crean con colores aleatorios, y contienen un título, contenido y la fecha en la que fué creada la nota.
El usuario principal de SpaceNotes es cualquier persona que quiera tener sus notas, listas, tareas e incluso frases motivadoras, en un espacio seguro y personal, esto con la finalidad de tenerlas disponibles en cualquier lugar y poder acceder a ellas por medio de su página web
Le permite a los usuarios crear notas y evitar así que olvide tareas, eventos, listas o cosas importantes, para ello SpaceNotes brinda un espacio en el que se pueden crear notas para evitar olvidarlas
Para realizar dicho sistema se llevó a cabo un prototipo de baja fidelidad con el que se buscaba:
- Brindarle al usuario una interfaz fácil de comprender y visualmente atractiva
- Un flujo de pantallas optimo y coherente de acuerdo a una SPA (single page application)
- Un prototipo que pudiera ser iterable y creativo
Para lograr que el prototipo fuera claro y funcional se realizo e proceso de Design Thinking con un usuario:
- Empatizar: Consistió en entender el problema que se nos había planteado y posteriormente se realizó una plática de aproximadamente 10 minutos con un usuario, el cual brindo información valiosa para entender que flujo de trabajo sería adecuado para dicha aplicación. Otro recurso que fué clave para entender el flujo de proyecto fueron las Historias de usuario que permitieron entender que eran las actividades que seguiría el usuario
- Definir: Con la información brindada por el usuario se definió un moodboard visual para la UI del sistema y se listaron los elementos que podría formar parte del sistema. En esté punto se definieron recursos visuales, colores, fuentes y tamaños de letra, así como referencias que le dieran identidad visual al proyecto.
- Idear: Aquí se creo el primer prototipo en papel el cual fue una guía de como quedaría la interfaz de acuerdo a componentes y elementos, posteriormente se pidió feedback a otros usuarios para mejorar el prototipo, en este feedback obtuvimos: Dejar las categorías al final del proyecto, Estandarizar el diseño del login con el inicio de sesión, cambiar las quotes por un elemento gráfico y darle identidad al proyecto.
- Prototipar: Se realizó un prototipo en Figma el cual representa de manera visual el producto final de la página, esta fue la base para que pudiera comenzar a maquetar el sistema en HTML, CSS así como la realización de los componentes en React
-
Probar: Las pruebas se generaron mientras se le daba funcionalidad al sistema y como complemento se le pidió a un usuario probar la interfaz para poder observar el flujo de trabajo con ella, obteniendo un buen resultado de usabilidad.
-
Feedback: al tener avanzado el sistema se realizaron 5 Demos en la que las mejoras que se debía hacer eran: Líneas de inputs son muy gruesas, agregar el botón de google, cambiar el color del texto del placeholder, verificar en accesibilidad el contraste de colores con lighthouse y posicionar los botones de eliminar y editar más separados. Todo el feedback fué integrado para mejorar el proyecto.
👩🏻💻 Github Projoects
👩🏻💻 Figma
👩🏻💻 React
👩🏻💻 React Router
👩🏻💻 React Testing Library
👩🏻💻 HTML
👩🏻💻 CSS / CSS imports
👩🏻💻 JS/ JSX
👩🏻💻 Firebase
👩🏻💻 Jest
🖥 HTML semántico
🖥 CSS (Flexbox CSS, CSS Grid, selectores de CSS)
🖥 Box Model
🖥 Responsive Web Design
🖥 Uso de funciones
🖥 Manipulación dinámica del DOM
🖥 Selectores y eventos del DOM
🖥 Ciclos (ForEach)
🖥 Condicionales (If)
🖥 Array Metods (.filter, .map)
🖥 Uso de Strings, Array y Objetos
🖥 Manejo de Data por medio de Firebase
🖥 Uso de datos primitivos
🖥 Pruebas unitarias y de integración con Jest
💻 CSS BEM
💻 React
💻 React Router
💻 React Testing Library
💻 Firebase
💻 Autenticación Firebase
💻 Inicio de sesión con proveedores Firebase
💻 Firestore
💻 Ruteo SPA (Single Page Aplication)
💻 Pruebas asíncronas
💻 Promesas
💻 Async - await
💻 Git Tags
🎨 Conceptos de UI/UX
🎨 Manejo de Figma
🎨 Markdown
💪🏻 Colaboración
💪🏻 Profesionalismo
💪🏻 Resolución de problemas
💪🏻 Resiliencia
💪🏻 Comunicación eficaz
👩🏼💻 PAULETTE VILLEGAS - https://github.com/PauliVr \