Skip to main content

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

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.
Client-side routing for navigation between pages.
package.json
"react-router-dom": "^7.5.3"
Used for implementing routes like /productos, /admin, /contacto, etc.
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.
Toast notifications for user feedback.
package.json
"react-toastify": "^11.0.5"
Displays notifications when products are added to the cart.
Beautiful, responsive popup boxes for confirmations.
package.json
"sweetalert2": "^11.22.2"
Used for delete confirmations in the admin panel.
Icon library with popular icon sets.
package.json
"react-icons": "^5.5.0"
Provides icons for UI elements throughout the application.

Development dependencies

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.
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.
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

Try clearing the npm cache and reinstalling:
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
Either stop the process using port 5173 or specify a different port:
npm run dev -- --port 3000
Fix linting issues before running:
npm run lint
Then fix any reported issues or use npm run dev to run anyway.
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

Build docs developers (and LLMs) love