Tienda Case Study
Modernizing Community Commerce

Exploring how a bilingual digital marketplace connects local vendors with their community through intuitive UX and streamlined inventory management.

Caso de Estudio Tienda
Modernizando el Comercio Comunitario

Explorando cómo un mercado digital bilingüe conecta a los vendedores locales con su comunidad a través de una UX intuitiva y una gestión de inventario optimizada.

Tienda Salvadorea
Digital Preservation of a 30-Year Legacy

A comprehensive case study exploring the technical architecture, design decisions, and cultural impact of Denver's oldest Salvadoran grocery store website.

Tienda Salvadorea
Preservación Digital de un Legado de 30 Años

Un caso de estudio exhaustivo que explora la arquitectura técnica, las decisiones de diseño y el impacto cultural del sitio web de la tienda de comestibles salvadorea más antigua de Denver.

My Role Lead Developer, UI Designer, Accessibility Engineer
Tech Stack HTML5, CSS3, Vanilla JS, Google Maps API
Timeline 4 Weeks (Design to Deployment)
Mi Rol Desarrollador Principal, Diseñador UI, Ing. de Accesibilidad
Tecnologías HTML5, CSS3, JS Vanilla, Google Maps API
Cronología 4 Semanas (Diseño a Despliegue)

Project Overview

Purpose

Created as a comprehensive digital presence for Denver's oldest Salvadoran grocery store (30+ years). Built for CIS 3030 at MSU Denver, demonstrating professional web development while honoring Jorge and Delia Romero's story.

Goals

Preserve cultural heritage, provide bilingual business information, showcase advanced web development without frameworks, increase SEO visibility, and maintain WCAG 2.1 AA accessibility standards.

Descripción del Proyecto

Propósito

Creado como una presencia digital integral para la tienda salvadorea más antigua de Denver (más de 30 años). Construido para CIS 3030 en MSU Denver, demostrando desarrollo web profesional mientras honra la historia de Jorge y Delia Romero.

Objetivos

Preservar el patrimonio cultural, proporcionar información comercial bilingüe, mostrar desarrollo web avanzado sin frameworks, aumentar la visibilidad SEO y mantener los estándares de accesibilidad WCAG 2.1 AA.


Complete Homepage Design

The homepage combines bilingual content, cultural imagery, and intuitive navigation to create a welcoming digital experience that reflects the store's 30+ year legacy in Denver's Hispanic community.

Complete Homepage Screenshot
Full homepage design showing integrated bilingual layout - click to zoom

Diseño Completo de la Página Principal

La página principal combina contenido bilingüe, imágenes culturales y navegación intuitiva para crear una experiencia digital acogedora que refleja el legado de 30+ años de la tienda en la comunidad hispana de Denver.

Captura de pantalla de la página principal completa
Diseño completo de la página principal mostrando diseño bilingüe integrado - clic para ampliar

Custom Translation Engine (500+ Keys)

Built a complete bilingual translation system using pure vanilla JavaScript without any external libraries. The system manages over 500 translation keys across 6 pages and persists language preference using localStorage.

How It Works

  • Uses data-i18n attributes on HTML elements
  • Separate translation objects for English and Spanish
  • Handles text, HTML, alt text, meta descriptions, placeholders
  • Language saved to localStorage for persistence
  • Updates all elements dynamically without page refresh
Why This Matters

Most websites use heavy frameworks like i18next or React Context. This custom solution has zero dependencies, loads faster, and gives complete control over translation logic.

Translation Engine Code
Translation engine code - click to zoom
Website in Spanish
Spanish Version - click to zoom
Versión en Español - clic para ampliar
Website in English
English Version - click to zoom
Versión en Inglés - clic para ampliar

Motor de Traducción Personalizado (500+ Claves)

Construí un sistema de traducción bilingüe completo utilizando JavaScript puro sin librerías externas. El sistema gestiona más de 500 claves de traducción en 6 páginas y persiste la preferencia de idioma usando localStorage.

Cómo Funciona

  • Utiliza atributos data-i18n en elementos HTML
  • Objetos de traducción separados para inglés y español
  • Maneja texto, HTML, texto alt, metadescripciones, marcadores
  • Idioma guardado en localStorage para persistencia
  • Actualiza todos los elementos dinámicamente sin refrescar
Por qué es importante

La mayoría de los sitios usan marcos pesados como i18next o React Context. Esta solución no tiene dependencias, carga más rápido y ofrece control total sobre la lógica de traducción.

