Socket.io integration

[martin-markovic]

Summary

This pull request sets up the foundational structure for the project by installing necessary packages and integrating key functionalities. It includes the installation of React, Socket.io-client, and React Router DOM, as well as the setup of an Express server to serve static files and handle WebSocket connections. Additionally, it integrates routing and a dashboard template component on the frontend, and updates server tests to match changes.

Changes

Installation

• Ran npx create-react-app@latest --prefix frontend to install React.
• Installed Socket.io-client with npm install socket.io-client.
• Installed React Router DOM with npm install react-router-dom.

Server Configuration

• Integrated fileURLToPath, dirname, and join to serve static files from the public directory in server.js.
• Added Socket.IO integration with CORS support and implemented a connection event in server.js.

Frontend Configuration

• Integrated DOM elements for rendering chat and included script tags for chat functionality in index.html.
• Implemented event listeners for form and socket to render chat messages in main.js.
• Integrated Router, Routes, and Route into App.js.
• Implemented a Dashboard template component and integrated it into the matching endpoint in App.js.

Testing

• Updated import name to match the change to expressServer in server.test.js.

Testing

• Done manual testing. Unit and integration tests pending.

Additional Information

• The changes made in this pull request lay the groundwork for further development, including additional frontend components and more advanced Socket.IO event handling.
• Future tasks may include enhancing the chat UI, improving error handling, and adding more comprehensive tests.