FIFTHGENTASK

Project Overview

This project consists of a backend and a frontend. The backend is responsible for handling TCP/IP communication and device management, while the frontend provides a user interface for interacting with the devices.I use Google ,chatGPT , Stack overflow and other tools to write better code and for testing code and to understand problem. But I know how its working and its working in my Laptop.

Right now front will show only your data on screen beacuse we don't have real data (i commented down few fuctions which requied real time data),But you can test the data,just run test command (given in the last) to check backend with out run backend.

Backend

The backend, located in the backend_device_man_back directory, supports TCP/IP communication, communicates with multiple devices simultaneously, and allows for future additions of communication protocols. It also includes unit tests and a stub to test TCP/IP communication.

Frontend

The frontend, located in the frontend/device-management directory, is a React application that provides a user interface for managing devices, displaying real-time data, and handling user interactions.

Project Structure

Backend

backend_device_man_back/
├── config/
│ └── config.env
├── database/
│ └── dbcollection.js
├── handlers/
│ └── TCPHandler.js
├── model/
│ └── deviceSchema.js
├── routes/
│ └── deviceRoutes.js
├── services/
│ └── communicationService.js
├── test/
│ ├── e2e/
│ │ └── server.test.js
│ ├── name/
│   └── communicationService.test.js
│ └── unit/
│   └── TCPHandler.test.js
├── app.js
└── index.js

Frontend

frontend/device-management/
├── public/
├── src/
│ ├── components/
│ │ ├── DeviceForm.js
│ │ ├── DeviceList.js
│ │ ├── RealTimeData.js
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTests.js
├── .gitignore
├── package-lock.json
└── package.json

Setup and Installation

Prerequisites

• Node.js
• npm (Node Package Manager)
• MongoDB "You have to change with your local database"

Backend

1. Navigate to the backend directory:

   cd backend_device_man_back

2. Install the dependencies:

   npm install

3. Create a .env file in the config directory and add your environment variables:

   MONGO_URI=<your_mongodb_url>
   

4. Run the backend server:

   npm run dev

Frontend

1. Navigate to the frontend directory:

   cd frontend/device-management

2. Install the dependencies:

   npm install

3. Run the frontend development server:

   npm start

Usage

Once both the backend and frontend servers are running, you can interact with the application by navigating to http://localhost:3000 in your web browser.

Testing

Backend

1. Run the backend tests:

   npm test:run