Project: Basic E-commerce for Online Courses

Language Options:

• Español (Spanish)
• English (Inglés)

---

Project: Basic E-commerce for Online Courses

This is a project for an online course platform, where users can explore and select courses from different categories to improve their skills and knowledge. The platform offers a variety of courses taught by experts in various fields.

Key Features:

1. Course Exploration: Users can explore different categories of courses available on the platform. Each category contains a list of related courses.

2. Course Details: By clicking on a course, users can access the course detail page, where they will find detailed information about the course content, duration, cost, and other relevant details.

3. Shopping Cart: Users can add courses to their shopping cart and view the subtotal of their selection before proceeding to checkout.

4. Checkout Process: Once users have selected the desired courses, they can proceed to the checkout process to enroll in the selected courses. They will be provided with various payment options and details to complete the transaction.

Project Structure:

The project is organized into different folders and components:

• components: Contains reusable components used in different parts of the project, such as NavBar, Footer, ItemDetail, ItemList, BuyButton, among others.

• assets: Stores images, icons, and other resources used in the project.

• pages: Contains the main pages of the project, such as the home page, products (courses) page, checkout page, and error 404 page.

• utils: Contains utility files, such as DataContextProvider, which provides a context for sharing course data between different components.

• App.jsx: This is the main entry point of the project, where routes are configured, and components are rendered.

Technologies Used:

The project uses the following technologies and tools:

• React.js: A JavaScript library for building interactive user interfaces and reusable components.

• React Router: For navigation between different pages and managing routes in the application.

• Firebase: For storing and retrieving data, in this case, course data.

• Swiper: A library for implementing interactive sliders and carousels in the application.

How to Run the Project:

1. Clone the project repository on your local machine using git clone.

2. Install the dependencies using npm install.

3. Set up and connect the application with your Firebase project (make sure to create a database with the appropriate structure to store course data).

4. Run the application using npm start.

5. Open your browser and navigate to http://localhost:3000 to see the application in action.

---

Proyecto: E-commerce super básico de Cursos en Línea

Este es un proyecto de una plataforma de cursos en línea, donde los usuarios pueden explorar y seleccionar cursos de diferentes categorías para mejorar sus habilidades y conocimientos. La plataforma ofrece una variedad de cursos impartidos por expertos en distintos campos.

Características principales:

1. Exploración de Cursos: Los usuarios pueden explorar diferentes categorías de cursos disponibles en la plataforma. Cada categoría contiene una lista de cursos relacionados.

2. Detalles del Curso: Al hacer clic en un curso, los usuarios pueden acceder a la página de detalles del curso, donde encontrarán información detallada sobre el contenido, duración, costo y otros detalles relevantes.

3. Carrito de Compras: Los usuarios pueden agregar cursos a su carrito de compras y ver el subtotal de su selección antes de proceder al pago.

4. Proceso de Pago: Una vez que los usuarios han seleccionado los cursos deseados, pueden proceder al proceso de pago para inscribirse en los cursos seleccionados. Se les proporcionará diferentes opciones de pago y detalles para completar la transacción.

Estructura del Proyecto:

El proyecto se organiza en diferentes carpetas y componentes:

• components: Contiene componentes reutilizables utilizados en diferentes partes del proyecto, como el NavBar, Footer, ItemDetail, ItemList, BuyButton, entre otros.

• assets: Almacena imágenes, iconos y otros recursos utilizados en el proyecto.

• pages: Contiene las páginas principales del proyecto, como la página de inicio, la página de productos (cursos), la página de pago y la página de error 404.

• utils: Contiene archivos de utilidad, como el DataContextProvider, que proporciona un contexto para compartir los datos de los cursos entre diferentes componentes.

• App.jsx: Es el punto de entrada principal del proyecto, donde se configuran las rutas y se renderizan los componentes.

Tecnologías Utilizadas:

El proyecto utiliza las siguientes tecnologías y herramientas:

• React.js: Una biblioteca de JavaScript para construir interfaces de usuario interactivas y componentes reutilizables.

• React Router: Para la navegación entre diferentes páginas y la gestión de rutas en la aplicación.

• Firebase: Para el almacenamiento y recuperación de datos, en este caso, los datos de los cursos.

• Swiper: Una biblioteca para implementar sliders y carruseles interactivos en la aplicación.

Cómo Ejecutar el Proyecto:

1. Clona el repositorio del proyecto en tu máquina local utilizando git clone.

2. Instala las dependencias utilizando npm install.

3. Configura y conecta la aplicación con tu proyecto de Firebase (asegúrate de crear una base de datos con la estructura adecuada para almacenar los datos de los cursos).

4. Ejecuta la aplicación utilizando npm start.

5. Abre tu navegador y navega a http://localhost:3000 para ver la aplicación en funcionamiento.

---

ProyectoFinalGallardo