Proyectos

Quiero compartir un proyecto que desarrollé durante un curso de Laravel en Udemy: DevJobs. La plataforma permite a desarrolladores buscar trabajo y a reclutadores publicar vacantes. Los devs pueden ver y postularse a vacantes, mientras que los reclutadores pueden crear, editar y eliminar ofertas, recibir notificaciones sobre postulaciones y ver el número de postulantes. Para su desarrollo, utilicé Laravel junto con Blade y Livewire para las plantillas HTML, y Tailwind CSS para los estilos. Implementé la autenticación con Breeze y alojé la aplicación en Hostinger. Además, empleé herramientas básicas de Laravel como Eloquent ORM para manejar las bases de datos.

Proyecto Inaugural del Curso de Laravel: Devstagram - Un Clon de Instagram para Desarrolladores Estoy emocionado de compartir el primer proyecto que desarrollé como parte de mi curso, inspirado en la popular plataforma de redes sociales, Instagram. Devstagram es un clon adaptado para la comunidad de desarrolladores, donde pueden compartir sus proyectos, experiencias y conectar con otros profesionales del campo. Características principales: Autenticación simple: Implementé una autenticación básica que valida el correo electrónico y la contraseña. Es una autenticación sencilla que solo verifica el formato del correo electrónico, no requiere verificación de correo real. Perfiles de usuario: Los usuarios pueden personalizar su perfil con detalles básicos como nombre de usuario y foto de perfil. Tecnologías utilizadas: Laravel: Utilicé Laravel como mi framework principal para el desarrollo del backend. Tailwind CSS: Diseñé la interfaz de usuario utilizando Tailwind CSS para una apariencia limpia y moderna. Lecciones aprendidas: Este proyecto me proporcionó una sólida comprensión del patrón MVC (Modelo-Vista-Controlador) y consolidó mis habilidades en el desarrollo web. Futuras mejoras: Si la comunidad muestra interés y crece el uso de Devstagram, consideraría implementar mejoras y nuevas características para enriquecer la experiencia de los usuarios. PD: ¡Pruebenlo creando una cuenta! Pueden usar un correo de fantasía, como por ejemplo: correo@correo.com. Recuerden que cada dirección de correo electrónico solo puede estar asociada a una cuenta en Devstagram.

El proyecto consiste en una página que promociona un festival de desarrollo (dev) en el que se ofrecen talleres y conferencias. En esta página, los usuarios podrán obtener información sobre el evento, los talleres y las conferencias, incluyendo detalles sobre los ponentes, los días y los horarios de cada charla. Además, los asistentes podrán adquirir un pase para participar en el festival. Tendrán tres opciones: virtual, presencial o gratuito. El pase presencial incluye un regalo a elección. Al elegir a qué conferencia asistirán (se permite elegir hasta 5), ocuparán un lugar que se descontará de los lugares disponibles. El pago se puede realizar con tarjeta de crédito o mediante PayPal, y es necesario registrarse para completar la transacción. Además, hay una sección de administrador en la que se pueden realizar las siguientes acciones: Editar eventos y ponentes: El administrador puede modificar la información relacionada con los eventos y los ponentes. Esto incluye actualizar detalles como horarios, temas y descripciones. Ver estadísticas: El administrador tiene acceso a datos importantes, como la cantidad de personas registradas para el festival y la cantidad de dinero recaudado. Estas estadísticas pueden ser útiles para evaluar el éxito del evento. Gráfica de regalos elegidos: También se muestra una gráfica que representa los regalos elegidos por los participantes. Esto permite al administrador visualizar las preferencias de la audiencia y tomar decisiones informadas. Las tecnologías utilizadas en este proyecto incluyen un framework similar a Laravel, SASS para organizar el CSS, Gulp para procesarlo, JavaScript para animaciones y consumo de APIs, y PHP como lenguaje principal. El proyecto está alojado en Hostiger, donde los interesados pueden verlo y simular la compra de un pase (si tienen una cuenta de desarrollo de PayPal). Si no disponen de una cuenta, estaré encantado de proporcionarles unas credenciales para que puedan probarlo.

El proyecto Bienes Raíces inicialmente era estático, y durante su desarrollo, aprendí mucho sobre el frontend. Ahora, he llevado el proyecto al siguiente nivel, convirtiéndolo en una aplicación full stack utilizando PHP, HTML, SASS, Gulp, JavaScript, MySQL, PHPMailer y Composer. En el panel de administrador, el administrador tiene la capacidad de crear, eliminar o modificar propiedades y vendedores. Para estructurar y simplificar el código, he aplicado la arquitectura MVC y el patrón Active Record.

