mate-academy · Csillag61 · May 16, 2025 · May 16, 2025 · mateacademy-ai-mentor · May 16, 2025
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Chat App</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/server/server.js b/server/server.js
@@ -0,0 +1,73 @@
+/* eslint-disable */
+
+const express = require('express');
+const http = require('http');
+const { Server } = require('socket.io');
+
+const app = express();
+const server = http.createServer(app);
+const io = new Server(server, {
+  cors: {
+    origin: 'http://localhost:3000', // Your frontend URL
+    methods: ['GET', 'POST'],
+  },
+});
+
+const rooms = {}; // Stores room names and messages
+
+const cors = require('cors');
+
+app.use(
+  cors({
+    origin: 'http://localhost:3000', // Replace with your frontend URL
+    methods: ['GET', 'POST'],
+    allowedHeaders: ['Content-Type'],
+    credentials: true,
+  }),
+);
+
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+app.use(express.static('public')); // Serve static files from the public directory
+app.use((req, res, next) => {
+  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
+  res.header(
+    'Access-Control-Allow-Headers',
+    'Origin, X-Requested-With, Content-Type, Accept',
+  );
+  next();
+});
+
+app.get('/', (req, res) => {
+  res.send('Server is running!');
+});
+
+io.on('connection', (socket) => {
+  console.log('A user connected');
+
+  socket.on('setUsername', (username) => {
+    socket.username = username;
+  });
+
+  socket.on('joinRoom', (room) => {
+    socket.join(room);
+
+    if (!rooms[room]) {
+      rooms[room] = [];
+    }
+    socket.emit('loadMessages', rooms[room]); // Send previous messages
+  });
+
+  socket.on('sendMessage', ({ room, message }) => {
+    const msg = { author: socket.username, time: new Date(), text: message };
+
+    rooms[room].push(msg);
+    io.to(room).emit('newMessage', msg); // Broadcast to room
+  });
+
+  socket.on('disconnect', () => {
+    console.log('User disconnected');
+  });
+});
+
+server.listen(3000, () => console.log('Server running on port 3000'));
diff --git a/src/components/ChatApp.css b/src/components/ChatApp.css
@@ -0,0 +1,54 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.chat-container {
+  width: 400px;
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.input-field,
+.button {
+  width: 100%; /* Make both elements take full width */
+  padding: 10px;
+  margin: 10px 0;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+.button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #0056b3;
+}
+
+.message-list {
+  margin-top: 10px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.message {
+  background: #007bff;
+  color: white;
+  padding: 8px;
+  margin: 5px 0;
+  border-radius: 5px;
+}
diff --git a/src/components/ChatApp.jsx b/src/components/ChatApp.jsx
@@ -0,0 +1,95 @@
+/* eslint-disable max-len */
+import { useState, useEffect } from 'react';
+import io from 'socket.io-client';
+import './ChatApp.css';
+
+const socket = io('http://localhost:3000', {
+  transports: ['websocket', 'polling'],
+}); // Connect to your backend server
+
+function ChatApp() {
+  const [username, setUsername] = useState(
+    window.localStorage.getItem('username') || '',
+  );
+  const [room, setRoom] = useState('');
+  const [messages, setMessages] = useState([]);
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    socket.on('loadMessages', (prevMessages) => setMessages(prevMessages));
+    socket.on('newMessage', (msg) => setMessages((prev) => [...prev, msg]));
+
+    return () => {
+      socket.off('loadMessages');
+      socket.off('newMessage');
+    };
+  }, []);
+
+  const joinRoom = () => {
+    socket.emit('setUsername', username);
+    socket.emit('joinRoom', room);
+
+    if (typeof window !== 'undefined' && window.localStorage) {
+      window.localStorage.setItem('room', room);
+    }
+    setMessages([]);
+  };
+
+  const sendMessage = () => {
+    if (message.trim() !== '') {
+      socket.emit('sendMessage', { room, message });
+      setMessage('');
+    }
+  };
+
+  return (
+    <div className="chat-container">
+      <input
+        type="text"
+        className="input-field"
+        id="username"
+        autoComplete="username"
+        placeholder="Enter username"
+        value={username}
+        onChange={(e) => {
+          setUsername(e.target.value);
+          window.localStorage.setItem('username', e.target.value);
+        }}
+      />
+      <input
+        type="text"
+        id="room"
+        autoComplete="off"
+        className="input-field"
+        placeholder="Enter room"
+        value={room}
+        onChange={(e) => setRoom(e.target.value)}
+      />
+      <button className="button" onClick={joinRoom}>
+        Join Room
+      </button>
+      <div className="message-list">
+        {messages.map((msg, idx) => (
+          <p key={idx} className="message">
+            <b>{msg.author}</b> [{new Date(msg.time).toLocaleTimeString()}]:{' '}
+            {msg.text}
+          </p>
+        ))}
+      </div>
+      <input
+        type="text"
+        className="input-field"
+        id="message"
+        autoComplete="off"
+        placeholder="Message"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+      />
+      <button className="button" onClick={sendMessage}>
+        Send
+      </button>
+    </div>
+  );
+}
+
+export default ChatApp;
diff --git a/src/index.js b/src/index.js
@@ -1 +1,13 @@
+/* eslint-disable */
 'use strict';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import ChatApp from './components/ChatApp.jsx';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(
+  <React.StrictMode>
+    <ChatApp />
+  </React.StrictMode>,
+);