Skip to content

feat(frontend): add React device status dashboard (#6) - #37

Open
2022117144 wants to merge 1 commit into
PiLab-Indonesia:mainfrom
2022117144:feat-react-device-dashboard-issue6
Open

2022117144 wants to merge 1 commit into
PiLab-Indonesia:mainfrom
2022117144:feat-react-device-dashboard-issue6

Conversation

@2022117144

Copy link
Copy Markdown

Summary

Closes #6.

Introduce a minimal, responsive React dashboard under frontend/ for managers to view devices from the existing GET /devices API.

Files matching the requested scope

  • frontend/package.json + lockfile: lightweight React, ReactDOM and esbuild.
  • frontend/public/index.html + frontend/src/index.jsx: static HTML bootstrap and React mount.
  • frontend/src/App.jsx: device list, online/offline status badges, totals, initial loading, empty results, manual refresh, timestamp and actionable API errors.
  • frontend/src/api.js: isolated, validated device API with sensible errors and abort support.
  • frontend/src/index.css: responsive styles.
  • frontend/build.mjs, README and seven API regression tests.

Verification on Windows / Node v24.15.0

  • npm test: 7 passed, 0 failed.
  • npm run build: passed, esbuild emitted public/app.js (221.1 kB) and public/app.css (1.9 kB).
  • git diff --cached --check: passed.

The default API base is http://localhost:8000; at build time REACT_APP_API_BASE overrides it. public/app.js and public/app.css are generated and intentionally gitignored. To run the UI from public/ on a different origin, the backend must explicitly permit that origin via CORS or be served behind a same-origin proxy (documented in the README).

Scope limitation: This is a tested React/API build, not a claim of an end-to-end browser test against live Raspberry Pi hardware or production FastAPI deployment. No cash bounty or acceptance/payment is implied. AI-assisted implementation disclosed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

projects (frontend): add React dashboard for managers (frontend)

1 participant