Dashboard Setup Guide with PowerShell, React, and Docker

Step 1: Install Node.js

To install Node.js, download the installer from Node.js official website. Once installed, verify the installation with the following command in PowerShell:

node -v

Step 2: Install XAMPP

Use the following PowerShell script to download and install XAMPP:

 
# PowerShell script to download and install XAMPP
$xamppDownloadUrl = "https://downloadsapachefriends.global.ssl.fastly.net/8.2.4/xampp-windows-x64-8.2.4-0-VS16-installer.exe"
$installerPath = "$env:TEMP\xampp-installer.exe"

Invoke-WebRequest -Uri $xamppDownloadUrl -OutFile $installerPath
Start-Process -FilePath $installerPath -ArgumentList "/S" -Wait
Start-Process -FilePath "C:\xampp\xampp-control.exe"

Step 3: Set up a React project

Create a new React project by running the following command in PowerShell:

npx create-react-app my-dashboard

Install react-router-dom

Navigate to your project directory and install the required routing module:

cd my-dashboard
npm install react-router-dom

Step 4: Modify App.js

Modify your App.js file to include routing and create components for each app.

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import COAGenerator from './apps/COAGenerator';
import AISTracker from './apps/AISTracker';
import PersonnelHierarchy from './apps/PersonnelHierarchy';
import EmailGenerator from './apps/EmailGenerator';

function Sidebar() {
  return (
    <div className="sidebar">
      <ul>
        <li><Link to="/coa">COA Generator</Link></li>
        <li><Link to="/ais">AIS Tracker</Link></li>
        <li><Link to="/personnel">Personnel Hierarchy</Link></li>
        <li><Link to="/email">Email Generator</Link></li>
      </ul>
    </div>
  );
}

function AppLayout() {
  return (
    <Router>
      <Sidebar />
      <div style={{ marginLeft: '200px', padding: '20px' }}>
        <Routes>
          <Route path="/coa" element={<COAGenerator />} />
          <Route path="/ais" element={<AISTracker />} />
          <Route path="/personnel" element={<PersonnelHierarchy />} />
          <Route path="/email" element={<EmailGenerator />} />
        </Routes>
      </div>
    </Router>
  );
}

export default AppLayout;

Step 5: Integrate API Calls

Here is an example of how you can use fetch to retrieve AIS data from an external API:

const getAISData = async () => {
  const response = await fetch('https://api.vesselfinder.com/vessels?region=Hammerfest&key=YOUR_API_KEY');
  const data = await response.json();
  // Process the AIS data and display
};

Step 6: Run the React app

After making the necessary changes, start your React app by running:

npm start

Step 7: Docker Setup for Backend and Frontend

Create a Docker Compose file to orchestrate your services. Here is an example:

version: '3'
services:
  react-app:
    build: ./my-dashboard
    ports:
      - "3000:3000"

  flowise:
    image: flowise:latest
    ports:
      - "3001:3001"

  ollama:
    image: ollama:latest
    ports:
      - "3002:3002"