Código del motor de traducción
Código del motor de traducción - clic para ampliar
Website in Spanish
Spanish Version - click to zoom
Versión en Español - clic para ampliar
Website in English
English Version - click to zoom
Versión en Inglés - clic para ampliar

Bilingual HTML Structure

The HTML architecture uses semantic lang-block containers to manage both language versions simultaneously. Each section maintains identical DOM structure with separate language data attributes, enabling instant switching without page reloads.

Bilingual HTML Structure Diagram
HTML structure with lang-block implementation - click to zoom

Estructura HTML Bilingüe

La arquitectura HTML utiliza contenedores lang-block semánticos para gestionar ambas versiones de idioma simultáneamente. Cada sección mantiene una estructura DOM idéntica con atributos de datos de idioma separados, permitiendo cambios instantáneos sin recargas de página.

Diagrama de Estructura HTML Bilingüe
Estructura HTML con implementación de lang-block - clic para ampliar

Responsive CSS Grid System

Implemented modern CSS Grid and Flexbox layouts that automatically adapt from mobile (320px) to large desktop (1920px) using clamp(), minmax(), and auto-fit.

Mobile
320px-768px

Single-column layouts, stacked sections, 44px minimum touch targets

Mobile View

Tablet
768px-1024px

2-3 column grids, balanced spacing

Tablet View

Desktop
1024px+

3-4 column grids, generous whitespace

Desktop View
Responsive CSS Grid Code
CSS Grid implementation code - click to zoom

Sistema de Cuadrícula CSS Adaptable

Implementé diseños modernos de CSS Grid y Flexbox que se adaptan automáticamente desde móviles (320px) hasta escritorios grandes (1920px) usando clamp(), minmax(), y auto-fit.

Móvil
320px-768px

Diseños de una columna, secciones apiladas, objetivos táctiles de 44px

Vista Móvil

Tableta
768px-1024px

Cuadrículas de 2-3 columnas, espaciado equilibrado

Vista de Tableta

Escritorio
1024px+

Cuadrículas de 3-4 columnas, espacio generoso

Vista de Escritorio
Código CSS Grid Responsive
Código de implementación CSS Grid - clic para ampliar

Design System & Color Palette

A carefully curated color palette inspired by the Salvadoran flag—featuring cobalt blue, tangerine yellow, and lincoln green—creates a cohesive visual identity that celebrates cultural heritage while maintaining modern accessibility standards.

Tienda Salvadorea Color Palette
Official color palette with hex values - click to zoom

Sistema de Diseño y Paleta de Colores

Una paleta de colores cuidadosamente seleccionada inspirada en la bandera salvadoreña—con azul cobalto, amarillo tangerina y verde Lincoln—crea una identidad visual cohesiva que celebra la herencia cultural mientras mantiene estándares modernos de accesibilidad.

Paleta de Colores de Tienda Salvadorea
Paleta de colores oficial con valores hex - clic para ampliar

Interactive Image Gallery & Product Filtering

The Items page features 29 product cards with dynamic filtering and zoom modal functionality. Users can filter by category and click images to view full-size versions.

Technical Features

  • Smooth fade-in and zoom animations using CSS keyframes
  • Keyboard accessible – press ESC to close modal
  • Body scroll locked when modal is open
  • Category filtering with JavaScript (food, drinks, clothing, wellness, nostalgia)
Items Page with Filters
Product filtering interface - click to zoom

Galería de Imágenes Interactiva y Filtrado de Productos

La página de artículos cuenta con 29 tarjetas de productos con filtrado dinámico y funcionalidad de zoom. Los usuarios pueden filtrar por categoría y hacer clic en las imágenes para ver versiones a tamaño completo.

Características Técnicas

  • Animaciones suaves de desvanecimiento y zoom mediante keyframes
  • Accesibilidad por teclado – presione ESC para cerrar el modal
  • Bloqueo de desplazamiento del cuerpo cuando el modal está abierto
  • Filtrado por categorías con JavaScript (comida, bebidas, ropa, bienestar, nostalgia)
Página de artículos con filtros
Interfaz de filtrado de productos - clic para ampliar

Image Zoom Modal & Lightbox

A fully accessible modal lightbox enables users to view product images and gallery photos at full resolution. The implementation includes keyboard navigation, focus management, and smooth animations for an enhanced user experience.

Image Zoom Modal Demonstration
Full-screen image modal with close button - click to zoom

Modal de Zoom de Imagen y Lightbox

Un modal lightbox completamente accesible permite a los usuarios ver imágenes de productos y fotos de galería en resolución completa. La implementación incluye navegación por teclado, gestión del enfoque y animaciones suaves para una mejor experiencia de usuario.

