Agenda CAC

📝 caracteristicas

Esta Agenda de Contactos es un proyecto de desarrollo Fullstack que incluye un sistema de login. Fue construido utilizando MySQL, Node.js, el motor de plantillas EJS y Bootstrap para el diseño.

Este proyecto fue creado como trabajo práctico integrador para el curso Codo a Codo 4.0 (Edición 2022), donde se abordaron conceptos de desarrollo web Fullstack orientado a JavaScript, cubriendo tanto el frontend como el backend.

Funcionalidades principales de la aplicación:

• 👤 Registro de usuarios: Permite a cada usuario tener su propia agenda de contactos personal.
• 🔑 Restablecimiento de contraseña: En caso de olvido, el usuario puede recuperar el acceso a su cuenta.
• ➕ Agregar contactos: Se pueden añadir nuevos contactos con datos como nombre, apellido, teléfono, correo y foto.
• ✏️ Editar contactos: Permite corregir o actualizar la información de los contactos existentes.
• 🗑️ Eliminar contactos: Opción para borrar contactos que ya no son necesarios.
• 🔍 Búsqueda: Facilita la búsqueda de contactos por nombre y/o apellido.

En términos generales, esta aplicación es un CRUD básico que utiliza una base de datos MySQL con dos tablas: una para usuarios y otra para contactos. El backend está desarrollado con Node.js y Express, y se encuentra alojado en Render.com. La base de datos y las imágenes están en un servidor propio.

La arquitectura implementada es MVC (Modelo-Vista-Controlador), con los modelos, vistas y controladores organizados en directorios separados. A su vez, los módulos están divididos para manejar la lógica de usuarios y contactos de forma independiente.

Para mejorar la seguridad, se utiliza el módulo bcrypt para encriptar las contraseñas de los usuarios en la base de datos. Además, cuenta con una funcionalidad de restablecimiento de contraseña que envía un correo electrónico al usuario con un enlace para cambiarla, utilizando el módulo Nodemailer.

🛠️ habilidades

En cuanto a las habilidades que utilicé en este proyecto, destaco las siguientes:

• 🎨 Diseño de interfaz de usuario (UI): Utilicé Figma para el diseño integral de la interfaz gráfica. Esto me permitió definir las páginas necesarias y las funciones para el backend. Puedes ver el diseño en Figma.
• 🗃️ Diseño de la Base de Datos: Se crearon dos tablas (usuarios y contactos) relacionando los contactos con cada usuario, lo que permite múltiples usuarios y garantiza la seguridad de los datos. Se implementaron las operaciones CRUD necesarias en los modelos.
• 📄 Plantillas EJS y Bootstrap: La aplicación es monolítica, con el backend y el frontend en el mismo servidor. Utilicé el motor de plantillas EJS para administrar las vistas y Bootstrap para los estilos y el maquetado.
• 🏗️ Arquitectura MVC con Node: La arquitectura MVC mantiene el código organizado, separando los modelos, las vistas y los controladores en diferentes directorios. Los módulos también están divididos para manejar la lógica de usuarios y contactos de forma independiente.

🚀 tecnologias

Para el desarrollo de esta aplicación, utilicé una variedad de tecnologías y herramientas que me permitieron crear una experiencia de usuario atractiva y funcional. Entre las principales tecnologías que empleé se encuentran: Node.js, Bootstrap, MySQL, plantillas EJS, bcrypt, Axios y Nodemailer.