huellitas-frontend/
├── src/
│   ├── App.jsx                 # Root component with routing
│   ├── main.jsx               # Application entry point
│   ├── components/            # Reusable UI components
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   ├── FilterSidebar.jsx
│   │   ├── Producto/
│   │   │   └── ProductCard.jsx
│   │   ├── Carrito/
│   │   │   ├── CarritoItem.jsx
│   │   │   ├── CarritoResumen.jsx
│   │   │   └── CarritoVacio.jsx
│   │   ├── Login/
│   │   │   ├── LoginForm.jsx
│   │   │   ├── RegisterForm.jsx
│   │   │   └── AuthUI.jsx
│   │   └── Contacto/
│   │       ├── ContactoForm.jsx
│   │       └── ContactoInfo.jsx
│   ├── pages/                 # Page components
│   │   ├── Home/
│   │   │   └── Inicio.jsx
│   │   ├── Cart/
│   │   │   └── Carrito.jsx
│   │   ├── Contact/
│   │   │   └── Contacto.jsx
│   │   ├── Login/
│   │   │   └── Login.jsx
│   │   └── Admin/
│   │       └── AdminPanel.jsx
│   ├── hooks/                 # Custom React hooks
│   │   ├── useProductos.js
│   │   ├── useCarrito.js
│   │   ├── useLoginForm.js
│   │   ├── useRegisterForm.js
│   │   ├── useContacto.js
│   │   └── useFiltros.js
│   └── context/               # Global state management
│       └── CarritoContext.jsx
└── public/
    └── img/                   # Static assets

import { Routes, Route, useLocation } from "react-router-dom";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Inicio from "./pages/Home/Inicio";
import Contacto from "./pages/Contact/Contacto";
import Login from "./pages/Login/Login";
import AdminPanel from "./pages/Admin/AdminPanel";
import Carrito from "./pages/Cart/Carrito";

function App() {
  const location = useLocation();
  const isAdmin = location.pathname.startsWith("/admin");

  return (
    <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
      {!isAdmin && <Header />}
      
      <main style={{ flex: 1, width: "100%" }}>
        <Routes>
          <Route path="/" element={<Inicio />} />
          <Route path="/contacto" element={<Contacto />} />
          <Route path="/carrito" element={<Carrito />} />
          <Route path="/login" element={<Login />} />
          <Route path="/admin" element={<AdminPanel />} />
        </Routes>
      </main>
      
      {!isAdmin && <Footer />}
    </div>
  );
}

// hooks/useProductos.js
import { useState, useEffect } from 'react';

export const useProductos = () => {
  const [productos, setProductos] = useState([]);
  const [cargando, setCargando] = useState(true);

  useEffect(() => {
    const obtenerProductos = async () => {
      try {
        const respuesta = await fetch('https://petshophuellitas.onrender.com/api/Productos');
        const datos = await respuesta.json();
        setProductos(datos);
        setCargando(false);
      } catch (error) {
        console.error("Error al cargar productos:", error);
        setCargando(false);
      }
    };

    obtenerProductos();
  }, []);
  
  return { productos, cargando };
};

using Microsoft.EntityFrameworkCore;
using Huellitas.Data;
using Huellitas.Core.Interfaces;
using Huellitas.Service;

var builder = WebApplication.CreateBuilder(args);

// Database context
builder.Services.AddDbContext<HuellitasContext>(options =>
    options.UseNpgsql(builder.Configuration.GetConnectionString("DefaultConnection")));

// Repository and Service registration
builder.Services.AddScoped<IProductoRepositorio, ProductoRepositorio>();
builder.Services.AddScoped<IProductoService, ProductoService>();
builder.Services.AddScoped<IUsuarioRepositorio, UsuarioRepositorio>();
builder.Services.AddScoped<IAuthService, AuthService>();

// CORS policy
builder.Services.AddCors(options =>
{
    options.AddPolicy("PermitirFrontend",
        policy =>
        {
            policy.AllowAnyOrigin()
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
});

var app = builder.Build();

// Middleware pipeline
app.UseHttpsRedirection();
app.UseCors("PermitirFrontend");
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();

app.Run();

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;
using System.Text;

var jwtSettings = builder.Configuration.GetSection("Jwt");
var secretKey = jwtSettings["Key"];
var key = Encoding.ASCII.GetBytes(secretKey);

builder.Services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options =>
{
    options.TokenValidationParameters = new TokenValidationParameters
    {
        ValidateIssuerSigningKey = true,
        IssuerSigningKey = new SymmetricSecurityKey(key),
        ValidateIssuer = true,
        ValidIssuer = jwtSettings["Issuer"],
        ValidateAudience = true,
        ValidAudience = jwtSettings["Audience"],
        ValidateLifetime = true
    };
});

# Create a new migration
dotnet ef migrations add MigrationName

# Apply migration to database
dotnet ef database update

# Rollback migration
dotnet ef database update PreviousMigrationName