Technologies Used

Technology Stack Overview

Tienda ETCA is built with modern web technologies focused on React ecosystem tools. The application uses Vite for fast development and optimized builds, with a carefully selected set of dependencies for UI, routing, and state management.

Core Technologies

React 19

Latest React version with improved performance and concurrent features

Vite 6.3

Lightning-fast build tool with instant HMR

React Router 7

Client-side routing with nested routes and protected routes

Bootstrap 5

Responsive UI framework for layout and components

Dependencies Breakdown

Based on ~/workspace/source/package.json:

Production Dependencies

React Ecosystem

Core Libraries

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

React 19.0.0 - Core library for building UI components
React DOM 19.0.0 - React rendering for web browsers

Features Used:

Functional components with hooks
Context API for state management
StrictMode for development warnings
Concurrent rendering capabilities

Routing

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

React Router DOM 7.5.3Latest version with enhanced features:

Client-side routing
Nested routes
Route parameters (e.g., /productos/:id)
Protected routes via wrapper components
Programmatic navigation with useNavigate
BrowserRouter for clean URLs

Implementation:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

UI Framework & Styling

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

Bootstrap 5.3.7

Modern CSS framework
Responsive grid system
Pre-built components
Utility classes

React Bootstrap 2.10.10

Bootstrap components as React components
No jQuery dependency
Better integration with React

Popper.js 2.11.8

Tooltip and popover positioning
Required by Bootstrap for dropdowns

User Notifications

"react-toastify": "^11.0.5"
"sweetalert2": "^11.22.2"

React Toastify 11.0.5Used for cart operations and user feedback:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

toast.success(`"${product.nombre}" agregado al carrito`);
toast.info(`Cantidad aumentada`);

Features:

Non-blocking notifications
Multiple toast types (success, error, info, warning)
Customizable position and duration
Auto-dismiss

SweetAlert2 11.22.2Used for confirmations and admin alerts:

import Swal from 'sweetalert2';

Swal.fire({
  title: '¿Estás seguro de eliminar el producto?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Sí, eliminar',
  cancelButtonText: 'Cancelar',
});

Use Cases:

Delete confirmations
Success/error messages for CRUD operations
Admin panel alerts

Icons

"react-icons": "^5.5.0"

React Icons 5.5.0Provides popular icon sets as React components:

Font Awesome
Material Design Icons
Bootstrap Icons
And many more

Usage:

import { FaShoppingCart, FaUser, FaTrash } from 'react-icons/fa';

<FaShoppingCart size={24} />

Development Dependencies

Build Tool

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

Vite 6.3.1Modern build tool with:

Instant server start
Lightning-fast Hot Module Replacement (HMR)
Optimized production builds
Native ES modules support
Built-in TypeScript support

Vite React Plugin 4.3.4

Fast Refresh for React
JSX transformation
React DevTools integration

Scripts:

"dev": "vite",              // Start dev server
"build": "vite build",       // Production build
"preview": "vite preview"    // Preview production build

Code Quality

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

ESLint 9.22.0Code linting and quality enforcement:

Syntax error detection
Best practice recommendations
Code style consistency

React-Specific Plugins:

eslint-plugin-react-hooks - Enforces Rules of Hooks
eslint-plugin-react-refresh - Ensures Fast Refresh compatibility

Script:

"lint": "eslint ."

Type Checking

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

TypeScript Type DefinitionsWhile the project uses JavaScript, these types:

Enable better IDE autocomplete
Provide inline documentation
Help catch potential errors during development
Support future TypeScript migration

External APIs

MockAPI

Base URL: https://681cdce3f74de1d219ae0bdb.mockapi.io/tiendatobeREST API for product data and CRUD operations

Endpoints Used:

Method	Endpoint	Purpose	Context
GET	`/productos`	Fetch all products	CartContext, AdminContext
POST	`/productos`	Create new product	AdminContext
PUT	`/productos/:id`	Update product	AdminContext
DELETE	`/productos/:id`	Delete product	AdminContext

Example API Call:

// From CartContext.jsx:65-82
fetch("https://681cdce3f74de1d219ae0bdb.mockapi.io/tiendatobe/productos")
  .then((respuesta) => respuesta.json())
  .then((datos) => {
    setProductos(datos);
    setCarga(false);
  })
  .catch((error) => {
    console.error("Error:", error);
    setError(true);
  });

State Management

React Context API

Built-in State ManagementNo external state management library (Redux, MobX, etc.) needed.Three Context Providers:

AuthContext - Authentication and authorization
CartContext - Shopping cart and products
AdminContext - Admin panel operations

Benefits:

No additional dependencies
Simple API with hooks
Sufficient for application scale
Built-in to React

Custom Hooks:

export const useAuth = () => useContext(AuthContext);

Browser Storage

localStorage - Client-side persistence

// From AuthContext.jsx:56-57
localStorage.setItem('isAuth', true);
localStorage.setItem('role', foundUser.role);

