> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/betovildoza/tiendaetca/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get Tienda ETCA up and running in minutes

<Steps>
  <Step title="Clone the repository">
    Clone the Tienda ETCA repository to your local machine:

    ```bash theme={null}
    git clone https://github.com/betovildoza/tiendaetca.git
    cd tiendaetca
    ```
  </Step>

  <Step title="Install dependencies">
    Install all required dependencies using npm:

    ```bash theme={null}
    npm install
    ```

    <Note>
      This will install React 19, Vite 6, React Router DOM, Bootstrap, and other essential packages for the e-commerce platform.
    </Note>
  </Step>

  <Step title="Start the development server">
    Run the Vite development server:

    ```bash theme={null}
    npm run dev
    ```

    The application will be available at `http://localhost:5173`

    <Info>
      Vite provides hot module replacement (HMR) for instant updates during development.
    </Info>
  </Step>

  <Step title="Explore the application">
    Open your browser and navigate to the local server. You should see the ETCA archery school e-commerce platform with:

    * Product gallery with pagination
    * Shopping cart functionality
    * Product search and filtering
    * Admin panel (requires login)
  </Step>
</Steps>

## Available scripts

The application includes the following npm scripts:

<CodeGroup>
  ```bash Development theme={null}
  npm run dev
  ```

  ```bash Build theme={null}
  npm run build
  ```

  ```bash Preview theme={null}
  npm run preview
  ```

  ```bash Lint theme={null}
  npm run lint
  ```
</CodeGroup>

### Script descriptions

* **dev**: Starts the Vite development server with hot reload
* **build**: Creates an optimized production build in the `dist` folder
* **preview**: Previews the production build locally
* **lint**: Runs ESLint to check code quality

## Quick code examples

### Adding a product to cart

The application uses React Context API for global state management. Here's how products are added to the cart:

```jsx src/context/CartContext.jsx theme={null}
const handleAddToCart = (product) => {
    const productExist = cart.find((item) => item.id === product.id);

    if (productExist) {
        setCart(
            cart.map((item) =>
                item.id === product.id
                    ? { ...item, cantidad: item.cantidad + 1 }
                    : item
            )
        );
        toast.info(`Cantidad aumentada para "${product.nombre}"`);
    } else {
        setCart([...cart, product]);
        toast.success(`"${product.nombre}" agregado al carrito`);
    }
};
```

### Fetching products from API

Products are fetched from MockAPI on component mount:

```jsx src/context/CartContext.jsx theme={null}
useEffect(() => {
    fetch(
        "https://681cdce3f74de1d219ae0bdb.mockapi.io/tiendatobe/productos"
    )
        .then((respuesta) => respuesta.json())
        .then((datos) => {
            setTimeout(() => {
                setProductos(datos);
                setCarga(false);
            }, 2000)
        })
        .catch((error) => {
            console.error("Error:", error);
            setCarga(false);
            setError(true);
        });
}, []);
```

### Application routing

The app uses React Router DOM for client-side routing:

```jsx src/App.jsx theme={null}
<Routes>
  <Route path="/" element={<Home/>}/>
  <Route path="/productos" element={<GaleriaProductos/>}/>
  <Route path="/productos/:id" element={<DetallesProductos/>}/>
  <Route path="/acercade" element={<AcercaDe />}/>
  <Route path="/contacto" element={<Contacto />}/>
  <Route path='/admin' element={
    <RutaProtegida isAuthenticated={isAuthenticated} requeridRole='admin' role={role}>
      <Admin />
    </RutaProtegida>
  }/>
  <Route path='/login' element={<Login />}/>
  <Route path="*" element={<NotFound />}/>
</Routes>
```

## Testing the application

### Test the product gallery

1. Navigate to `/productos` to see the full product gallery
2. Use the search bar to filter products by name
3. Test pagination controls to navigate through product pages

### Test the shopping cart

1. Click "Agregar al carrito" on any product
2. You should see a toast notification confirming the addition
3. Open the cart to view added products
4. Test quantity increase/decrease and product removal

### Test admin functionality

<Warning>
  The admin panel is protected by authentication. You'll need valid credentials to access it.
</Warning>

1. Navigate to `/login`
2. Enter admin credentials
3. Access `/admin` to manage products
4. Test adding, editing, and deleting products

## Next steps

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/installation">
    Learn about detailed installation requirements and environment setup
  </Card>

  <Card title="Project structure" icon="folder-tree" href="/development/project-structure">
    Understand the codebase organization and architecture
  </Card>

  <Card title="Context API" icon="code" href="/development/context/cart-context">
    Explore the context providers for cart, auth, and admin
  </Card>

  <Card title="Deployment" icon="rocket" href="/development/deployment/setup">
    Deploy your application to production
  </Card>
</CardGroup>