Felipe Carrasco

Cada ficha explica el contexto, el problema que resuelve y las decisiones técnicas que hay detrás.

1. 01 Aplicación web Publicado

   1 / 5

   Repositorio de SportHubDemo de SportHub

   SportHub

   Contexto

   SportHub nace como una plataforma para un centro deportivo que necesita centralizar la gestión de sus instalaciones y reservas. Está dirigida tanto a clientes que buscan consultar disponibilidad y reservar espacios como a administradores que gestionan instalaciones, clientes y reservas.

   Problema

   La gestión manual de reservas puede generar información dispersa, conflictos de horarios y una mayor carga operativa para el personal. SportHub permite a los clientes consultar disponibilidad y gestionar sus reservas, mientras facilita a los administradores la supervisión centralizada de la operación.

   Decisiones técnicas

   • Se utilizó una arquitectura basada en funcionalidades con Angular Standalone Components para mantener el código modular, escalable y fácil de mantener.
   • La disponibilidad se consulta desde Angular, pero la validación definitiva de las reservas se delega en PostgreSQL mediante Supabase y funciones RPC. Esto evita reservas superpuestas incluso cuando varios usuarios intentan reservar simultáneamente.
   • Se descartó realizar INSERT directos de reservas desde Angular. En su lugar, se utiliza la RPC create_reservation junto con políticas RLS para centralizar las reglas de negocio y proteger la integridad de los datos.

   • Angular
   • TypeScript
   • Tailwind CSS
   • Angular Material
   • Supabase
   • PostgreSQL

   Ver demo Repositorio
2. 02 Aplicación web Publicado

   1 / 3

   Repositorio de Gifs AppDemo de Gifs App

   Gifs App

   Contexto

   Aplicación web para buscar gifs animados, creada como proyecto personal para practicar Angular y TypeScript.

   Problema

   Permite a los usuarios buscar y visualizar gifs animados de manera rápida y sencilla, resolviendo la necesidad de encontrar contenido visual para compartir en redes sociales o mensajería.

   Decisiones técnicas

   • Se decidió utilizar Angular por su robustez y capacidad para manejar aplicaciones de una sola página (SPA), lo que mejora la experiencia del usuario al navegar entre resultados de búsqueda.

   • TypeScript
   • Angular
   • Tailwind CSS

   Ver demo Repositorio
3. 03 Aplicación web SPA Publicado

   1 / 4

   Repositorio de Ecommerce DemoDemo de Ecommerce Demo

   Ecommerce Demo

   Contexto

   Proyecto creado como ejercicio práctico para aprender Angular 18 y construir una experiencia de compra completa. Está dirigido a usuarios que necesitan explorar un catálogo de productos, revisar sus detalles y administrar un carrito de compras. Surgió para aplicar conceptos de componentes standalone, routing, servicios, autenticación y consumo de datos en tiempo real.

   Problema

   Los usuarios necesitan consultar productos de forma clara, acceder a su información detallada y conservar un carrito asociado a su cuenta. El proyecto resuelve ese flujo mediante un catálogo navegable, autenticación de usuarios y persistencia de carritos y productos en Supabase.

   Decisiones técnicas

   • Se eligió Angular con componentes standalone, servicios e interfaces TypeScript para separar la presentación, la lógica de negocio y el acceso a datos, facilitando el mantenimiento y la reutilización.
   • Se utilizó Supabase para centralizar autenticación, perfiles, productos y carritos. El carrito se mantiene asociado al usuario y se actualiza mediante operaciones sobre la base de datos, evitando depender únicamente del estado local del navegador.
   • Se implementó diseño responsive, formularios reactivos, mensajes de error y textos alternativos en las imágenes para mejorar la experiencia en distintos dispositivos y hacer más comprensible la interfaz.
   • Se descartó incorporar una pasarela de pago y un sistema real de despacho porque el objetivo del proyecto es demostrar el flujo de catálogo, autenticación y carrito, no procesar compras reales.

   • Angular 18
   • TypeScript
   • HTML5
   • SCSS
   • RxJS
   • Angular Material
   • Supabase
   • PostgreSQL

   Ver demo Repositorio