Overview The Huellitas Pet Shop frontend is built with React 18, Vite, and modern UI libraries including Framer Motion for animations. The application uses React Router for navigation and Context API for state management.
Technology Stack Core Dependencies { "dependencies" : { "axios" : "^1.6.0" , "framer-motion" : "^12.34.3" , "react" : "^18.2.0" , "react-dom" : "^18.2.0" , "react-router-dom" : "^6.22.0" } }
React 18 Modern React with hooks and concurrent features
Vite Lightning-fast build tool and dev server
Framer Motion Powerful animation library for React
React Router v6 Client-side routing with latest features
Development Dependencies { "devDependencies" : { "@vitejs/plugin-react" : "^4.2.1" , "autoprefixer" : "^10.4.23" , "tailwindcss" : "^3.4.19" , "vite" : "^5.2.0" , "gh-pages" : "^6.3.0" } }
Installation
Clone the repository
git clone < repository-ur l > cd huellitas-frontend
Start development server
The application will be available at http://localhost:5173 Project Structure huellitas-frontend/ ├── src/ │ ├── components/ # Reusable UI components │ │ ├── Carrito/ # Cart-related components │ │ ├── Contacto/ # Contact form components │ │ ├── Login/ # Authentication UI │ │ ├── Producto/ # Product card components │ │ ├── Header.jsx # Main navigation header │ │ ├── Footer.jsx # Site footer │ │ └── FilterSidebar.jsx │ ├── pages/ # Page components │ │ ├── Home/ │ │ ├── Cart/ │ │ ├── Contact/ │ │ ├── Login/ │ │ └── Admin/ │ ├── context/ # React Context providers │ │ └── CarritoContext.jsx │ ├── hooks/ # Custom React hooks │ │ └── useCarrito.js │ ├── App.jsx # Main app component │ ├── main.jsx # Application entry point │ └── index.css # Global styles ├── package.json ├── vite.config.js └── index.html
Configuration Vite Configuration The application uses a custom base path for GitHub Pages deployment:
import { defineConfig } from "vite" ; import react from "@vitejs/plugin-react" ; export default defineConfig (({ command }) => { return { plugins: [ react ()], base: command === "build" ? "/petshopHuellitas/" : "/" , }; } ) ;
The base path is set to /petshopHuellitas/ for production builds to support GitHub Pages hosting.
Entry Point The application bootstraps with React Context providers:
import React from "react" ; import ReactDOM from "react-dom/client" ; import { HashRouter } from "react-router-dom" ; import App from "./App" ; import { CarritoProvider } from "./context/CarritoContext" ; import "./index.css" ; ReactDOM . createRoot ( document . getElementById ( "root" )). render ( < React.StrictMode > < HashRouter > < CarritoProvider > < App /> </ CarritoProvider > </ HashRouter > </ React.StrictMode > );
Uses HashRouter instead of BrowserRouter for GitHub Pages compatibility.
Available Scripts Development
Build
Preview
Deploy
npm run dev # Starts Vite development server on port 5173
Environment Setup Prerequisites
Node.js 16.x or higher
npm 8.x or higher
Modern browser with ES6+ support
Browser Support The application supports all modern browsers:
Chrome/Edge (last 2 versions)
Firefox (last 2 versions)
Safari (last 2 versions)
Internet Explorer is not supported due to the use of modern JavaScript features.
Next Steps
Components Learn about the component architecture
Routing Explore the routing configuration
Cart System Understand the shopping cart implementation
Backend API Connect to the backend API