// On app load:
const isAuthenticated = localStorage.getItem('isAuth') === 'true';
const userRole = localStorage.getItem('role') || '';

Stored Data:

Authentication status (isAuth)
User role (role - ‘admin’ or ‘cliente’)

Development Tools

Vite Dev Server

Fast development with instant HMR at localhost:5173

React DevTools

Browser extension for inspecting React components

ESLint

Code quality and consistency checks

Browser Console

Debugging with console.log and error messages

Version Compatibility

Node.js RequirementsWhile not explicitly specified in package.json, Vite 6 requires:

Node.js 18+ or 20+
npm 7+ or yarn/pnpm

Key Version Upgrades:

React 19 (latest) - Uses modern concurrent features
React Router 7 (latest) - Enhanced routing capabilities
Vite 6 (latest) - Improved build performance
Bootstrap 5 (no jQuery) - Modern CSS framework

Build Configuration

Vite Configuration

While not shown in the provided files, typical Vite config for React:

// vite.config.js (typical setup)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

CSS Architecture

Multiple Styling Approaches:

Bootstrap Classes - Utility and component classes
Custom CSS - Component-specific styles in components/style/
Global Styles - index.css and App.css
React Toastify CSS - Imported from node_modules

// CSS Imports
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-toastify/dist/ReactToastify.css';
import './components/style/Header.css';

Package Scripts

{
  "scripts": {
    "dev": "vite",           // Start development server
    "build": "vite build",   // Build for production
    "lint": "eslint .",      // Run linter
    "preview": "vite preview" // Preview production build locally
  }
}

Workflow:

Development

Run npm run dev to start dev server with hot reload

Linting

Run npm run lint to check code quality

Build

Run npm run build to create optimized production bundle

Preview

Run npm run preview to test production build locally

Technology Decisions

Why React 19?

Latest React version with:

Improved concurrent rendering
Better performance
Enhanced developer experience
Future-proof application

Why Vite over Create React App?

Vite provides:

10-100x faster dev server startup
Instant Hot Module Replacement
Faster production builds
Modern tooling (ESM, esbuild)
Better developer experience

Why Bootstrap 5?

Bootstrap 5 offers:

No jQuery dependency (lighter)
Modern CSS Grid/Flexbox
Comprehensive component library
Responsive utilities
Well-documented

Why Context API over Redux?

For this application size:

Simpler API and setup
No additional dependencies
Built into React
Sufficient state management
Easier to learn and maintain

Why Two Notification Libraries?

Different use cases:

React Toastify: Quick, non-blocking notifications (cart actions)
SweetAlert2: Modal confirmations and important alerts (delete confirmations)

Dependency Summary

Total Dependencies: 8 production + 9 development = 17 packages

Lightweight Stack

Minimal dependencies focused on essential functionality, resulting in faster installs and smaller bundle size.

Future Considerations

TypeScript Migration

Type definitions already included for smooth migration path

Testing

Consider adding Vitest for unit tests and React Testing Library

Real Backend

Replace MockAPI with real backend (Node.js, Django, etc.)

State Management

If app grows, consider Zustand or Redux Toolkit

Next Steps

Architecture

Understand how these technologies work together

Project Structure

See how files are organized

Architecture

Context API

Components

Deployment

Technology Stack Overview

Core Technologies

React 19

Vite 6.3

React Router 7

Bootstrap 5

Dependencies Breakdown

Production Dependencies

Development Dependencies

External APIs

MockAPI

State Management

Browser Storage

Development Tools

Vite Dev Server

React DevTools

ESLint

Browser Console

Version Compatibility

Build Configuration

Vite Configuration

CSS Architecture

Package Scripts

Technology Decisions

Dependency Summary

Lightweight Stack

Future Considerations

TypeScript Migration

Testing

Real Backend

State Management

Next Steps

Architecture

Project Structure

Build docs developers (and LLMs) love

Architecture

Context API

Components

Deployment

​Technology Stack Overview

​Core Technologies

React 19

Vite 6.3

React Router 7

Bootstrap 5

​Dependencies Breakdown

​Production Dependencies

​Development Dependencies

​External APIs

MockAPI

​State Management

​Browser Storage

​Development Tools

Vite Dev Server

React DevTools

ESLint

Browser Console

​Version Compatibility

​Build Configuration

​Vite Configuration

​CSS Architecture

​Package Scripts

​Technology Decisions

​Dependency Summary

Lightweight Stack

​Future Considerations

TypeScript Migration

Testing

Real Backend

State Management

​Next Steps

Architecture

Project Structure

Build docs developers (and LLMs) love

Technology Stack Overview

Core Technologies

Dependencies Breakdown

Production Dependencies

Development Dependencies

External APIs

State Management

Browser Storage

Development Tools

Version Compatibility

Build Configuration

Vite Configuration

CSS Architecture

Package Scripts

Technology Decisions

Dependency Summary

Future Considerations

Next Steps