Senior Software Engineer
building accessible, scalable web apps.
I help companies migrate legacy codebases to modern standards. Specializing in Next.js, TypeScript, and Design Systems.
Behind the Code
I'm Alejandro, a Senior Software Engineer who enjoys building and modernizing applications for the web. My journey in tech spans over 12 years, leading me from full-stack development to a deep specialization in the React ecosystem (Next.js, TypeScript, and modern state management).
I’ve had the privilege of architecting scalable frontend solutions and optimizing for Core Web Vitals in various professional environments. My passion lies in mentoring engineers and standardizing codebases to build resilient and efficient digital experiences.
The Work
Problem
Building a performant, browser-based drawing tool requires handling complex 2D geometry, real-time rendering of vector shapes, and state management for history (undo/redo) without relying on heavy external libraries.
Architecture
Adopted a custom rendering engine using the HTML5 Canvas API for high-performance immediate mode rendering. Implemented a 'Scene Graph' data structure to manage shape elements, decoupled from the React render cycle to prevent UI freezing during complex redraws.
Solution
Built a custom whiteboard engine in Next.js and TypeScript. Implemented core vector drawing algorithms (lines, rectangles, freehand) and a custom history stack for undo/redo operations.
Impact
Delivered a fully functional, zero-latency drawing experience. Demonstrated ability to implement complex math (geometry intersections) and low-level browser APIs (Canvas context) manually.
Problem
The legacy back-office app had slow load times and data consistency issues, hurting operator efficiency. The codebase was difficult to maintain, slowing down new feature development.
Architecture
A full migration to a React Single-Page Application (SPA) was chosen to gain fine-grained control over the user experience and performance. A centralized, atomic state management model (Zustand) was selected over a context-based approach to ensure data consistency and reduce boilerplate across a large, complex application.
Solution
The frontend architecture was migrated to a React SPA to improve performance and maintainability. A centralized, atomic state model was implemented using Zustand, which replaced a legacy prop-drilling approach and improved data consistency across the application.
Impact
The new architecture resulted in a 40% reduction in application load times and a 20% increase in operator efficiency. Adopting a modular component structure also led to a 2x increase in feature delivery velocity.
Problem
Websites suffered from poor performance metrics (Core Web Vitals), leading to lower SEO rankings and a degraded user experience.
Architecture
A 'performance-first' architectural approach was adopted. The strategy was to aggressively code-split at the route and component levels, ensuring that only critical-path JavaScript was loaded on initialization. This prioritized a faster Time To Interactive (TTI) over a single, monolithic bundle.
Solution
Implemented advanced React code-splitting, component lazy loading, and route-based chunking. Utilized useMemo, useCallback, and React Profiler to identify and optimize critical rendering bottlenecks.
Impact
Achieved a 40% reduction in application load times and significant improvements in Time to Interactive (TTI), directly boosting SEO rankings and user satisfaction.
Problem
Inconsistent UI across applications, slow iteration speeds for design and backend teams, and accumulation of technical debt due to duplicated components.
Architecture
The decision was to build a shared UI component library to be consumed by multiple frontend applications. This centralized approach was chosen to enforce design consistency, reduce code duplication, and create a single source of truth, trading a higher initial investment for long-term scalability and maintainability.
Solution
Designed and maintained a shared UI Component Library, establishing a consistent design system. This involved creating reusable, atomic React components and enforcing strict TypeScript typing for standardization.
Impact
Accelerated design and backend team iteration speed by 2x, reduced technical debt, and improved feature delivery efficiency across various projects.
Problem
Content-heavy or static websites built with traditional reactive frameworks incurred unnecessary JavaScript overhead, leading to slower page loads and suboptimal Core Web Vitals, negatively impacting SEO and user experience.
Architecture
The core architectural decision was to shift from a client-side rendering (CSR) model to a static-first approach using Astro's 'Island Architecture'. This was chosen for content-heavy sites where interactivity is minimal, prioritizing zero-JS-by-default for maximum performance and SEO.
Solution
Leveraged Astro with its 'Island Architecture' to build content-focused websites. This approach enabled shipping zero JavaScript by default, selectively hydrating interactive components only when necessary, optimizing for performance.
Impact
Achieved substantial improvements in website performance, resulting in significantly faster page load times, higher Lighthouse scores, and enhanced SEO. This also led to reduced hosting costs through optimized asset delivery and improved user engagement on static and content-rich pages.
Problem
Traditional CSS methodologies often lead to large CSS bundles, complex naming conventions, and a disconnect between styling and component structure, slowing down development and making refactoring difficult.
Architecture
Adopted a utility-first CSS approach with Tailwind CSS. This strategy co-locates styling logic directly within the markup, eliminating separate CSS files and complex class naming schemes. The trade-off is a more verbose markup for the benefit of rapid prototyping and easier maintenance within a constrained design system.
Solution
A centralized `tailwind.config.ts` was established as the single source of truth for the design system, defining a themable color palette with CSS variables, custom animations, and typography, ensuring design consistency.
Impact
Increased development velocity due to rapid prototyping within markup. The CSS bundle size was minimized as Tailwind's JIT compiler only includes necessary classes. This reduced style inconsistencies and made the codebase easier to maintain.
Get In Touch
I'm always open to discussing new projects, creative ideas, or opportunities to be part of an amazing team.