Demostración del Modal de Zoom de Imagen
Modal de imagen de pantalla completa con botón de cerrar - clic para ampliar

Contact & Location Map Integration

An embedded Google Map displays Tienda Salvadorea's exact location with directions, business hours, and contact information. The contact page provides multiple communication channels including phone, email, WhatsApp, and Facebook for customer convenience.

Contact Page with Embedded Map
Location map with integrated contact details - click to zoom

Integración de Mapa de Contacto y Ubicación

Un mapa de Google integrado muestra la ubicación exacta de Tienda Salvadorea con indicaciones, horario comercial e información de contacto. La página de contacto proporciona múltiples canales de comunicación incluidos teléfono, correo electrónico, WhatsApp y Facebook para comodidad de los clientes.

Página de Contacto con Mapa Integrado
Mapa de ubicación con detalles de contacto integrados - clic para ampliar

Press Coverage & Community Recognition

Tienda Salvadorea has been featured in prominent Denver media outlets including El Diario El Salvadoreno, Denverite, and local journalism publications. The website documents this media presence, showcasing the store's importance as a cultural anchor in Denver's Hispanic community.

Press Coverage and Media Mentions
Featured media mentions and press coverage - click to zoom

Cobertura de Prensa y Reconocimiento Comunitario

Tienda Salvadorea ha sido presentada en destacados medios de comunicación de Denver incluyendo El Diario El Salvadoreno, Denverite y publicaciones de periodismo local. El sitio web documenta esta presencia mediática, mostrando la importancia de la tienda como ancla cultural en la comunidad hispana de Denver.

Cobertura de Prensa y Menciones en Medios
Menciones mediáticas destacadas y cobertura de prensa - clic para ampliar

Engineering Challenges & Solutions

Overcoming constraints to deliver a high-performance application.

Desafíos de Ingeniería y Soluciones

Superando restricciones para entregar una aplicación de alto rendimiento.

⚠️

Challenge

Strict "No Frameworks" Requirement
Complex state management was needed for language switching, but React/Vue were prohibited.

Solution

Custom Observer Pattern
Architected a lightweight vanilla JS state engine that hot-swaps text content and ARIA labels instantly without reloads.

⚠️

Desafío

Requisito estricto "Sin Frameworks"
Se requería gestión de estado compleja para idiomas, pero React/Vue estaban prohibidos.

Solución

Patrón Observer Personalizado
Arquitecté un motor JS ligero que intercambia contenido de texto y etiquetas ARIA instantáneamente.

⚠️

Challenge

Accessibility (WCAG) Traps
Custom modals and image lightboxes often trap keyboard focus or fail screen reader tests.

Solution

Focus Management Logic
Implemented a JS focus trap that cycles tab index strictly within open modals and restores focus on close.

⚠️

Desafío

Trampas de Accesibilidad (WCAG)
Los modales personalizados a menudo atrapan el foco del teclado o fallan en lectores de pantalla.

Solución

Lógica de Gestión de Foco
Implementé una trampa de foco JS que cicla el tabulador estrictamente dentro de modales abiertos.

⚠️

Challenge

Bilingual SEO
Ensuring search engines index both English and Spanish content correctly without duplication penalties.

Solution

Semantic Structure
Utilized distinct lang attributes and semantic HTML5 to ensure crawlers understand context changes.

⚠️

Desafío

SEO Bilingüe
Asegurar que los motores de búsqueda indexen contenido en inglés y español sin penalizaciones.

Solución

Estructura Semántica
Utilicé atributos lang distintos y HTML5 semántico para asegurar la comprensión de los crawlers.

Impact & Quantitative Results

30+ Years

Of cultural heritage preserved digitally

99/100

Lighthouse Performance Score

100%

WCAG 2.1 AA Compliance Pass Rate

0 Dependencies

Pure HTML/CSS/JS (No Framework Overhead)

< 50KB

Total Script Bundle Size

Dual SEO

Rankings for both EN/ES keywords

Impacto y Resultados Cuantitativos

30+ Años

De herencia cultural preservada digitalmente

99/100

Puntuación de Rendimiento Lighthouse

100%

Tasa de cumplimiento WCAG 2.1 AA

0 Dependencias

HTML/CSS/JS puro (Sin carga de Frameworks)

< 50KB

Tamaño total del bundle de scripts

SEO Dual

Posicionamiento para palabras clave EN/ES

Contact

Have a project in mind or need bilingual consulting? You can write in English or Spanish.

Contacto

¿Tienes un proyecto o necesitas asesoría bilingüe? Puedes escribir en inglés o español; respondo en ambos idiomas.