Yard Sale - E-commerce Application | Aplicación de Comercio Electrónico

Live Demo | Demostración en Vivo

English

A modern e-commerce application built with React and Vite, featuring a responsive design and seamless shopping experience.

Español

Una aplicación moderna de comercio electrónico construida con React y Vite, que presenta un diseño responsivo y una experiencia de compra fluida.

Features | Características

English

• 🛍️ Browse products with category filtering
• 🔍 Search functionality for products
• 🛒 Shopping cart management
• 📱 Responsive design for all devices
• 🔐 Order tracking system
• ⚡ Real-time cart updates
• 📄 Product detail pages

Español

• 🛍️ Navegación de productos con filtrado por categorías
• 🔍 Funcionalidad de búsqueda de productos
• 🛒 Gestión del carrito de compras
• 📱 Diseño responsivo para todos los dispositivos
• 🔐 Sistema de seguimiento de pedidos
• ⚡ Actualizaciones del carrito en tiempo real
• 📄 Páginas de detalle del producto

Roadmap | Próximos Pasos

English

• 🚧 LocalStorage integration
• 🚧 Dark mode implementation
• 🚧 Unit testing setup
• 🚧 Payment gateway mock

Español

• 🚧 Integración con LocalStorage
• 🚧 Implementación de modo oscuro
• 🚧 Configuración de pruebas unitarias
• 🚧 Simulación de pasarela de pagos

Technologies Used | Tecnologías Utilizadas

• React 18.3
• Vite 4.1
• Tailwind CSS 3.2
• React Router 7.1
• Heroicons 2.2
• Context API

Project Structure | Estructura de Carpetas

├── public/ # Static assets | Recursos estáticos
│ └── ...
├── src/ # Source code | Código fuente
│ ├── Api/ # API handlers | Manejo de API
│ ├── assets/ # Images/icons | Imágenes/íconos
│ ├── Components/ # Reusable UI | Componentes reutilizables
│ ├── Context/ # State management | Gestión de estado
│ ├── Pages/ # View components | Vistas principales
│ ├── Routes/ # Navigation logic | Lógica de navegación
│ └── Utils/ # Helper functions | Funciones auxiliares
└── ...

Getting Started | Comenzando

1. Clone the repository / Clonar el repositorio:

   git clone https://github.com/alirioi/ecommerce-project.git
   

2. Install dependencies and navigate to the project directory / Instalar dependencias y acceder al directorio del proyecto:

   cd ecommerce-project
   npm install
   

3. Set up environment variables if required / Configurar las variables de entorno si es necesario: // ...existing instructions for .env setup...

4. Start the development server / Iniciar el servidor de desarrollo:

   npm run dev
   

5. Open your browser and visit http://localhost:5173 / Abrir el navegador y visitar http://localhost:5173

Learning Context | Contexto de Aprendizaje

English

This project was developed as part of the React with Vite and Tailwind CSS course on Platzi, serving as a practical implementation of core e-commerce concepts. Key learning objectives included:

• State management with Context API
• Dynamic routing with React Router
• Responsive design patterns with Tailwind
• API integration best practices
• Component-based architecture

Español

Este proyecto fue desarrollado como parte del curso React con Vite y Tailwind CSS en Platzi, implementando conceptos clave de comercio electrónico. Los objetivos principales incluyeron:

• Gestión de estado con Context API
• Ruteo dinámico con React Router
• Patrones de diseño responsive con Tailwind
• Mejores prácticas de integración API
• Arquitectura basada en componentes

Contributing | Contribuir

English

1. Fork the repository
2. Create your feature branch:

   git checkout -b feature/AmazingFeature
   

3. Commit your changes:

   git commit -m 'Add some AmazingFeature'
   

4. Push to the branch:

   git push origin feature/AmazingFeature
   

5. Open a Pull Request

Español

1. Haz un fork del repositorio
2. Crea tu rama de características:

   git checkout -b feature/CaracterísticaIncreíble
   

3. Haz commit de tus cambios:

   git commit -m 'Añadir alguna CaracterísticaIncreíble'
   

4. Empuja a la rama:

   git push origin feature/CaracterísticaIncreíble
   

5. Abre un Pull Request

Acknowledgments | Agradecimientos

English

• Platzi Team for comprehensive course structure
• FakeStore API providers for realistic product data
• React Community for maintenance of core libraries
• Vite Team for excellent developer experience
• Tailwind CSS creators for utility-first paradigm

Español

• Equipo de Platzi por la estructura curricular completa
• Proveedores de FakeStore API por datos realistas
• Comunidad React por el mantenimiento de librerías clave
• Equipo de Vite por la excelente experiencia de desarrollo
• Creadores de Tailwind CSS por el paradigma utility-first

License | Licencia

English

This project is licensed under the MIT License - see the LICENSE.md file for details.

Español

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE.md para más detalles.