Mi proyecto es un anotador de tareas, parecido a Trello, que permite crear, gestionar y organizar tareas de forma fácil y eficiente. Para desarrollarlo, he usado las siguientes tecnologías y herramientas:

-PHP: Es el lenguaje de programación principal que he usado para crear la lógica y la funcionalidad de mi aplicación. He usado la arquitectura MVC (Modelo-Vista-Controlador), que me permite separar los datos, la interfaz y la lógica de negocio, y facilita el mantenimiento y la escalabilidad del código. También he usado el patrón Active Record, que me permite mapear las tablas de la base de datos a objetos de PHP, y viceversa, simplificando las operaciones sobre los datos.
-HTML: Es el lenguaje de marcado que he usado para crear la estructura y el contenido de las páginas web de mi aplicación. He usado etiquetas semánticas y atributos que mejoran la accesibilidad y el SEO de mi sitio web.
-SASS: Es un preprocesador de CSS que me permite escribir estilos de forma más sencilla y organizada, usando variables, funciones, mixins, anidamiento, etc. He usado SASS para darle un diseño atractivo y responsive a mi aplicación, adaptándose a diferentes tamaños de pantalla y dispositivos.
-Gulp: Es una herramienta que me permite automatizar tareas comunes de desarrollo, como compilar SASS a CSS, minificar archivos, optimizar imágenes, etc. He usado Gulp para mejorar el rendimiento y la calidad de mi código, y para ahorrar tiempo y esfuerzo.
-JavaScript: Es el lenguaje de programación que he usado para añadir interactividad y dinamismo a mi aplicación. He usado JavaScript para crear elementos como drag and drop, modales, alertas, etc. También he usado el API Fetch, que me permite hacer peticiones HTTP asincrónicas al servidor, y obtener o enviar datos sin recargar la página.
-MySQL: Es el sistema de gestión de bases de datos que he usado para almacenar y manipular los datos de mi aplicación. He usado MySQL para crear tablas, relaciones, índices, consultas, etc. He usado una base de datos acotada que me ofrece DOMcloud, un servicio de hosting gratuito que me permite alojar mi proyecto de prueba.
-PHPMailer: Es una librería de PHP que me permite enviar correos electrónicos desde mi aplicación. He usado PHPMailer para enviar correos de confirmación de cuenta, recuperación de contraseña, notificaciones, etc. He usado tokens para verificar la identidad de los usuarios y evitar el acceso no autorizado.
-Composer: Es una herramienta que me permite gestionar las dependencias de mi proyecto. He usado Composer para instalar y actualizar las librerías y paquetes que he usado en mi aplicación, como PHPMailer, Active Record, etc.

Además de estas tecnologías y herramientas, he implementado varias funcionalidades y características que hacen de mi proyecto un anotador de tareas completo y seguro, como por ejemplo:

Crear sesión: Los usuarios pueden registrarse e iniciar sesión en mi aplicación, usando su correo electrónico y contraseña. He usado el hash de las contraseñas para proteger la información de los usuarios, y he usado sesiones para mantener el estado de los usuarios autenticados.
Recuperar contraseña: Los usuarios pueden recuperar su contraseña si la olvidan, usando su correo electrónico. He usado PHPMailer para enviar un correo con un enlace para restablecer la contraseña, y he usado tokens para validar la solicitud.
Sanitización de input: He usado filtros y funciones de PHP para limpiar y validar los datos que ingresan los usuarios, evitando la inyección de código malicioso o la corrupción de los datos.
Validaciones en el servidor y en el cliente: He usado reglas y mensajes de validación tanto en el lado del servidor como en el lado del cliente, para asegurar que los datos que se envían y se reciben son correctos y coherentes.
Protección de rutas: He usado un sistema de rutas que me permite definir las direcciones y los controladores de cada página de mi aplicación, y también me permite restringir el acceso a ciertas páginas según el rol o el estado del usuario, evitando el acceso no autorizado o no deseado.
CRUD: He usado las operaciones básicas de crear, leer, actualizar y eliminar (CRUD) para manejar los datos de mi aplicación, como las tareas, las listas, los usuarios, etc. He usado el patrón Active Record para facilitar estas operaciones, y he usado el API Fetch para hacerlas de forma asincrónica.
Seguridad: He usado medidas de seguridad para proteger mi aplicación y los datos de los usuarios, como por ejemplo, el uso de HTTPS, el cifrado de las contraseñas, la verificación de los tokens, la sanitización de los datos, etc.

