Skip to main content
1

Clone the repository

Clone the Tienda ETCA repository to your local machine:
git clone https://github.com/betovildoza/tiendaetca.git
cd tiendaetca
2

Install dependencies

Install all required dependencies using npm:
npm install
This will install React 19, Vite 6, React Router DOM, Bootstrap, and other essential packages for the e-commerce platform.
3

Start the development server

Run the Vite development server:
npm run dev
The application will be available at http://localhost:5173
Vite provides hot module replacement (HMR) for instant updates during development.
4

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)

​
Available scripts

The application includes the following npm scripts: 
npm run dev

​
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:
src/context/CartContext.jsx
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:
src/context/CartContext.jsx
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:
src/App.jsx
<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

  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

The admin panel is protected by authentication. You’ll need valid credentials to access it.
  1. Navigate to /login
  2. Enter admin credentials
  3. Access /admin to manage products
  4. Test adding, editing, and deleting products

​
Next steps

Installation

Learn about detailed installation requirements and environment setup

Project structure

Understand the codebase organization and architecture

Context API

Explore the context providers for cart, auth, and admin

Deployment

Deploy your application to production

Build docs developers (and LLMs) love

Get started for freeTalk to us