Skip to main content
This guide will help you set up Huellitas Pet Shop on your local machine for development and testing.

​
Prerequisites

Before you begin, ensure you have the following installed:

.NET 9.0 SDK

Download from dotnet.microsoft.com

Node.js 18+

Download from nodejs.org

PostgreSQL 14+

Download from postgresql.org

Git

Download from git-scm.com

​
Setup Steps

1

Clone the repository

Clone the Huellitas repository to your local machine:
git clone https://github.com/dominguezmicaela/petshopHuellitas.git
cd petshopHuellitas
2

Configure the database

Create a PostgreSQL database for the project:
psql -U postgres
CREATE DATABASE huellitas;
\q
Navigate to the backend API project and create an appsettings.json file:
cd huellitasBackEnd/Huellitas.API
Create appsettings.json with your database connection:
appsettings.json
{
  "ConnectionStrings": {
    "DefaultConnection": "Host=localhost;Database=huellitas;Username=postgres;Password=your_password"
  },
  "Jwt": {
    "Key": "your-secret-key-at-least-32-characters-long",
    "Issuer": "HuellitasAPI",
    "Audience": "HuellitasClient"
  }
}
Replace your_password with your PostgreSQL password and generate a secure random string for the JWT Key field (at least 32 characters).
3

Run database migrations

Apply Entity Framework migrations to create the database schema:
cd huellitasBackEnd/Huellitas.API
dotnet ef database update
If you don’t have the EF Core tools installed, run:
dotnet tool install --global dotnet-ef
4

Start the backend API

Restore dependencies and run the .NET API:
cd huellitasBackEnd/Huellitas.API
dotnet restore
dotnet run
The API will start on http://localhost:5000. You should see:
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
Visit http://localhost:5000/swagger to explore the API documentation
5

Start the frontend

In a new terminal window, navigate to the frontend directory:
cd huellitas-frontend
npm install
npm run dev
The React application will start on http://localhost:5173.
Open your browser and visit http://localhost:5173 to see the Huellitas Pet Shop homepage

​
What’s Next?

Now that you have Huellitas running locally, you can:

Explore the Architecture

Learn about the three-tier architecture and design patterns

Backend Setup

Deep dive into the .NET API configuration

Frontend Development

Understand the React SPA structure

API Reference

Explore all available endpoints

​
Test the Application

​
Browse Products

  1. Open http://localhost:5173 in your browser
  2. Browse the product catalog
  3. Click on a product to view details

​
Add Items to Cart

  1. Click “Agregar al carrito” on any product
  2. Navigate to the cart page using the cart icon
  3. Adjust quantities or remove items

​
Admin Access

The admin dashboard requires authentication. You’ll need to create a user account and assign the admin role in the database first.
  1. Navigate to http://localhost:5173/#/login
  2. Log in with admin credentials
  3. Access the dashboard at http://localhost:5173/#/admin

​
Troubleshooting

Verify your PostgreSQL service is running:
# Windows
pg_ctl status -D "C:\Program Files\PostgreSQL\14\data"

# macOS/Linux
sudo service postgresql status
Check your connection string in appsettings.json matches your PostgreSQL configuration.
If port 5000 or 5173 is already in use, you can change it:Backend (5000): Edit Properties/launchSettings.json in Huellitas.APIFrontend (5173): Vite will automatically try the next available port
The backend is configured to allow all origins in development. If you still see CORS errors:
  1. Check that the backend is running
  2. Verify the API URL in your frontend code
  3. Clear your browser cache
Common JWT issues:
  • Ensure the JWT Key in appsettings.json is at least 32 characters
  • Verify Issuer and Audience match between backend and frontend
  • Check that tokens haven’t expired (default lifetime is set in AuthService)

​
Development Scripts

​
Backend Commands

# Restore dependencies
dotnet restore

# Run the application
dotnet run

# Run with hot reload
dotnet watch run

# Build for production
dotnet publish -c Release -o ./publish

# Create a new migration
dotnet ef migrations add MigrationName

# Update database to latest migration
dotnet ef database update

​
Frontend Commands

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Deploy to GitHub Pages
npm run deploy

​
Next Steps

Learn More

Read the full introduction to understand the project’s goals and features

Build docs developers (and LLMs) love

Get started for freeTalk to us