Estas son algunas de las cosas que he hecho para desarrollar mi proyecto de anotador de tareas, que me ha servido para aprender y practicar muchas tecnologías y herramientas de desarrollo web.

Mi proyecto es un sistema para gestionar citas, en este caso de una peluquería, que permite elegir uno o más servicios a adquirir, gestionar día, horario y reservar la cita de forma fácil y eficiente. El administrador tiene una sesión aparte en la que puede crear, eliminar o modificar los servicios que se ofrecen a los clientes; así como ver las citas que los clientes han reservado. Para desarrollarlo, he usado las siguientes tecnologías y herramientas:

-PHP: Es el lenguaje de programación principal que he usado para crear la lógica y la funcionalidad de mi aplicación. He usado la arquitectura MVC (Modelo-Vista-Controlador), que me permite separar los datos, la interfaz y la lógica de negocio, y facilita el mantenimiento y la escalabilidad del código. También he usado el patrón Active Record, que me permite mapear las tablas de la base de datos a objetos de PHP, y viceversa, simplificando las operaciones sobre los datos.
-HTML: Es el lenguaje de marcado que he usado para crear la estructura y el contenido de las páginas web de mi aplicación. He usado etiquetas semánticas y atributos que mejoran la accesibilidad y el SEO de mi sitio web.
-SASS: Es un preprocesador de CSS que me permite escribir estilos de forma más sencilla y organizada, usando variables, funciones, mixins, anidamiento, etc. He usado SASS para darle un diseño atractivo y responsive a mi aplicación, adaptándose a diferentes tamaños de pantalla y dispositivos.
-Gulp: Es una herramienta que me permite automatizar tareas comunes de desarrollo, como compilar SASS a CSS, minificar archivos, optimizar imágenes, etc. He usado Gulp para mejorar el rendimiento y la calidad de mi código, y para ahorrar tiempo y esfuerzo.
-JavaScript: Es el lenguaje de programación que he usado para añadir interactividad y dinamismo a mi aplicación. He usado JavaScript para crear elementos como drag and drop, modales, alertas, etc. También he usado el API Fetch, que me permite hacer peticiones HTTP asincrónicas al servidor, y obtener o enviar datos sin recargar la página.
-MySQL: Es el sistema de gestión de bases de datos que he usado para almacenar y manipular los datos de mi aplicación. He usado MySQL para crear tablas, relaciones, índices, consultas, etc. He usado una base de datos acotada que me ofrece DOMcloud, un servicio de hosting gratuito que me permite alojar mi proyecto de prueba.
-PHPMailer: Es una librería de PHP que me permite enviar correos electrónicos desde mi aplicación. He usado PHPMailer para enviar correos de confirmación de cuenta, recuperación de contraseña, notificaciones, etc. He usado tokens para verificar la identidad de los usuarios y evitar el acceso no autorizado.
-Composer: Es una herramienta que me permite gestionar las dependencias de mi proyecto. He usado Composer para instalar y actualizar las librerías y paquetes que he usado en mi aplicación, como PHPMailer, Active Record, etc.

Además de estas tecnologías y herramientas, he implementado varias funcionalidades y características que hacen de mi proyecto un anotador de tareas completo y seguro, como por ejemplo:

Crear sesión: Los usuarios pueden registrarse e iniciar sesión en mi aplicación, usando su correo electrónico y contraseña. He usado el hash de las contraseñas para proteger la información de los usuarios, y he usado sesiones para mantener el estado de los usuarios autenticados.
Recuperar contraseña: Los usuarios pueden recuperar su contraseña si la olvidan, usando su correo electrónico. He usado PHPMailer para enviar un correo con un enlace para restablecer la contraseña, y he usado tokens para validar la solicitud.
Sanitización de input: He usado filtros y funciones de PHP para limpiar y validar los datos que ingresan los usuarios, evitando la inyección de código malicioso o la corrupción de los datos.
Validaciones en el servidor y en el cliente: He usado reglas y mensajes de validación tanto en el lado del servidor como en el lado del cliente, para asegurar que los datos que se envían y se reciben son correctos y coherentes.
Protección de rutas: He usado un sistema de rutas que me permite definir las direcciones y los controladores de cada página de mi aplicación, y también me permite restringir el acceso a ciertas páginas según el rol o el estado del usuario, evitando el acceso no autorizado o no deseado.
CRUD: He usado las operaciones básicas de crear, leer, actualizar y eliminar (CRUD) para manejar los datos de mi aplicación, como las tareas, las listas, los usuarios, etc. He usado el patrón Active Record para facilitar estas operaciones, y he usado el API Fetch para hacerlas de forma asincrónica.
Seguridad: He usado medidas de seguridad para proteger mi aplicación y los datos de los usuarios, como por ejemplo, el uso de HTTPS, el cifrado de las contraseñas, la verificación de los tokens, la sanitización de los datos, etc.

