Generador de Ideas de Proyectos usando IA y React

🌱 ¿Cómo iniciar este proyecto?

No clones este repositorio porque vamos a utilizar una plantilla diferente.

Recomendamos abrir la plantilla de React utilizando una herramienta de aprovisionamiento como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonar el repositorio de GitHub en tu computadora local usando el comando git clone.

Este es el repositorio que necesitas abrir o clonar:

https://github.com/4GeeksAcademy/react-hello

⚠ ¡Necesitarás tener Node.js instalado si lo haces localmente, pero todo eso ya está instalado en Codespaces o Gitpod!

📝 Instrucciones

Paso 1: Configura el Proyecto

• Configura el proyecto base desde la plantilla de React proporcionada.
• Sigue las instrucciones en el README del repositorio para configurar tu entorno de desarrollo.

Paso 2: Obtén Acceso a la API de ChatGPT

• Regístrate para una cuenta en OpenAI.
• Navega a la sección de API y obtén tu clave API para acceder a ChatGPT.

Paso 3: Crea un Formulario de Entrada

• En tu aplicación React, crea un formulario donde los usuarios puedan especificar el tema o área de interés para ideas de proyectos.

Paso 4: Conecta a la API de ChatGPT

• Utiliza la entrada del usuario para crear un prompt para la API de ChatGPT.
• Realiza una solicitud a la API de ChatGPT cuando se envíe el formulario.

Ejemplo:

1const handleGenerateIdeas = async (topic) => {
2 const prompt = `Proporciona tres ideas de proyectos en el campo de ${topic}.`;
3
4 try {
5   const response = await fetch('https://api.openai.com/v1/engines/text-davinci-003/completions', {
6     method: 'POST',
7     headers: {
8       'Authorization': `Bearer TU_CLAVE_API_DE_OPENAI`,
9       'Content-Type': 'application/json',
10     },
11     body: JSON.stringify({
12       prompt: prompt,
13       max_tokens: 150,
14       n: 1,
15       stop: null,
16       temperature: 0.7,
17     }),
18   });
19
20   const data = await response.json();
21   const generatedText = data.choices[0].text.trim();
22   const ideaList = generatedText.split('\n').filter(idea => idea.trim() !== '');
23   setIdeas(ideaList);
24 } catch (error) {
25   console.error('Error al generar ideas:', error);
26 }
27};

Nota: Recuerda reemplazar 'TU_CLAVE_API_DE_OPENAI' con tu clave API real de OpenAI.

Paso 5: Muestra las Ideas de Proyectos Generadas

• Muestra la lista de ideas de proyectos devueltas por la API al usuario en tu aplicación React.
• Asegúrate de que las ideas se presenten en un formato legible, posiblemente con estilos para mejorar la experiencia del usuario.

Paso 6: Bonus - Mejora la Experiencia del Usuario

• Permite a los usuarios especificar parámetros adicionales, como el número de ideas a generar o el nivel de complejidad.
• Implementa indicadores de carga mientras se procesa la solicitud a la API.
• Agrega manejo de errores para notificar a los usuarios si algo sale mal con la solicitud a la API.

Sección de Bonus

Características Adicionales para Practicar y Mejorar el Proyecto

1. Guardar Ideas: Implementa funcionalidad para guardar o marcar como favoritas las ideas generadas para referencia futura.
2. Compartir Ideas: Agrega una función para compartir las ideas generadas vía correo electrónico o redes sociales.
3. Historial: Mantén un historial de las ideas generadas para que los usuarios puedan revisarlas sin regenerarlas.
4. Prompts Personalizados: Permite a usuarios avanzados ingresar sus propios prompts personalizados para la IA.
5. Estilización: Mejora la apariencia de la aplicación usando CSS o librerías de estilos como Bootstrap o Material-UI.
6. Autenticación de Usuario: Implementa cuentas de usuario para que puedan guardar y acceder a sus ideas en diferentes dispositivos.

¡Explora diferentes mejoras para hacer tu Generador de Ideas de Proyectos más interactivo y amigable para el usuario!