Experience

S96: Your CryptoBank

ReactJS
TypeScript
CSS Modules
Styled Components
PostgreSQL
JavaScript

Experiencia académica

A bright pink sheet of paper used to wrap flowers curves in front of rich blue background

S96: Your CryptoBank

En el proyecto "S96: Your CryptoBank", utilicé tecnologías como ReactJS, TypeScript, JavaScript, PostgreSQL, CSS Modules y Styled Components. El objetivo principal fue desarrollar una aplicación bancaria de criptomonedas utilizando React y una base de datos relacional, implementando funcionalidades como autenticación de usuarios, formularios controlados y gestión de citas conectada con la base de datos.

Para ello, desarrollé una interfaz dinámica utilizando ReactJS, implementé seguridad de tipos mediante TypeScript, gestioné la comunicación con la base de datos PostgreSQL y utilicé CSS Modules junto con Styled Components para crear una interfaz moderna, modular y responsive.

Descripción del proyecto

"S96: Your CryptoBank" es una aplicación bancaria basada en criptomonedas que permite a los usuarios registrarse, iniciar sesión y obtener una tarjeta virtual personalizada con sus datos personales. La plataforma permite gestionar información del usuario y crear citas mediante un sistema conectado a la base de datos.

El proyecto fue desarrollado con el objetivo de practicar la creación de aplicaciones Fullstack, trabajando la comunicación entre frontend, backend y base de datos, además de aplicar buenas prácticas en la organización y mantenimiento del código.

Características principales

  • Registro e inicio de sesión de usuarios: Los usuarios pueden crear una cuenta e iniciar sesión para acceder a las funcionalidades privadas de la aplicación y gestionar su información personal.

  • Tarjeta virtual personalizada: Después de iniciar sesión, cada usuario puede visualizar una tarjeta virtual con sus datos personales, simulando una experiencia bancaria digital.

Online card.

Visualización de la tarjeta virtual personalizada disponible para los usuarios registrados.

  • Gestión de citas: Los usuarios autenticados pueden crear y administrar citas dentro de la plataforma. Los estados de las citas se representan visualmente mediante diferentes colores, permitiendo identificar fácilmente si una cita está activa o cancelada.

Online store.

Representación visual del sistema de gestión de citas y sus diferentes estados.

Tecnologías y herramientas utilizadas

  • ReactJS: Utilizado para desarrollar una interfaz de usuario dinámica, reutilizable e interactiva.
  • TypeScript: Implementado para mejorar la seguridad del código mediante tipado estático y facilitar el mantenimiento del proyecto.
  • JavaScript: Utilizado para desarrollar funcionalidades principales e interacciones del lado del cliente.
  • PostgreSQL: Empleado como sistema de base de datos para almacenar y gestionar la información de usuarios y citas.
  • CSS Modules: Utilizado para crear estilos encapsulados y mejorar la organización del código CSS.
  • Styled Components: Implementado para desarrollar componentes visuales modernos y mantener una estructura de estilos flexible.

Retos y aprendizajes

Durante el desarrollo de este proyecto aprendí y reforcé conocimientos en:

  • Desarrollo de aplicaciones Fullstack con ReactJS.
  • Gestión de estado y componentes reutilizables.
  • Creación de formularios controlados en React.
  • Integración entre frontend, backend y base de datos.
  • Diseño de interfaces modernas con Styled Components y CSS Modules.
  • Uso de TypeScript para mejorar la calidad y mantenibilidad del código.
  • Gestión de datos mediante PostgreSQL.

Responsabilidades

  • Frontend Development
  • Backend Development
  • Fullstack Development
  • Database Integration
  • UI/UX Design
  • API Integration