f24edb74b2
- Profile section: click avatar to upload a personal photo (FileReader preview, hover camera icon overlay), replacing static initials - README.md rewritten with project-specific page status table, dev setup, tech stack, and deployment notes - design-decisions.md: add Settings Page subsection documenting layout, section-switching, and the avatar upload technique Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
39 lines
1.9 KiB
Markdown
39 lines
1.9 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
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`.
|