Home Projects Portfolio Dashboard Export PDF Log in

Languages

English
59

Latest Updates

Documenting code, one commit at a time.

React 10 posts
×
0 React HTML

Mastering React Lifecycle: Implementing Timers with useEffect

Managing side effects in modern React applications often feels like trying to keep a spinning plate stable while the floor moves beneath you. In the React-Platzi project, I recently revisited how we handle time-based updates, specifically when building clock components that need to synchronize with the browser's internal clock.

The Lifecycle Trap

Many developers treat React components like

0 JavaScript React

Starting Fresh: Initializing the React-Platzi Foundation

Starting the Foundation

Every great project begins with a single commit. We recently initiated the repository for React-Platzi, setting the stage for building out our core features. This initial setup is more than just a folder structure; it defines the patterns and standards we will follow as we scale our components and manage state.

Establishing Core Principles

By starting from a clean

0 React CSS

Refining UI Consistency: Adjusting Image Spacing in React

Improving Visual Balance

Visual hierarchy often hinges on the small details. In the hotelgatuno project, a React-based application, maintaining consistent spacing around product images is essential for a polished user interface. A recent update focused on refining the padding around these elements to ensure better alignment across various viewports.

The Challenge of Consistent Padding

0 React JavaScript

Mastering the useEffect Hook: Managing Side Effects in React

Building interactive interfaces in React often feels like keeping a plate spinning—you need the UI to stay responsive while simultaneously handling data fetching, subscriptions, or manual DOM updates. These background tasks are what we call "side effects," and mastering them is the key to a stable React application.

Understanding the Need for Effects

In the React-Platzi project, we recently

0 React CSS

Standardizing Image Layouts in Hotelgatuno

The Problem

In our React-based project, hotelgatuno, we noticed that visual inconsistency was creeping into our UI components. Specifically, images displayed across the application were suffering from fluctuating heights. This lack of a standardized height caused layout shifts and made the user interface feel unpolished as images of varying aspect ratios disrupted the flow of our grids.

Bridging the Gap: Integrating WhatsApp Interaction in React Stores

Building an e-commerce interface for 'hotelgatuno' taught me a valuable lesson: sometimes, the most effective 'backend' for customer support is the one your users already have installed. While we explored full-stack solutions with Supabase for data management, the most requested feature wasn't a complex shopping cart flow—it was a direct line to the staff via WhatsApp.

The Problem with

Scaling Up: Integrating React into Hotelgatuno

The Goal

When working on the hotelgatuno project, we needed a more robust way to handle dynamic user interfaces. While simple HTML pages serve their purpose, we reached a point where state management and component reusability became essential for improving the user experience.

The Approach

To bridge the gap between static pages and a dynamic application, we decided to integrate React.

0 React Astro JavaScript

Bridging the Gap: Integrating WhatsApp Orders into Hotelgatuno

In the world of hospitality management, friction is the enemy of revenue. Our project, hotelgatuno, recently faced a common hurdle: how to bridge the gap between a guest's intent to purchase and the actual transaction without implementing a complex, high-overhead e-commerce backend. The solution? Leveraging the most ubiquitous communication tool on the planet: WhatsApp.

The Problem:

Scaling Hotelgatuno: Implementing a New Transfer Service

The Challenge

As the hotelgatuno project grows, managing guest logistics became a bottleneck. Our team identified the need for a dedicated transfer service to streamline arrivals and departures, ensuring a seamless experience for guests from the moment they step off their transport.

The Approach

To integrate this feature effectively, we focused on modularizing our service layer.

0 Astro React Tailwind CSS

Optimizing Infrastructure: Streamlining Astro Configurations

Managing a static site generator requires precision, especially when it comes to the core configuration that drives the entire build process. Recently, I spent some time revisiting the astro.config file in the hotelgatuno project to ensure our build pipeline remains lean and efficient.

The Configuration Challenge

In modern web development, the configuration file is the heartbeat of your