Estas son algunas de las cosas que he hecho para desarrollar mi proyecto de gestor de citas, que me ha servido para aprender y practicar muchas tecnologías y herramientas de desarrollo web.

En este proyecto fui parte de otro Challenger de Oracle ONE, una iniciativa que me permite desarrollar mis habilidades digitales y aprender nuevas tecnologías. El reto consistía en crear una página web desde cero para una tienda de pelotas, utilizando Figma, HTML, CSS y Javascript. Además, debía simular una consulta a una API REST que hiciera de base de datos, para lo cual usé JSONPlaceholder como servidor web. La página web tiene una sección de login, donde se puede acceder con el usuario: correo@correo.com y la contraseña: Alura2023. Sin embargo, al ser una API falsa, solo funciona el método GET, que muestra las pelotas disponibles en el inventario. Las funciones de administrador (editar, crear y eliminar) no están habilitadas.

En este proyecto diseñado con React, mi objetivo principal fue aprender a usar hooks y props de manera efectiva. También busque mejorar mis habilidades en Figma. Para lograr esto, me enfoque en aplicar buenas prácticas y refactorización en todo momento. Además, trabaje con algunas dependencias que me permitieron trabajar con Node.js.

En este proyecto fui parte del Challenger de Oracle ONE, una iniciativa de Oracle para impulsar el desarrollo web con tecnologías innovadoras. Durante una semana, puse a prueba todos mis conocimientos de Figma, HTML, CSS y Javascript, creando una página web desde cero. Me gustó mucho hacer este desafío, ya que me permitió aprender nuevas habilidades y resolver problemas complejos. Además, me dio muchas ideas para hacer mi propio portafolio definitivo.

Pequeño proyecto diseñado con React, para aprender a utilizar la libreria styled components, sus beneficios, sintaxis y como sacarle provecho con React. También seguir practicando y mejorando mis habilidades con React, Node y CSS.

El proyecto de anotador de tareas que creé fue un desafío muy interesante en el que aprendí mucho sobre el manejo del DOM en JavaScript. En particular, aprendí cómo manejar eventos, seleccionar etiquetas y crear nuevas etiquetas en el DOM.

Este proyecto es un sitio web que se adapta a diferentes tamaños de pantalla y resoluciones. El objetivo del proyecto fue aprender cómo hacer un diseño responsivo usando HTML y CSS

Este proyecto fue creado para aprender la propiedad de CSS Grid y el manejo de más de un archivo HTML. También aprendi cómo ajustar el tamaño de las imágenes en un contenedor div con CSS. Además, se diseñó para que se vea diferente según el dispositivo que se use (móvil, tablet o laptop) con el uso de media queries.

Este proyecto fue parte del integrador del curso de Oracle ONE con Alura Latam. Fue un proyecto desafiante que me permitió aplicar lo que aprendí en el curso en un proyecto práctico. Aprendí mucho sobre la lógica de programación con JavaScript y cómo usar Figma, HTML y CSS para crear una aplicación web. Fue una experiencia valiosa que me ayudó a mejorar mis habilidades de programación y diseño web

Para este proyecto, se utilizao HTML, CSS y JavaScript para crear una pagina web sobre un evento musical. También se utilizó Sass con su nueva sintaxis para mejorar la eficiencia en la escritura de CSS. Para automatizar el proceso de compilación de Sass y la optimización de imágenes, se utilizó Node.js para instalar las dependencias de Gulp

Este proyecto es un blog de café que se enfoca en la experiencia del usuario. Se priorizó el diseño y la combinación de colores para crear una experiencia visualmente atractiva y fácil de usar. Se utilizó HTML y CSS puro para seguir adquiriendo conocimientos y el uso de los media queries para asegurarse de que el sitio sea compatible con dispositivos móviles.

Este proyecto me enfoque en la utilización de la arquitectura CSS BEM (Block, Element, Modifier). BEM es una metodología que se centra en la creación de componentes reutilizables. La idea es que todo en una página web es un bloque y cada bloque puede contener elementos y modificadores. Utilize HTML y CSS para desarrollar el proyecto