Home dashboard
Overview
This is the data dashboard of my home server. It is built with React and react-admin, and it sits next to the Dashy start page. Dashy holds the widgets and the buttons. This app is where I actually look at records.
It shows the data that does not fit into a tile, such as the car and its current parking spot, and the list of scanned documents with their categories. All of it comes from my own NestJS API.
The README is honest about one thing. The login that ships with it is the react-admin demo login. It has to be replaced with the real JWT login of the API before the dashboard is used on any network I do not fully trust.
Problem
My home server has a start page with widgets and buttons, but some data does not fit into a tile. I wanted a place where I can look at real records, such as where the car is parked and which documents I have scanned.
Approach
- I built the dashboard with React and react-admin and kept it next to the Dashy start page. Dashy holds the widgets and buttons, and this app is where I look at records.
- I connected it to my own NestJS API, so it has no data of its own.
- I wrote custom list actions, such as the one that finds the car, instead of working around the template.
- I added custom show views and a small shared component for the Google Maps button.
- I kept the base address of the API in one constants file.
Architecture and design decisions
- It is a Vite and TypeScript react-admin application. The code is split into list actions, shared components, data providers, show views and an auth provider.
- It covers two kinds of data: the car with its current parking location, and the list of scanned documents with their categories.
- Inside the Docker network, the API base address points to the API container name on port 3000. The host port is 3001, because that is what the home setup stack publishes.
- For development I run yarn dev. For production, yarn build writes the app to a dist folder, which is served behind the reverse proxy or by the container in the home setup stack.
Reliability and performance
- I wrote down the difference between the container name and the host port, because guessing it breaks a deployment.
- The README warns that the auth provider in the repository is the react-admin demo one. It checks a fixed user from a local JSON file.
- The demo login has to be replaced with the JWT login of the API before the dashboard goes onto a network I do not fully trust.
Outcomes
- I have one place to see the car's parking location and my scanned documents with their categories.
- The dashboard works as an addition to the start page and does not replace it.
- A deployment mistake around ports and container names is documented and easy to avoid.
Known gaps
- The shipped login is a demo. I do not claim this dashboard is safe on an open network until I replace it.
- I have no numbers for load time, data volume or how often I use it.
- It is built for one household. I have not tested it with several users.
- The project itself is private. Third party assets keep their own licences.
- I do not describe the styling or design work, because there is little of it.