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:If you need to install Node.js, visit nodejs.org and download the LTS version.
Installation steps
Install dependencies
Install all project dependencies using npm:This command will install all dependencies listed in
package.json.Verify installation
Verify that all dependencies were installed correctly:You should see a list of all installed packages without errors.
Dependencies
Tienda ETCA relies on the following core dependencies:Production dependencies
React & React DOM (^19.0.0)
React & React DOM (^19.0.0)
The core React library for building user interfaces.React 19 provides improved performance and new features for the application.
package.json
React Router DOM (^7.5.3)
React Router DOM (^7.5.3)
Client-side routing for navigation between pages.Used for implementing routes like
package.json
/productos, /admin, /contacto, etc.Bootstrap & React Bootstrap
Bootstrap & React Bootstrap
UI framework and React components for responsive design.Bootstrap is used primarily for pagination and responsive layout components.
package.json
React Toastify (^11.0.5)
React Toastify (^11.0.5)
Toast notifications for user feedback.Displays notifications when products are added to the cart.
package.json
SweetAlert2 (^11.22.2)
SweetAlert2 (^11.22.2)
Beautiful, responsive popup boxes for confirmations.Used for delete confirmations in the admin panel.
package.json
React Icons (^5.5.0)
React Icons (^5.5.0)
Icon library with popular icon sets.Provides icons for UI elements throughout the application.
package.json
Development dependencies
Vite (^6.3.1)
Vite (^6.3.1)
Next-generation frontend build tool.Provides fast HMR (Hot Module Replacement) and optimized builds.
package.json
ESLint
ESLint
Code quality and consistency tool.Ensures code quality with React-specific rules.
package.json
TypeScript types
TypeScript types
Type definitions for development.Provides TypeScript definitions for better IDE support.
package.json
Configuration files
Vite configuration
The project uses Vite as its build tool. The configuration is minimal:vite.config.js
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
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
Optional: Creating environment variables
If you want to use environment variables in the future:Add variables
Add your environment variables with the
VITE_ prefix:.env
Vite requires environment variables to be prefixed with
VITE_ to be exposed to the client.Project structure
After installation, your project structure will look like this:Build for production
To create an optimized production build:dist folder with optimized assets:
- Minified JavaScript bundles
- Optimized CSS
- Compressed assets
- Source maps for debugging
Preview production build
Test the production build locally:The preview server runs the production build locally, allowing you to test before deploying.
Troubleshooting
Common installation issues
npm install fails
npm install fails
Try clearing the npm cache and reinstalling:
Port 5173 already in use
Port 5173 already in use
Either stop the process using port 5173 or specify a different port:
ESLint errors on start
ESLint errors on start
Fix linting issues before running:Then fix any reported issues or use
npm run dev to run anyway.Module not found errors
Module not found errors
Ensure all dependencies are installed: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