b49f8ac8f5
Bookmarks, categories, favorites, quick access, recently added, link health, and category breakdown are now all derived from real backend data instead of hardcoded arrays. Adds an Add Bookmark modal (with inline new-category creation) and a working favorite toggle, both backed by the existing /api/bookmarks endpoints. Adds createBookmarkCategory/updateBookmark to the API client. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF |
||
|---|---|---|
| .github/workflows | ||
| .kiro | ||
| assets | ||
| backend | ||
| pics | ||
| public | ||
| src | ||
| .dockerignore | ||
| .gitignore | ||
| archnest-blueprint.md | ||
| design-decisions.md | ||
| docker-compose.yml | ||
| Dockerfile | ||
| eslint.config.js | ||
| glance.md | ||
| index.html | ||
| nginx.conf | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
ArchNest
A self-hosted ops dashboard — infrastructure monitoring, a bookmark hub for your homelab/cloud links, an embedded terminal, and system settings, all in one place.
Built with React 19 + TypeScript + Vite, styled with Tailwind CSS v4, charts via Recharts, icons via Lucide React.
Pages
| Page | Route | Status |
|---|---|---|
| Glance | / |
Done — main ops dashboard (system status, resource overview, alerts, network traffic) |
| Infrastructure | /infrastructure |
Done — resource distribution, node status grid, cost/trend breakdown. "Network" sub-tab planned as a future addition. |
| BookNest | /booknest |
Done — categorized bookmark hub with quick access, favorites, link health, and category breakdown |
| Terminal | /terminal |
Pending — will be based on a fork of the (archived) Termix project, not yet merged in |
| Settings | /settings |
Done — Profile (incl. avatar upload), Appearance, Integrations, Notifications, Data & Backup, About |
See archnest-blueprint.md for the original per-page design spec and design-decisions.md for the visual/UX conventions and lessons learned while building each page — read that file before making layout changes, it documents why things are built the way they are (hero banner layering, card blend techniques, icon library gotchas, etc.).
Development
npm install
npm run dev
Type-check with npx tsc --noEmit before committing — Vite/the browser surface some runtime errors (e.g. missing icon exports) that the type-checker won't catch, so also smoke-test pages in a browser.
Tech Stack
- React 19 + Vite + TypeScript
- React Router for routing
- Tailwind CSS v4
- Recharts (donuts, line/area charts)
- Lucide React (icons)
- Deploy target: Docker on racknerd1 → NPM proxy at archnest.snsnetlabs.com
Deployment
This project is deployed via Docker on racknerd1, proxied through Nginx Proxy Manager at archnest.snsnetlabs.com.