E-commerce_Frontend es una aplicación web que ofrece a los clientes una experiencia de compra en línea. Permite explorar, seleccionar productos y realizar transacciones. La aplicación se conecta al E-commerce_Backend para gestionar la lógica del servidor y garantizar una experiencia fluida. Utiliza una API externa para obtener información actualizada sobre productos, precios, inventario y envío.
Estos son solo ejemplos básicos, ajusta y amplía según las necesidades específicas de tu proyecto.
Fake Store E-commerce (Esta página de inicio de noticias ha sido cuidadosamente diseñada con un enfoque en la simplicidad y funcionalidad. Además, constituye un proyecto valioso para perfeccionar las habilidades en CSS Grid. )
Asegúrate de tener Node.js y npm instalados en tu máquina. Node.js y que se ejecute con npm (Normalmente viene con Node.js)
-
Clona este repositorio
git clone https://github.com/Cristian0813/E-commerce_Frontend.git
-
Navega al directorio del proyecto
cd E-commerce_Frontend -
Instala las dependencias de Vite
npm install -
Ejecutar el servidor de desarrollo con
npm run dev -
Construir la aplicación para producción con
npm run build
Esto iniciará la aplicación en modo de desarrollo. Abre http://localhost:3000 en tu navegador para ver la aplicación. Ahora se clona el repositorio Backend y sigue las instrucciones
Asegúrate de instalar las siguientes dependencias antes de ejecutar la aplicación:
Instala React Router Dom para gestionar la navegación en la aplicación.
npm install react-router-domConsulta la documentación de React Router Dom para obtener más información.
Integra Bootstrap 5.3.2 con Vite para una interfaz de usuario atractiva y receptiva.
npm install react-router-domSigue la documentación de Bootstrap y la documentación de Vite para una configuración óptima.
Añade Font Awesome para obtener iconos impresionantes en tu aplicación.
npm i --save @fortawesome/fontawesome-svg-corePor favor, revisa la documentación de Font Awesome para más detalles.
Redux con React Redux
Incorpora Redux y React Redux para gestionar el estado de la aplicación de manera eficiente.
npm install @reduxjs/toolkit react-reduxConsulta la documentación de Redux y React Redux para obtener información detallada sobre su implementación.
Nota: Para Redux y React Redux, es necesario instalar ambos paquetes complementarios. Estas dependencias son esenciales para el funcionamiento adecuado de la aplicación. Asegúrate de revisar las respectivas documentaciones para una implementación correcta.
Utiliza Axios para realizar solicitudes HTTP en tu aplicación.
npm install axiosSigue la documentación de Axios para entender cómo integrarlo en tu proyecto.
¡Agradecemos tu interés en contribuir al desarrollo de esta aplicación! Sigue estos pasos para colaborar de manera efectiva:
-
Fork del Proyecto: Haz un fork del repositorio desde la interfaz de GitHub. Esto creará una copia del proyecto en tu cuenta.
-
Crea una Nueva Rama: Crea una nueva rama para tu funcionalidad o corrección utilizando el siguiente comando:
git checkout -b feature/nueva-funcionalidad
Asegúrate de utilizar un nombre descriptivo para tu rama.
-
Realiza tus Cambios: Implementa las modificaciones necesarias en tu nueva rama. Añade, modifica o elimina el código según sea necesario.
-
Haz Commit de tus Cambios: Utiliza el siguiente comando para realizar un commit con un mensaje descriptivo:
git commit -m 'Agrega nueva funcionalidad' -
Haz Push a la Rama: Sube tus cambios a tu fork del repositorio en GitHub:
git push origin feature/nueva-funcionalidad
-
Abre un Pull Request (PR): Visita la página de tu repositorio en GitHub y selecciona la rama que acabas de crear. Haz clic en el botón "New Pull Request" para abrir un nuevo PR.
- Asegúrate de proporcionar información detallada sobre los cambios realizados.
- Si es relevante, menciona problemas relacionados o funcionalidades afectadas.
- Sé claro y conciso en tu descripción para facilitar la revisión del PR.
-
Espera la Revisión: Los colaboradores revisarán tu PR y proporcionarán comentarios o sugerencias. Sé receptivo a las sugerencias y realiza ajustes según sea necesario.
¡Gracias por tu contribución! Tu esfuerzo ayuda a mejorar esta aplicación y beneficia a toda la comunidad.
Recuerda reemplazar 'http://localhost:3000/apiRouter/products' con la URL real de tu API. Este ejemplo muestra cómo utilizar useEffect para realizar la solicitud al montar el componente y actualiza el estado local con los datos obtenidos. Puedes adaptar este código según las necesidades específicas de tu aplicación.
const response = await axios.get('http://localhost:3000/apiRouter/products', { withCredentials: true });const response = await axios.get(`http://localhost:3000/apiRouter/products/${id}`, { withCredentials: true });
Este proyecto está bajo la Licencia MIT