Work

SAS Tienda Virtual - Perfume & Skincare E-commerce

Front End Development
Full Stack Development
Next.js
React
TypeScript
PocketBase
SEO

SAS Tienda Virtual is an e-commerce platform developed with Next.js 16 and React 19, specializing in selling perfumes and skincare products from top brands. It integrates PocketBase as a backend and features advanced SEO, dynamic sitemap, and real-time updates.

  • DevOps
  • FrontEnd
  • BackEnd
https://sastiendavirtual.brightbytelabs.net/
`;
17:45
Visit Site

SAS Tienda Virtual - Perfume & Skincare E-commerce

“Your destination to discover the best fragrances and cosmetics on the market.”

SAS Tienda Virtual is a complete e-commerce platform developed with Next.js 16 and React 19, specializing in selling perfumes and skincare products from the most recognized brands. My role in this project included the design and development of the entire application, from the frontend architecture to the integration with PocketBase as a content management system and database.

Features

  • Dynamic Product Catalog: Complete product management system with categories (perfumes and skincare), advanced filters by price, availability, and sorting.

  • Shopping Cart and Favorites: Implementation of React contexts to handle cart and favorites list state, with localStorage persistence.

  • Order System: Complete checkout process with form validation, order creation in PocketBase, and confirmation email sending via Nodemailer.

  • SEO Optimized: Complete SEO implementation with dynamic sitemap that automatically generates for all products, configured robots.txt, structured metadata, and SEO-friendly URLs with slugs.

  • Real-time Updates: Integration with PocketBase Realtime to automatically update the product catalog when there are changes in the database.

  • Responsive Design: Fully responsive interface that adapts to different devices, with modern and elegant design using custom CSS and Google fonts (Playfair Display and Inter).

  • Image Optimization: Optimized image management system with WebP support and handling of missing images with placeholders.

  • Analytics: Integration with Vercel Analytics for tracking metrics and user behavior.

Technologies Used

  • Next.js 16: React framework used with App Router for server-side rendering, static and dynamic page generation, and automatic optimizations.

  • React 19: JavaScript library for building the user interface, with modern hooks and Context API for global state management.

  • TypeScript: Static typing for greater security and better development experience.

  • PocketBase: Backend as a service (BaaS) used for product management, orders, and image storage, with integrated authentication and REST API.

  • CSS: Custom styles to create a unique and modern visual identity, with light/dark theme support via next-themes.

  • Nodemailer: Library for sending order confirmation emails.

  • Docker: Application containerization to facilitate deployments and consistent development.

  • Vercel Analytics: Analytics tool for monitoring performance and user behavior.

SEO and Sitemap Implementation

The project has a robust SEO implementation that includes:

  • Dynamic Sitemap: Automatic generation of sitemap.xml that includes all static pages (home, catalog, categories) and all dynamic product pages. The sitemap revalidates every hour to keep the information up to date.

  • Structured Metadata: Metadata configuration in the main layout with descriptive titles, optimized descriptions, and custom icons for different themes.

  • SEO-Friendly URLs: Slug generation system from product names, normalizing special characters and removing accents to create clean and descriptive URLs.

  • Robots.txt: Appropriate configuration that allows indexing of public pages while blocking API and checkout routes to protect sensitive information.

  • Breadcrumbs: Structured navigation implemented on product pages to improve user experience and SEO.

  • Semantic HTML Structure: Proper use of semantic elements (header, section, nav, footer) and heading hierarchy (h1, h2, h3) to improve accessibility and SEO.

Challenges Overcome

  • PocketBase Integration: The integration with PocketBase as backend required handling authentication, server and client connections, and data synchronization. I implemented helper functions to manage the connection and data mapping efficiently.

  • Dynamic Sitemap with Revalidation: Implementing a sitemap that generates dynamically from PocketBase and revalidates periodically was a technical challenge. I used Next.js generateStaticParams along with incremental revalidation to keep the sitemap updated without affecting performance.

  • Complex State Management: Implementing the shopping cart and favorites system with Context API required careful design to avoid unnecessary renders and maintain synchronization with localStorage.

  • Real-time Updates: Configuring PocketBase Realtime to automatically update the catalog when there are changes was challenging, especially considering it must work only at runtime and not during static build.

  • Performance Optimization: Implementing product lazy loading, image optimization, and static generation where possible to improve load times and Core Web Vitals.

  • Robust Checkout Process: Developing a secure checkout flow with complete validation, error handling, and email sending required careful architecture to ensure the integrity of customer data.

Outcome

  • Complete Commercial Platform: The application provides a complete and functional shopping experience, from product exploration to order completion.

  • Excellent SEO: The site is fully optimized for search engines, with dynamic sitemap, structured metadata, and friendly URLs, which improves visibility and ranking.

  • Improved User Experience: The implementation of advanced filters, persistent cart, favorites, and responsive design provides a fluid and modern user experience.

  • Scalability: The architecture based on Next.js and PocketBase allows easy scaling to handle more products, users, and additional features in the future.

  • Maintainability: The code is well structured with TypeScript, reusable components, and separation of concerns, facilitating maintenance and future updates.

SAS Tienda Virtual - E-commerce de Perfumes y Skincare

“Tu destino para descubrir las mejores fragancias y cosméticos del mercado.”

SAS Tienda Virtual es una plataforma de e-commerce completa desarrollada con Next.js 16 y React 19, especializada en la venta de perfumes y productos de skincare de las marcas más reconocidas. Mi rol en este proyecto incluyó el diseño y desarrollo de toda la aplicación, desde la arquitectura frontend hasta la integración con PocketBase como sistema de gestión de contenido y base de datos.

Features

  • Catálogo de Productos Dinámico: Sistema completo de gestión de productos con categorías (perfumes y skincare), filtros avanzados por precio, disponibilidad y ordenamiento.

  • Carrito de Compras y Favoritos: Implementación de contextos de React para manejar el estado del carrito y lista de favoritos, con persistencia en localStorage.

  • Sistema de Pedidos: Proceso completo de checkout con validación de formularios, creación de pedidos en PocketBase y envío de emails de confirmación mediante Nodemailer.

  • SEO Optimizado: Implementación completa de SEO con sitemap dinámico que se genera automáticamente para todos los productos, robots.txt configurado, metadata estructurada y URLs SEO-friendly con slugs.

  • Actualizaciones en Tiempo Real: Integración con PocketBase Realtime para actualizar automáticamente el catálogo de productos cuando hay cambios en la base de datos.

  • Diseño Responsive: Interfaz completamente responsive que se adapta a diferentes dispositivos, con diseño moderno y elegante utilizando CSS custom y fuentes de Google (Playfair Display e Inter).

  • Optimización de Imágenes: Sistema de gestión de imágenes optimizado con soporte para WebP y manejo de imágenes faltantes con placeholders.

  • Analytics: Integración con Vercel Analytics para seguimiento de métricas y comportamiento de usuarios.

Tecnologías Usadas

  • Next.js 16: Framework de React utilizado con App Router para renderizado del lado del servidor, generación estática y dinámica de páginas, y optimizaciones automáticas.

  • React 19: Biblioteca de JavaScript para construir la interfaz de usuario, con hooks modernos y Context API para manejo de estado global.

  • TypeScript: Tipado estático para mayor seguridad y mejor experiencia de desarrollo.

  • PocketBase: Backend como servicio (BaaS) utilizado para gestión de productos, pedidos y almacenamiento de imágenes, con autenticación y API REST integrada.

  • CSS: Estilos customizados para crear una identidad visual única y moderna, con soporte para temas claro/oscuro mediante next-themes.

  • Nodemailer: Librería para el envío de emails de confirmación de pedidos.

  • Docker: Containerización de la aplicación para facilitar despliegues y desarrollo consistente.

  • Vercel Analytics: Herramienta de análisis para monitorear el rendimiento y comportamiento de usuarios.

Implementación SEO y Sitemap

El proyecto cuenta con una implementación robusta de SEO que incluye:

  • Sitemap Dinámico: Generación automática de sitemap.xml que incluye todas las páginas estáticas (inicio, catálogo, categorías) y todas las páginas dinámicas de productos. El sitemap se revalida cada hora para mantener actualizada la información.

  • Metadata Estructurada: Configuración de metadata en el layout principal con títulos descriptivos, descripciones optimizadas e iconos personalizados para diferentes temas.

  • URLs SEO-Friendly: Sistema de generación de slugs a partir de los nombres de productos, normalizando caracteres especiales y eliminando acentos para crear URLs limpias y descriptivas.

  • Robots.txt: Configuración adecuada que permite la indexación de páginas públicas mientras bloquea rutas de API y checkout para proteger información sensible.

  • Breadcrumbs: Navegación estructurada implementada en las páginas de productos para mejorar la experiencia de usuario y SEO.

  • Estructura Semántica HTML: Uso adecuado de elementos semánticos (header, section, nav, footer) y jerarquía de encabezados (h1, h2, h3) para mejorar la accesibilidad y SEO.

Challenges Overcome

  • Integración con PocketBase: La integración con PocketBase como backend requirió manejar autenticación, conexiones de servidor y cliente, y sincronización de datos. Implementé funciones helper para gestionar la conexión y mapeo de datos de forma eficiente.

  • Sitemap Dinámico con Revalidación: Implementar un sitemap que se genera dinámicamente desde PocketBase y se revalida periódicamente fue un desafío técnico. Utilicé generateStaticParams de Next.js junto con revalidación incremental para mantener el sitemap actualizado sin afectar el rendimiento.

  • Manejo de Estado Complejo: Implementar el carrito de compras y sistema de favoritos con Context API requirió un diseño cuidadoso para evitar renders innecesarios y mantener la sincronización con localStorage.

  • Actualizaciones en Tiempo Real: Configurar PocketBase Realtime para que actualice automáticamente el catálogo cuando hay cambios fue desafiante, especialmente considerando que debe funcionar solo en runtime y no durante el build estático.

  • Optimización de Rendimiento: Implementar lazy loading de productos, optimización de imágenes y generación estática donde fue posible para mejorar los tiempos de carga y Core Web Vitals.

  • Proceso de Checkout Robusto: Desarrollar un flujo de checkout seguro con validación completa, manejo de errores y envío de emails requirió una arquitectura cuidadosa para garantizar la integridad de los datos del cliente.

Outcome

  • Plataforma Comercial Completa: La aplicación proporciona una experiencia de compra completa y funcional, desde la exploración de productos hasta la finalización de pedidos.

  • Excelente SEO: El sitio está completamente optimizado para motores de búsqueda, con sitemap dinámico, metadata estructurada y URLs amigables, lo que mejora la visibilidad y el posicionamiento.

  • Experiencia de Usuario Mejorada: La implementación de filtros avanzados, carrito persistente, favoritos y diseño responsive proporciona una experiencia de usuario fluida y moderna.

  • Escalabilidad: La arquitectura basada en Next.js y PocketBase permite escalar fácilmente para manejar más productos, usuarios y funcionalidades adicionales en el futuro.

  • Mantenibilidad: El código está bien estructurado con TypeScript, componentes reutilizables y separación de concerns, facilitando el mantenimiento y futuras actualizaciones.