Table of Contents
Bienvenidos al proyecto final del bootcamp Frontend Developer que he cursado en Ironhack. Este proyecto consiste en una aplicación web de tareas sencilla creada con Vue.js 3 que permite a los usuarios crear cuentas, registrar tareas, editarlas y marcarlas como completadas. Todos los datos de los usuarios y las tareas se almacenan en una base de datos de Supabase y se han creado estilos propios para la maquetación CSS.
La aplicación se ha desplegado a través del servicio que ofrece Vercel para que los usuarios puedan acceder a ella con facilidad. Además, se ha utilizado Pinia de Vue para implementar el manejo de estado y asegurar un funcionamiento óptimo.
El propósito de este proyecto es consolidar los conocimientos ya adquiridos durante el curso, así como continuar aprendiendo durante el desarrollo del proyecto. Espero que disfruten usando la aplicación tanto como disfruté creándola!
- Vue.js 3
- HTML5
- CSS3
- JavaScript ES6
- Supabase
- Vercel
- Visual Studio Code
- Git
- Conocer el projecto
- Crear archivo Readme
- Crear HTML del formulario SigIn
- Conectar el proyecto a Supabase, crear tabla "profiles"
- Crear lógica para poder acceder a través del formulario SignIn
- Crear lógica para el botón LogOut
- Crear lógica para que funcione el CRUD de las tareas
- Crear modal para confirmar la eliminación de una tarea
- Crear storage en Supabase
- Despligue el proyecto con Vercel
- Crear página de perfil
- Empezar a crear lógica para editar el perfil
- Crear botón de mostrar/ocultar password
- Terminar lógica de perfil
- Crear lógica para actulizar perfil y la foto de perfil
- Empezar con el CSS de SignInc
- Terminar con el CSS de SignIn
- Arreglar el código para que se guarde más de un perfil en la tabla profiles.
- Mostrar la información correctamente en el perfil.
- Maquetar EditProfile.
- Maquetar el Navbar
- Maquetar TaskItem y modificar botones por iconos.
- Actualizar Readme
- Hacer que se muestre el modal para informar al usuario que se ha registrado y debe confirmar el correo que ha recibido en SingUp.
- Arreglar el modal de eliminar tarea, se muestra siempre al principio de la página, pero cuando se elimina una tarea del final, el usuario no ve que el modal se ha mostrado.
- Maquetar las TaskItem
- No poder editar la tarea si está completada.
- Crear un componente footer y maquetar
- Menú Hamburguesa
- Maquetar Modal de eliminar tarea
- Poner el footer al final de la página, aunque tenga poco contenido el resto de la web.
- Cambiar Favicon
- Maquetar el Navbar
- Hacer el responsive (Media Queries)
- Maquetar input de seleccionar archivo en Edit Profile (opcional)
- Añadir botón para desplazar arriba en la pantalla de tareas
- Hacer que el tiempo de cada tarea se quede registrado (conectar con supabase y crear columna time_task en la tabla tasks)
- Hacer que al completar la tarea se pueda ver el tiempo total invertido.
- Animación loader al cargar la foto de perfil
- Revisar el Responsive y pulir algunas cosas
- Revidar y limpiar código
- Terminar el Readme
- Preparar presentación
- Presentación del proyecto
Angela Garcia Muñoz - LinkedIn
Correo electrónico: [email protected]
Project Link: GitHub Project
Web del proyecto: Vercel
Your Name - @your_twitter
Project Link: https://github.com/Angela-GM/final-project
Presentation Link: Insert here your presentation link
Quiero dar las gracias a Aleix, Diego y Jarko, los 3 profesores que nos han ido guiando y ayudando para poder terminar el proyecto.
A los compañeros de clase porque siempre están dispuestos a ayudar.
Y al SOC, ya que gracias a ellos he podido permitirme cursar el bootcamp en IronHack.
Este proyecto ha sido un verdadero desafío para mí ya que he adquirido los conocimientos necesarios en una sola semana. Durante el desarrollo del proyecto, he aprendido cómo conectar con una base de datos, cómo obtener los datos necesarios para utilizarlos en la aplicación, y cómo actualizar o guardar nuevos datos.
Además, con este proyecto ha sido la primera vez que he construido una aplicación completamente utilizando un framework, en este caso Vue.js 3. Estoy orgullosa de haber superado el desafío y de haber aprendido tantas cosas nuevas en el proceso.
Durante el proceso de registro de usuarios en la aplicación web, se identificó que los datos del nuevo usuario no estaban siendo guardados correctamente en la tabla "profiles", a pesar de que sí se estaban almacenando en la tabla "auth". El error impedía que los usuarios pudieran registrarse correctamente en la aplicación, lo que generaba una mala experiencia de usuario y afectaba el rendimiento del sitio web. Después de realizar una exhaustiva investigación, se descubrió que una de las columnas de la tabla "profiles" estaba configurada para no aceptar valores nulos. Al registrar un nuevo usuario, esta columna no estaba recibiendo ningún dato y, por lo tanto, el registro no se completaba correctamente. La solución consistió en modificar la configuración de la columna para que pudiera aceptar valores nulos, lo que permitió que los datos del nuevo usuario fueran guardados correctamente en ambas tablas. Este error me enseñó la importancia de revisar cuidadosamente las configuraciones de las tablas en la base de datos y de realizar pruebas exhaustivas durante el proceso de desarrollo y pruebas de la aplicación. Además, aprendí a utilizar las herramientas del Inspector del navegador para identificar y resolver errores que provienen de la base de datos.Recomiendo realizar pruebas periódicas en la base de datos para asegurarse de que todas las configuraciones sean las adecuadas y de que no existan errores similares que puedan afectar el correcto funcionamiento de la aplicación web.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent