Skip to main content

​
Welcome to Huellitas Pet Shop

Huellitas is a full-featured pet shop e-commerce platform that evolved from a front-end course project into a robust, scalable full-stack application. The project showcases modern web development practices with a Single Page Application (SPA) consuming data from a custom REST API backed by a relational database.

Live Demo

Experience the application in action

​
What is Huellitas?

Huellitas is an educational project demonstrating professional software architecture and development practices. It features:

Dynamic Catalog

Real-time product loading from the API with filtering and search capabilities

Shopping Cart

Persistent cart system using LocalStorage with add, remove, and checkout functionality

Admin Dashboard

Exclusive panel with key metrics, user management, and analytics for 580+ users

Responsive Design

Optimized interface for mobile phones, tablets, and desktop computers

​
Technology Stack

Huellitas is built with modern technologies chosen for scalability and maintainability:

​
Frontend

  • React 18 - Modern UI library with hooks and context
  • Vite - Fast build tool and development server
  • React Router Dom - Client-side routing for SPA navigation
  • Axios - HTTP client for API communication
  • Tailwind CSS - Utility-first CSS framework
  • Framer Motion - Animation library for smooth interactions

​
Backend

  • .NET 9 / C# - Modern web API framework
  • Entity Framework Core - Code-first ORM for database operations
  • JWT Authentication - Secure token-based authentication
  • Swagger/OpenAPI - Interactive API documentation

​
Database

  • PostgreSQL - Robust relational database
  • Neon - Cloud database hosting
  • Normalized schema - Optimized for data consistency

​
Infrastructure

  • Render - Backend hosting platform
  • GitHub Pages - Frontend static site hosting
  • Git - Version control with conventional commits

​
Architecture Highlights

The application follows industry-standard patterns and practices:
Abstracts and decouples data access logic from business logic, making the codebase more maintainable and testable.
public interface IProductoRepositorio
{
    Task<IEnumerable<Producto>> ObtenerTodosAsync();
    Task<Producto> ObtenerPorIdAsync(int id);
    Task<Producto> CrearAsync(Producto producto);
    Task ActualizarAsync(Producto producto);
    Task<bool> EliminarAsync(int id);
}
Ensures secure and efficient data transfer between layers by exposing only necessary information.
Improves modularity, testability, and maintainability by injecting dependencies rather than hard-coding them.
builder.Services.AddScoped<IProductoRepositorio, ProductoRepositorio>();
builder.Services.AddScoped<IProductoService, ProductoService>();
Clean separation of concerns across four distinct projects:
  • Huellitas.API - Controllers and HTTP endpoints
  • Huellitas.Service - Business logic and validation
  • Huellitas.Data - Database context and repositories
  • Huellitas.Core - Domain entities and interfaces

​
Key Features

​
For Customers

  • Browse products with real-time API data
  • Filter by categories and search functionality
  • Add items to cart with quantity management
  • Persistent cart across sessions
  • Responsive design for all devices
  • Contact form for inquiries

​
For Administrators

  • Secure JWT-based authentication
  • Dashboard with key business metrics
  • User management for 580+ registered users
  • Product CRUD operations
  • Order tracking and management

​
Development Approach

This project embraces modern development methodologies including AI-assisted development for code optimization, feature branches for version control, and conventional commits for maintainable history.
The project demonstrates:
  • Code-first database migrations with Entity Framework Core
  • RESTful API design with proper HTTP verbs and status codes
  • Custom React hooks for state management and data fetching
  • Context API for global state (shopping cart)
  • Component composition for reusable UI elements

​
Future Roadmap

Huellitas is continuously evolving with planned features:
  1. Smart Data Pipeline (Completed) - Python scripts for automated product categorization
  2. Dynamic CRM Dashboard (In Progress) - Purchase trend visualization and analytics
  3. ML Recommendation Engine (Planned) - Product suggestions based on user history
  4. Predictive Analytics (Planned) - Advanced dashboards for demand forecasting

​
Getting Started

Ready to explore or contribute to Huellitas? Continue to the next section:

Quickstart Guide

Get the project running locally in minutes
This project is developed exclusively for educational purposes. Product images and data are used for technical demonstration only.
Project Author: Micaela Belen Dominguez

Build docs developers (and LLMs) love

Get started for freeTalk to us