spore-ui/README.md

SPORE UI

A modern web interface for monitoring and managing SPORE embedded systems.

Features

• 🌐 Cluster Monitoring: Real-time view of all cluster members
• 📊 Node Details: Expandable cards with detailed system information
• 🚀 Modern UI: Beautiful glassmorphism design with smooth animations
• ⚡ Auto-refresh: Keeps data current every 30 seconds
• 📱 Responsive: Works on all devices and screen sizes

Project Structure

spore-ui/
├── index.js                 # Express.js backend server
├── api/
│   └── openapi.yaml        # API specification
├── src/
│   └── client/             # SPORE API client library
│       ├── index.js        # Main client class
│       ├── package.json    # Client package info
│       ├── README.md       # Client documentation
│       └── example.js      # Usage examples
├── public/                 # Frontend files
│   ├── index.html         # Main HTML page
│   ├── styles.css         # All CSS styles
│   ├── script.js          # All JavaScript functionality
│   └── README.md          # Frontend documentation
└── README.md              # This file

Completed Tasks

• bootstrap an express.js app that serves a simple html page
• generate js client from api/openapi.yaml
• use getClusterStatus client function to get all members and display these members on the html page, use only vanilla JS
• when clicking on one of the members in the UI, it should expand and display all informations from /api/node/status
• create separate files for CSS and JS

Getting Started

1. Install dependencies: npm install
2. Start the server: npm start
3. Open in browser: http://localhost:3001

API Endpoints

• / - Main UI page
• /api/cluster/members - Get cluster member information
• /api/tasks/status - Get task status
• /api/node/status - Get system status
• /api/node/status/:ip - Get status from specific node

Technologies Used

• Backend: Express.js, Node.js
• Frontend: Vanilla JavaScript, CSS3, HTML5
• API: SPORE Embedded System API
• Design: Glassmorphism, CSS Grid, Flexbox