Administra Clientes
CRM
Acerca del proyecto
Brinda al usuario la capacidad de tener todo el control que necesita para manejar a sus clientes de manera efectiva y eficiente.
Una de las características más útiles del CRM es su capacidad para evitar registros duplicados. Además, el formulario de registro es fácil de usar, lo que le permite agregar nuevos clientes de manera rápida y sencilla.
Una vez que haya registrado a sus clientes, podrá acceder a la sección de gestión de clientes, donde podrás ver, editar o eliminar toda la información relevante de cada uno de ellos.
Stack del proyecto
El proyecto emplea React y React Router Dom para diseñar las interfaces de usuario y administrar el estado de la aplicación. Además utiliza Fetch con los métodos HTTP apropiados para interactuar con la API REST. Esto significa que siempre tendrá acceso a los datos más actualizados.
Mi papel
He desarrollado el sitio web con el propósito de optimizar la experiencia de usuario. Para ello, he aplicado técnicas avanzadas de diseño y desarrollo web
Desarrollé componentes React para la interfaz de usuario. Para utilizar Tailwind en el diseño del sitio web, realicé las configuraciones necesarias en los archivos de "Tailwind" y "CSS" e instalé las dependencias correspondientes.
Usé React Router Dom, el componente Link, useNavigate y Path para definir rutas y para la navegación pricipal. Implemente el Hook redirect para redirigir al usuario. Para resaltar enlaces del menú utilicé useLocation y pathName Y para mostrar componentes dentro del componente “Layout”, utilicé Outlet y Element.
Al registrar un nuevo cliente utilizo el componente Form y el método POST, el cual busca un Action para obtener los datos del formulario. Verifico que todos los campos estén llenos y que el usuario haya ingresado un correo válido, si salta un error en estas validaciones se renderiza el componente "Error". Además, utilicé el errorElement para capturar y mejorar el diseño de los mensajes de error que surgen en caso de problemas con la página o la API.
API REST
Para crear y usar una API de forma segura, usé json-server y protegí su URL en variables de entorno para mayor control y seguridad de la información compartida.
Para consultar la API utilicé el Hook useLoaderData y una función asíncrona que hace Fetch a la URL de la API para obtener una respuesta JSON y mostrar la información de los clientes eficientemente.
Para agregar un nuevo cliente a la API, utilicé una función asíncrona que recibe los datos del cliente y en un bloque try-catch, si hay un error, muestra un mensaje, de lo contrario, ejecuta el try y realiza un Fetch hacia la URL de la API. Utiliza el método POST, un body que contiene los datos que se enviarán y un header que indica el tipo de contenido.
Para obtener la información un cliente en particular, usé el routing dinámico para inyectar su ID en la URL. Luego, cargué el ID del cliente usando un loader y lo verifiqué con la API. Si el cliente no existe, mostré un error. Si existe, llené automáticamente el formulario para editar la información del cliente.
He usado un "action" para editar los datos de un cliente. Este "action" recibe un request para obtener los datos y validarlos antes de enviarlos. También utiliza "params" para obtener el ID del cliente y enviarlo como parámetro a la función que actualizará los datos del cliente. La función recibe el ID y los datos actualizados del cliente, y los escribe en la API utilizando el método PUT.
Para eliminar a un cliente usé "Form". Consulté en la API con el método “PUT”, después en un action instancié la función Eliminar, dicha función recibe como parámetro el ID del cliente y lo elimina usando el método DELETE.
Antes de borrar al cliente, agregué un mensaje de confirmación para que el usuario decida si quiere continuar o no. Si acepta, el cliente se elimina y se redirige al usuario a la página principal.