🎓 Tutorial Interactivo: Estructuras de Programación en C++

Una aplicación web educativa interactiva para aprender estructuras selectivas y repetitivas en C++ mediante ejercicios prácticos y simuladores en tiempo real.

🌟 Características

• 🎮 Simuladores Interactivos: Prueba cada ejercicio en tiempo real sin necesidad de compilar código
• 📚 Tutorial Completo: Explicaciones detalladas de conceptos fundamentales
• 💻 Código C++ Real: Todos los ejercicios incluyen código C++ comentado y explicado
• 🎨 Interfaz Moderna: Diseño limpio y responsive construido con React y Tailwind CSS
• 📱 Totalmente Responsive: Funciona perfectamente en desktop, tablet y móvil

📖 Contenido

Estructuras Selectivas

• Ejercicio 1: Par o Impar - Uso básico de if-else
• Ejercicio 2: Calificaciones - Cadenas if-else if-else para múltiples condiciones

Estructuras Repetitivas

• Ejercicio 3: Par o Impar con Bucle - Ciclo do-while para repetición condicional
• Ejercicio 4: Total de Compra - Ciclo for con acumuladores

🚀 Instalación y Uso

Requisitos Previos

• Node.js (versión 16 o superior)
• npm o yarn

Instalación Local

1. Clona el repositorio:

git clone https://github.com/tu-usuario/tutorial-cpp-estructuras.git
cd tutorial-cpp-estructuras

2. Instala las dependencias:

npm install

3. Inicia el servidor de desarrollo:

npm run dev

4. Abre tu navegador en http://localhost:5173

🛠️ Tecnologías Utilizadas

• React 18 - Biblioteca de UI
• TypeScript - Tipado estático
• Tailwind CSS - Framework de estilos
• shadcn/ui - Componentes de UI
• Lucide React - Iconos
• Vite - Build tool

📚 Guía de Uso

Para Estudiantes

1. Página Principal: Explora los 4 ejercicios disponibles
2. Tutorial: Lee la teoría completa sobre estructuras selectivas y repetitivas
3. Simuladores: Prueba cada ejercicio con diferentes valores
4. Código: Revisa el código C++ real y las explicaciones

Para Profesores

Esta aplicación es ideal para:

• Clases de introducción a la programación
• Demostración de conceptos de control de flujo
• Práctica interactiva en laboratorio
• Tarea o ejercicios para casa

📂 Estructura del Proyecto

/
├── components/
│   ├── ui/              # Componentes de shadcn/ui
│   ├── Home.tsx         # Página principal
│   ├── Exercise1.tsx    # Ejercicio 1: Par o Impar
│   ├── Exercise2.tsx    # Ejercicio 2: Calificaciones
│   ├── Exercise3.tsx    # Ejercicio 3: Bucle do-while
│   ├── Exercise4.tsx    # Ejercicio 4: Total de compra
│   └── Tutorial.tsx     # Tutorial completo
├── styles/
│   └── globals.css      # Estilos globales
├── App.tsx              # Componente principal
└── README.md            # Este archivo

🎯 Conceptos Cubiertos

Estructuras Selectivas

• if y if-else básicos
• Cadenas if-else if-else
• Operadores de relación (==, !=, >, <, >=, <=)
• Operadores lógicos (&&, ||, !)
• Validación de entrada de datos

Estructuras Repetitivas

• Ciclo while
• Ciclo do-while
• Ciclo for
• Variables acumuladoras
• Variables de control
• Iteración controlada

🤝 Contribuciones

Las contribuciones son bienvenidas. Si deseas mejorar esta aplicación:

1. Haz un Fork del proyecto
2. Crea una rama para tu característica (git checkout -b feature/NuevaCaracteristica)
3. Commit tus cambios (git commit -m 'Agrega nueva característica')
4. Push a la rama (git push origin feature/NuevaCaracteristica)
5. Abre un Pull Request

📝 Mejoras Futuras

• Agregar más ejercicios avanzados
• Incluir estructuras switch-case
• Agregar ejercicios de arrays
• Sistema de progreso y logros
• Modo examen/evaluación
• Exportar resultados en PDF
• Soporte para más lenguajes (Java, Python)

📄 Licencia

Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.

👨‍💻 Autor

Creado por Nailea Falcon con ❤️ para ayudar a estudiantes a aprender programación.

🙏 Agradecimientos

• Basado en ejercicios de lógica de programación en C++ de la Universidad del Valle de México
• Diseñado con fines educativos
• Inspirado en la necesidad de hacer la programación más accesible e interactiva para México

---

📞 Contacto

Si tienes preguntas, sugerencias o encuentras algún error, no dudes en abrir un Issue en GitHub o contactar en X o Instagram @mitcheladaa.

¡Happy Coding a todos! 🚀