Home Projects Portfolio Dashboard Export PDF Log in

Languages

English
18

Latest Updates

Documenting code, one commit at a time.

React 9 posts
×
0 React JavaScript

Building Dynamic Ecommerce Interfaces with React Components

In the ongoing development of the hotelgatuno project, we recently focused on improving the user's shopping experience by implementing a dynamic category selector and a card-based product display system. As the catalog of items grows, providing users with intuitive ways to filter and visualize inventory becomes paramount.

Designing for Scalability

When building an ecommerce interface in

0 React JavaScript

Enhancing User Discovery: Implementing a Search Bar in Bikerland

In the Bikerland project, providing an efficient way for users to browse through motorcycles is essential for a good user experience. Recently, we focused on adding a dedicated search bar component to help users quickly filter and find the motorcycles they are looking for.

The Challenge

When dealing with a growing collection of data in a React application, simple list rendering is often

0 React JavaScript

Optimizing Data Filtering for Mobile Experience in Hotelgatuno

Introduction

Responsive design is about more than just rearranging layouts; it is about ensuring that the most important features remain accessible regardless of the device. Recently, in the hotelgatuno project, I focused on refining the filtering mechanism to better serve mobile users.

The Challenge: Filtering on Small Screens

On desktop viewports, filter sidebars or large horizontal

0 React CSS

Optimizing Image Display Consistency in React Ecommerce

Working on the hotelgatuno project, I recently encountered an issue with visual consistency across our product listings. Specifically, inconsistent image heights were causing layout shifts and making our ecommerce grid look unpolished.

The Problem

When displaying images of varying aspect ratios in a grid, the UI often breaks alignment. Without explicit constraints, a single oversized image

0 React CSS

Refining UI Consistency: A Lesson in Spacing and Visual Balance

In the hotelgatuno project, we recently shifted our focus toward refining the visual hierarchy of our interface components. While functional requirements often take center stage in development, the subtle adjustments to padding, margins, and layout constraints are what truly elevate the end-user experience.

The Problem: Visual Clutter

When building component-based interfaces in React, it

Refining Mobile Navigation for Hotelgatuno

Improving Mobile UX

Navigation is the backbone of any responsive application. While desktop users benefit from expansive menus and hover states, mobile users require a streamlined, touch-friendly experience. Recently, we revisited the mobile navigation implementation for the Hotelgatuno project to ensure it remains intuitive for all device sizes.

The Problem

The previous mobile menu

Bootstrapping a Headless Architecture with Strapi and Next.js

Starting a new project often feels like staring at a blank canvas. Today, I began laying the foundation for a new application using Strapi as our headless CMS, coupled with a robust frontend built in Next.js. The goal is to create a modular, scalable architecture that separates our content management from the user interface.

Setting the Stage

When initiating a project like the

Optimizing Page Loading with React Suspense in Next.js

Managing data fetching in modern React applications can often lead to fragmented loading states. In the Greg-js1007/strapi-project, we recently refactored our layout architecture to leverage React Suspense, moving away from manual conditional rendering and toward a more declarative loading strategy.

The Challenge with Legacy Loading

Previously, we were handling data fetching state within

Kicking Off Development: Building Bikerland with React and Vite

Initial Setup

Every great application starts with a clean foundation. Recently, I began working on Bikerland, a project focused on cycling infrastructure and community engagement. Getting the environment configured correctly from the start is critical for developer productivity and long-term maintainability.

Choosing the Right Tooling

For Bikerland, I opted for a modern tech stack that