This is a Proof of Concept -> Post and display metrics from frontend to a backend
The structure is a monorepo split in frontend and backend (an API).
Backend is built with FastAPI (Python). It has these features:
- Gets metrics.
- Post metrics to backend.
- Get averages of metrics by day, hour, minute with a range timestamp.
The API has an OpenAPI docs at the endpoins /docs and /redoc.
Frontend is built with React (TypeScript) + Chakra UI (styles) + React-Vis (charts). Ith has these features:
- Gets metrics.
- Post metrics.
- Get averages of metrics by day, hour, minute with a range timestamp.
- Display averages in a Time-Series chart.
- Responsive UI.
The project can be run in two ways:
- Installing and running each service separately
- docker-compose
This option need some steps. The two services need to run in the same machine because there is a CORS with backend (it doesn't affect with localhost).
Python 3.9 is needed and I'll recommend you to use virtual environment. There is a requirements.txt file if you install deps with PIP. If you use poetry, there is a pyproject.toml.
Before run the project create a .env file. There is a dev.env as a example, if you prefer rename this file to .env.
To run use python main.py and you get API running at the port you set in .env file
The front was developed with NODE 16. Is the typical project made with create-react-app and the TypeScript template.
Before run please modify at src/context/MetricsProvider.tsx. You need to set BACKEND const to the correct backend url. If you use dev.env with backend, uncomment the first BACKEND const and comment the second.
Then you can start with npm start.
If you choose this option, run docker-compose up and you get:
- Frontend at 3333 port
- Backend at 8888 port
With docker-compose the project doesn't work well because an unresolved (by me) issue with CORS.