Installation

Complete installation guide for Tienda ETCA e-commerce platform

Prerequisites

Before installing Tienda ETCA, ensure you have the following installed on your system:

Node.js

Version 18.x or higher recommended

npm

Version 9.x or higher (comes with Node.js)

Git

Latest stable version

Modern browser

Chrome, Firefox, Safari, or Edge

Verify prerequisites

Check your installed versions:

node --version
npm --version
git --version

If you need to install Node.js, visit nodejs.org and download the LTS version.

Installation steps

1. Clone the repository

   Clone the project repository to your local machine:

   git clone <your-repository-url>
   cd tienda-etca
   
2. Install dependencies

   Install all project dependencies using npm:

   npm install
   

   This command will install all dependencies listed in package.json.

3. Verify installation

   Verify that all dependencies were installed correctly:

   npm list --depth=0
   

   You should see a list of all installed packages without errors.

4. Start development server

   Launch the development server:

   npm run dev
   

   The application will start at http://localhost:5173

Dependencies

Tienda ETCA relies on the following core dependencies:

Production dependencies

React & React DOM (^19.0.0)

The core React library for building user interfaces.

package.json

"react": "^19.0.0",
"react-dom": "^19.0.0"

React 19 provides improved performance and new features for the application.

React Router DOM (^7.5.3)

Client-side routing for navigation between pages.

package.json

"react-router-dom": "^7.5.3"

Used for implementing routes like /productos, /admin, /contacto, etc.

Bootstrap & React Bootstrap

UI framework and React components for responsive design.

package.json

"bootstrap": "^5.3.7",
"react-bootstrap": "^2.10.10",
"@popperjs/core": "^2.11.8"

Bootstrap is used primarily for pagination and responsive layout components.

React Toastify (^11.0.5)

Toast notifications for user feedback.

package.json

"react-toastify": "^11.0.5"

Displays notifications when products are added to the cart.

SweetAlert2 (^11.22.2)

Beautiful, responsive popup boxes for confirmations.

package.json

"sweetalert2": "^11.22.2"

Used for delete confirmations in the admin panel.

React Icons (^5.5.0)

Icon library with popular icon sets.

package.json

"react-icons": "^5.5.0"

Provides icons for UI elements throughout the application.

Development dependencies

Vite (^6.3.1)

Next-generation frontend build tool.

package.json

"vite": "^6.3.1",
"@vitejs/plugin-react": "^4.3.4"

Provides fast HMR (Hot Module Replacement) and optimized builds.

ESLint

Code quality and consistency tool.

package.json

"eslint": "^9.22.0",
"@eslint/js": "^9.22.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19"

Ensures code quality with React-specific rules.

TypeScript types

Type definitions for development.

package.json

"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4"

Provides TypeScript definitions for better IDE support.

Configuration files

Vite configuration

The project uses Vite as its build tool. The configuration is minimal:

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Vite automatically handles JSX transformation and module bundling. No additional configuration is needed for basic usage.

ESLint configuration

The project includes ESLint for code quality:

eslint.config.js

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
]

Environment setup

No environment variables required

Tienda ETCA does not require environment variables for basic operation. The application uses a hardcoded MockAPI endpoint:

src/context/CartContext.jsx

fetch(
    "https://681cdce3f74de1d219ae0bdb.mockapi.io/tiendatobe/productos"
)

For production use, consider moving API endpoints to environment variables for better security and flexibility.

Optional: Creating environment variables

If you want to use environment variables in the future:

1. Create .env file

   Create a .env file in the project root:

   touch .env
   
2. Add variables

   Add your environment variables with the VITE_ prefix:

   .env

   VITE_API_URL=https://681cdce3f74de1d219ae0bdb.mockapi.io/tiendatobe
   VITE_APP_NAME=Tienda ETCA
   

   Vite requires environment variables to be prefixed with VITE_ to be exposed to the client.

3. Access in code

   Access environment variables using import.meta.env:

   const apiUrl = import.meta.env.VITE_API_URL
   fetch(`${apiUrl}/productos`)
   

Project structure

After installation, your project structure will look like this:

tienda-etca/
├── node_modules/          # Installed dependencies
├── public/                # Static assets
│   ├── data/             # JSON data files
│   └── _redirects        # Hosting redirects
├── src/                   # Source code
│   ├── assets/           # Images and graphics
│   ├── auth/             # Protected route logic
│   ├── components/       # Reusable components
│   │   └── style/       # Component styles
│   ├── context/          # Global contexts (cart, auth, admin)
│   ├── layout/           # Page layouts
│   ├── App.jsx           # Main app component
│   ├── App.css           # Global styles
│   ├── main.jsx          # Entry point
│   └── index.css         # Base styles
├── .gitignore            # Git ignore rules
├── eslint.config.js      # ESLint configuration
├── index.html            # HTML template
├── package.json          # Dependencies and scripts
├── package-lock.json     # Dependency lock file
└── vite.config.js        # Vite configuration

Build for production

To create an optimized production build:

npm run build

This creates a dist folder with optimized assets:

• Minified JavaScript bundles
• Optimized CSS
• Compressed assets
• Source maps for debugging

Preview production build

Test the production build locally:

npm run preview

The preview server runs the production build locally, allowing you to test before deploying.

Troubleshooting

Common installation issues

npm install fails

Try clearing the npm cache and reinstalling:

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

Port 5173 already in use

Either stop the process using port 5173 or specify a different port:

npm run dev -- --port 3000

ESLint errors on start

Fix linting issues before running:

npm run lint

Then fix any reported issues or use npm run dev to run anyway.

Module not found errors

Ensure all dependencies are installed:

npm install

If the error persists, delete node_modules and reinstall.

Next steps

Quickstart guide

Get up and running quickly with basic usage

Project structure

Learn about the codebase organization

Context API

Understand global state management

Deployment

Deploy your application to production