Bloom is a lightweight, self‑hosted monitoring dashboard built with Vue 3, Vite, and Tailwind CSS v4.
It provides a real‑time overview of your services, alert channels, and logs inside a fast, responsive user interface.
- 📊 Interactive dashboard for multiple services
- 🔔 Alert channel configuration (Email / Slack / Telegram / Mattermost)
- 🌓 Automatic dark / light mode toggle
- ⚡ Built with Vite + Vue 3 for instant hot‑reload
- 🎨 Styled with Tailwind v4 (as a Vite plugin)
- 🧹 Linted with ESLint and formatted by Prettier
- 🐳 Ready for containerization or integration with a Crystal‑based backend
| Tool | Purpose |
|---|---|
| Vite + Vue 3 | Front‑end framework & builder |
| Tailwind CSS v4 | Utility‑first styling (Tailwind as a Vite plugin) |
| ESLint 9 | Code linting with Vue rules + flat config |
| Prettier 3 | Automatic code formatting |
| Yarn 4 (Berry) | Package manager |
| Node ≥ 22 | Runtime for development and build |
# Clone the repository
git clone https://github.com/FlorexLabs/bloom.git
cd bloom
# Install dependencies (Yarn 4 recommended)
corepack enable
yarn install
# Start the development server
yarn devThen open http://localhost:5173 in your browser.
bloom/
├─ index.html # entry HTML
├─ vite.config.js # Vite + Tailwind plugin config
├─ src/
│ ├─ App.vue # main Vue component (UI template)
│ ├─ main.js # app entry point
│ ├─ style.css # Tailwind and custom styles
│ └─ assets/ # images / icons
├─ .eslintrc.cjs / eslint.config.js # lint configuration
├─ .prettierrc.json # Prettier rules
├─ README.md # this file
└─ package.json
| Command | Description |
|---|---|
yarn dev |
Start Vite in development mode |
yarn build |
Build for production ( dist/ output ) |
yarn preview |
Preview the production build |
yarn lint |
Run ESLint checks |
yarn lint:fix |
Auto‑fix lint issues |
yarn format |
Format all files with Prettier |
yarn format:check |
Verify format without writing |
Prettier and ESLint keep the codebase consistent.
You can format everything manually:
yarn lint:fix && yarn formator simply enable "Format on Save" in your editor.
| Tool | Version recommended |
|---|---|
| Node | ≥ 22.0.0 |
| Yarn | 4.x (stable) |
| Vite | 7.x |
| Vue | 3.x |
| Tailwind | 4.x |
yarn buildThe build output appears in dist/ and can be served by any static server or your Crystal backend.
To preview:
yarn preview{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.validate": [
"javascript",
"vue"
],
"files.eol": "\n"
}- Fork the repo and create your feature branch:
git checkout -b feature/amazing-edit - Commit your changes using conventional commits:
git commit -m "feat: add cool feature" - Push to the branch and open a Pull Request.
This project is released under the MIT License.
© 2025 Florex Labs.
Built with 💚 for developers who love clear dashboards.