BIS601 Program 5

5. Build a React application to track issues. Display a list of issues (use static data). Each issue should have a title, description, and status (e.g., Open/Closed). Render the list using a functional component.

Step 1: Install Node.js and npm

Before you start, ensure you have Node.js and npm (Node Package Manager) installed on your machine.

• Download and install the latest version of Node.js.
• After installing, you can check the versions of Node.js and npm in the terminal:

node -v
npm -v

Step 2: Create a folder

• Create a folder in any location.
• Open folder in vscode.

Step 3: Open Integrated vscode Terminal

• Type below command in your terminal to create react app.

npx create-react-app issue-tracker

• Once the process is complete, you’ll see a folder named issue-tracker in your directory. Navigate into the folder:

cd issue-tracker

Step 4: Modify the App.js File and App.css file

• Modify the app by editing src/App.js copy the below code and paste it, save it.
• Modify the app by editing src/App.css copy the below code and paste it, save it.

App.js:

import React from 'react';
import './App.css';

const issues = [
  {
    id: 1,
    title: "Bug in login page",
    description: "The login page throws an error when submitting invalid credentials.",
    status: "Open",
  },
  {
    id: 2,
    title: "UI glitch on homepage",
    description: "There is a UI misalignment issue on the homepage for smaller screens.",
    status: "Closed",
  },
  {
    id: 3,
    title: "Missing translation for settings page",
    description: "The settings page is missing translations for the Spanish language.",
    status: "Open",
  },
  {
    id: 4,
    title: "Database connection error",
    description: "Intermittent database connection issue during peak hours.",
    status: "Open",
  },
];

const Issue = ({ title, description, status }) => {
  return (
    <div className="issue">
      <h3>{title}</h3>
      <p>{description}</p>
      <span className={`status ${status.toLowerCase()}`}>{status}</span>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      <h1>Issue Tracker</h1>
      <div className="issue-list">
        {issues.map((issue) => (
          <Issue
            key={issue.id}
            title={issue.title}
            description={issue.description}
            status={issue.status}
          />
        ))}
      </div>
    </div>
  );
};

export default App;

App.css:

.App {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 20px;
}

h1 {
  color: #333;
}

.issue-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.issue {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  margin: 10px;
  width: 80%;
  max-width: 600px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.issue h3 {
  margin: 0 0 10px;
  font-size: 1.5em;
}

.issue p {
  margin: 0 0 10px;
  color: #555;
}

.status {
  font-weight: bold;
}

.status.open {
  color: #e74c3c;
}

.status.closed {
  color: #2ecc71;
}

Step 5: Start the Development Server

Now, you can start the development server by using below command:

npm start

This will start a local development server and automatically open your new React application in your default web browser. The server will reload the page automatically whenever you make changes to your code.

OUTPUT:

“Fixing the Module not found: Error: Can't resolve 'web-vitals' Error in React”

The error you’re seeing occurs because the web-vitals package, which is used for performance monitoring in a React app, is not installed by default in the project or has been removed. Since web-vitals is an optional package, you can safely resolve this issue by either installing the package or removing the code that imports it.

Option 1: Install the web-vitals package
If you want to keep the performance monitoring functionality and resolve the error, simply install the web-vitals package.

1. In the terminal, navigate to your project folder (if not already there):

cd issue-tracker

2. Install web-vitals by running the following command:

npm install web-vitals

3. After installation is complete, restart the development server:

npm start

This should resolve the error, and your application should compile correctly.

Option 2: Remove the Web Vitals Code (If Not Needed)
If you don’t need performance monitoring and want to get rid of the error, you can safely remove the import and usage of web-vitals from your code.

1. Open src/reportWebVitals.js and remove its contents or just comment out the code:

// import { reportWebVitals } from './reportWebVitals';

// You can safely remove the call to reportWebVitals or leave it commented out
// reportWebVitals();

Save the file, and the application should compile without the error. You can now continue developing your app.