Corazolana

Project Evolution & Technical Growth

Phase 1 - Vanilla JavaScript (4 weeks, 2022): Built initial e-commerce catalog in pure JavaScript as my first real-world project. Focused heavily on CSS/SASS architecture using ITCSS methodology, creating a robust stylesheet foundation that would persist through subsequent migrations. Implemented custom sliding cart with CSS transforms, product modals, and basic form validation—all without frameworks.

Phase 2 - Angular Migration (1 week, 2023): After learning Angular professionally at Globant, recognized the value of component-based architecture and migrated the entire codebase. The challenge was refactoring "spaghetti code" from a single JavaScript file into modular Angular components. Leveraged the existing SASS architecture, making migration faster. Implemented Angular services for API communication, reactive forms, route guards for shop status (open/closed during vacation periods), and proper separation of concerns.

Full-Stack Architecture & Infrastructure

Strapi CMS Backend Design: Architected complete content model schema from scratch including Products (with featured flag, discount pricing), Categories, Options (product variants with individual stock/images), Orders, and Shop Settings. Designed relational structure enabling complex scenarios like products with multiple color options, each having separate inventory and images. Configured Strapi lifecycle hooks to trigger SendGrid email automation—sending order confirmations to both customer and business owner.

PostgreSQL Database Management: Self-taught PostgreSQL to configure local development environment and production database. Understood database normalization principles to design efficient schema. Managed database migrations and configured Strapi to connect to Railway's PostgreSQL instance, handling environment variables and connection pooling.

Railway Deployment & DevOps: Deployed Strapi backend to Railway with PostgreSQL database, configuring environment variables, build commands, and health checks. Set up custom domains (corazolana.com, catalogo.corazolana.com, knitboxing.corazolana.com) with SSL certificates. Frontend deployed to cPanel shared hosting with manual build process.

SendGrid Integration: Configured SendGrid API integration within Strapi, inspired by CeriFi/Globant project experience. Implemented custom email templates and lifecycle hooks that trigger transactional emails on order creation, ensuring both customer and business receive order confirmations with complete product details.

Complex Feature Implementation

Product Variant System: Most technically challenging feature was implementing product options/variants. Each product can have multiple options (e.g., yarn colors) where each option has its own image and independent stock tracking. Required mastering Strapi's population API—understanding how to request nested relationships wasn't well-documented at the time. Frontend dynamically updates product image and available stock when user selects different options, ensuring accurate inventory management.

Shop Status Guard System: Implemented route guard checking shop settings before allowing access to catalog. When my wife is on vacation or working on new product collections (she manufactures everything herself), the guard redirects to "Shop Closed" page. This business logic demonstrates understanding of real-world requirements beyond basic e-commerce.

Performance Optimization & Best Practices

Achieved Lighthouse scores between 85-100 across all metrics (Performance, Accessibility, Best Practices, SEO) through strategic optimizations. Single-page architecture minimizes navigation overhead. Implemented lazy loading for product modals—only fetching variant options when user opens product details. Images optimized to 2x required display size for retina screens while maintaining reasonable file sizes.

Cart persistence and state management handled through React state lifting and Angular services respectively. Built custom CSS-only sliding cart animation using transforms and transitions, avoiding heavy animation libraries. ITCSS architecture ensures maintainable, scalable stylesheets with clear specificity management.

Business Impact & Real-World Usage

Platform actively processes orders for handmade craft business since 2022. With 323+ orders processed (tracked since Angular migration with Strapi), the system handles product catalog of 45 items across 10 categories. Business operates in cycles—when new collection is ready, my wife opens Instagram live, showcases products, and typically sells out entire inventory. Order values range from $300 to $6,000 MXN.

The business model intentionally excludes payment gateway integration by owner preference—orders are confirmed via WhatsApp/Instagram before payment, allowing personal customer interaction and flexibility. This demonstrates understanding that technology serves business needs, not the other way around.

Results & Technical Achievements

• 323+ orders processed in production generating consistent revenue for small business
• 1,300+ active users with 7,300+ events tracked via Google Analytics
• 1,200+ new users acquired demonstrating organic growth through Instagram marketing
• Complete technical evolution: Vanilla JS → Angular → React demonstrating continuous learning
• 100% solo full-stack development: frontend, backend, database, deployment, domain configuration
• Lighthouse scores 85-100 across all metrics with single-page optimized architecture
• Self-taught PostgreSQL and Strapi CMS, architecting normalized schema for scalability
• Deployed production infrastructure: Railway (Strapi + PostgreSQL) + cPanel (frontends)
• 2 domains configured: corazolana.com, catalogo.corazolana.com
• Complex variant system with individual stock/image tracking per product option
• SendGrid email automation with lifecycle hooks (inspired by CeriFi/Globant experience)
• Migration completed in 1 week from spaghetti code to Angular components