🤖 Oráculo dos Games - ChatGPT Clone

Projeto desenvolvido para praticar integração entre Node.js (backend) e React (frontend) com a API da OpenAI, simulando um chat interativo, no estilo do ChatGPT, com tema voltado para o mundo dos games.

---

🚀 Tecnologias Utilizadas

• 💻 Frontend: React.js, CSS
• 🔗 Backend: Node.js, Express.js, Axios, Dotenv
• 🤖 API: OpenAI API
• 🌐 Cors para comunicação entre front e back

---

📦 Estrutura do Projeto

node-react-chatgpt-clone/ ├── server/ --> Backend (Node.js + Express) ├── web/ --> Frontend (React) └── README.md --> Documentação do projeto

---

🔑 Configuração da API da OpenAI

1. Acesse https://platform.openai.com/account/api-keys
2. Crie uma nova chave de API.
3. No diretório /server, crie um arquivo chamado .env com o seguinte conteúdo:

OPENAI_API_KEY=sua-chave-da-openai PORT=5000

---

⚙️ Como Rodar o Projeto

▶️ Backend (Node.js)

1. Acesse a pasta do backend: cd server

2. Instale as dependencias npm install

3. Rode o backend: npm run dev

🔗 O backend estará disponível em: http://localhost:5000

▶️ Frontend (React)

1. Acesse a pasta do frontend: cd web

2. Instale as dependencias npm install

3. Rode o frontend: npm start

🔗 O frontend estará disponível em: http://localhost:3000

🔗 Fluxo de Funcionamento O usuário envia uma mensagem pelo frontend React.

O frontend faz uma requisição HTTP POST para o backend em /chat.

O backend repassa essa mensagem para a API da OpenAI.

A OpenAI processa e retorna uma resposta.

O backend envia essa resposta para o frontend.

O frontend exibe a resposta no chat.

🛠️ Funcionalidades ✅ Chat responsivo

✅ Integração completa com a OpenAI

✅ Arquitetura separada entre backend e frontend

✅ Histórico de conversas na interface

✅ Mensagens estilizadas para usuário e IA

🚀 Aprendizados Como consumir APIs externas usando Node.js e React

Comunicação entre backend e frontend

Manipulação de requisições HTTP (GET/POST)

Gerenciamento de variáveis de ambiente com .env

Estruturação de projetos Fullstack (Node + React)

🧠 Observações Importantes ⚠️ Necessário ter créditos ativos na OpenAI para a API funcionar.

⚠️ Se sua chave não estiver ativa ou válida, o backend retornará erro ao tentar acessar a API.

👩‍💻 Desenvolvido por: Fiama – Projeto DIO de integração de API com Node.js, React e OpenAI. 🚀 Foco em desenvolvimento Fullstack e integração de APIs.