{"id":49231328,"url":"https://github.com/bfloo-app/web-client-dashboard","last_synced_at":"2026-04-24T12:04:25.183Z","repository":{"id":349981307,"uuid":"926138324","full_name":"Bfloo-App/web-client-dashboard","owner":"Bfloo-App","description":"Bfloo Web Dashboard is a modern, responsive SvelteKit application featuring a branded UI, Tailwind CSS, and full PWA support.","archived":false,"fork":false,"pushed_at":"2026-04-24T01:20:40.000Z","size":8298,"stargazers_count":1,"open_issues_count":17,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-24T02:32:36.999Z","etag":null,"topics":["database-management","sveltekit","tailwindcss","web","webapplication"],"latest_commit_sha":null,"homepage":"https://my.bfloo.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bfloo-App.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-02T16:40:27.000Z","updated_at":"2026-04-24T01:18:56.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Bfloo-App/web-client-dashboard","commit_stats":null,"previous_names":["bfloo-app/web-client-dashboard"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/Bfloo-App/web-client-dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bfloo-App%2Fweb-client-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bfloo-App%2Fweb-client-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bfloo-App%2Fweb-client-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bfloo-App%2Fweb-client-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bfloo-App","download_url":"https://codeload.github.com/Bfloo-App/web-client-dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bfloo-App%2Fweb-client-dashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32222483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T10:26:35.452Z","status":"ssl_error","status_checked_at":"2026-04-24T10:25:27.643Z","response_time":64,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["database-management","sveltekit","tailwindcss","web","webapplication"],"created_at":"2026-04-24T12:04:24.170Z","updated_at":"2026-04-24T12:04:25.175Z","avatar_url":"https://github.com/Bfloo-App.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"static/android-chrome-512x512.png\" alt=\"Bfloo Logo\" width=\"128\" height=\"128\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch2\u003eBuild Status\u003c/h2\u003e\n  \u003ca href=\"https://github.com/Bfloo-App/web-client-dashboard/actions/workflows/code-quality.yaml\"\u003e\n    \u003cimg src=\"https://github.com/Bfloo-App/web-client-dashboard/actions/workflows/code-quality.yaml/badge.svg\" alt=\"Project Code Quality Checks\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n# Bfloo Web Client Dashboard\n\nModern SvelteKit-based web dashboard for Bfloo App, built with TypeScript, Tailwind CSS v4, and comprehensive testing.\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Tech Stack](#tech-stack)\n- [Quick Start](#quick-start)\n- [Development](#development)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n  - [Available Scripts](#available-scripts)\n  - [Environment Setup](#environment-setup)\n- [Architecture](#architecture)\n  - [Project Structure](#project-structure)\n  - [Path Aliases](#path-aliases)\n  - [Component Organization](#component-organization)\n- [Testing](#testing)\n  - [Test Structure](#test-structure)\n  - [Running Tests](#running-tests)\n  - [Writing Tests](#writing-tests)\n- [Code Quality](#code-quality)\n  - [Git Hooks](#git-hooks)\n  - [Commit Message Format](#commit-message-format)\n  - [Linting \u0026 Formatting](#linting--formatting)\n- [Deployment](#deployment)\n  - [Docker](#docker)\n  - [Production Build](#production-build)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Overview\n\nThe Bfloo web client dashboard is a modern, responsive web application built to provide a comprehensive dashboard interface for the Bfloo platform. It features a component-based architecture, real-time data visualization, and a responsive design optimized for various screen sizes.\n\n## Tech Stack\n\n- **Framework**: SvelteKit 2 with Svelte 5 (runes syntax)\n- **Build Tool**: Vite 7 with TypeScript\n- **Styling**: Tailwind CSS v4 (via `@tailwindcss/vite` plugin)\n- **Testing**: Vitest with dual environment setup (browser + node)\n- **E2E Testing**: Playwright for end-to-end testing\n- **Deployment**: Node.js adapter with Docker containerization\n- **Code Quality**: ESLint, Prettier, Husky hooks\n- **CI/CD**: GitHub Actions for automated testing and builds\n\n## Quick Start\n\n```sh\n# Clone the repository\ngit clone https://github.com/Bfloo-App/web-client-dashboard.git\ncd web-client-dashboard\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Open in browser\nopen http://localhost:3000\n```\n\n## Development\n\n### Prerequisites\n\n- **Node.js**: \u003e= 18.x\n- **npm**: \u003e= 9.x\n- **Git**: For version control and hooks\n\n### Installation\n\n```sh\n# Install all dependencies\nnpm install\n\n# Initialize Husky git hooks\nnpm run prepare-pre-commit\n\n# Prepare SvelteKit (sync types and generate files)\nnpm run prepare\n```\n\n### Available Scripts\n\n| Command               | Description                                    |\n| --------------------- | ---------------------------------------------- |\n| `npm run dev`         | Start development server with hot reload       |\n| `npm run build`       | Build for production                           |\n| `npm run preview`     | Preview production build locally               |\n| `npm run start`       | Start production server (requires build)       |\n| `npm run check`       | Run TypeScript type checking                   |\n| `npm run check:watch` | Run type checking in watch mode                |\n| `npm run test`        | Run all tests (unit + integration)             |\n| `npm run test:unit`   | Run tests in watch mode                        |\n| `npm run lint`        | Check code formatting and linting              |\n| `npm run lint:fix`    | Fix auto-fixable linting and formatting issues |\n| `npm run format`      | Format code with Prettier                      |\n\n### Environment Setup\n\nCreate a `.env` file in the root directory based on `.env.example`:\n\n```env\n# Environment configuration\nNODE_ENV=development\nPORT=3000\nHOST=localhost\n\n# Add other environment variables as needed\nTEST_SECRET=your_test_secret_here\n```\n\n## Architecture\n\n### Project Structure\n\n```\nsrc/\n├── lib/\n│   ├── assets/\n│   │   ├── icons/          # SVG icon components\n│   │   └── images/         # Static images and imports\n│   ├── components/\n│   │   ├── layouts/        # Layout components (Header, etc.)\n│   │   └── pages/          # Page-specific components\n│   └── types/              # TypeScript type definitions\n├── routes/                 # SvelteKit file-based routing\n├── styles/                 # Global CSS files\n└── app.html               # HTML template\n```\n\n### Path Aliases\n\nConfigure in `svelte.config.js` for clean imports:\n\n```typescript\n// Instead of: import { Header } from '../../../lib/components/layouts'\nimport { Header } from '$components/layouts';\n```\n\n| Alias         | Path                    |\n| ------------- | ----------------------- |\n| `$components` | `src/lib/components`    |\n| `$icons`      | `src/lib/assets/icons`  |\n| `$images`     | `src/lib/assets/images` |\n\n### Component Organization\n\nAll component directories use **barrel exports** via `index.ts` files:\n\n```typescript\n// src/lib/components/layouts/index.ts\nexport { default as Header } from './Header.svelte';\n```\n\n**Adding New Components:**\n\n1. Create the `.svelte` file\n2. Export it in the local `index.ts`\n3. Import using path aliases\n\n## Testing\n\n### Test Structure\n\nDual environment testing setup using Vitest:\n\n- **Browser tests**: Svelte components using `@vitest/browser` + `vitest-browser-svelte`\n- **Node tests**: Utilities, server-side logic, and non-DOM functionality\n- **E2E tests**: Playwright for full application testing\n\n```\ntests/\n├── lib/\n│   ├── components/         # Component unit tests\n│   └── utils/              # Utility function tests\n└── routes/                 # Integration tests for pages\n```\n\n### Running Tests\n\n```sh\n# Run all tests\nnpm run test\n\n# Run tests in watch mode\nnpm run test:unit\n\n# Run with UI (install vitest UI first)\nnpx vitest --ui\n```\n\n### Writing Tests\n\n**Component Testing Pattern:**\n\n```typescript\nimport { render } from 'vitest-browser-svelte';\nimport { expect, test } from 'vitest';\nimport MyComponent from './MyComponent.svelte';\n\ntest('should render correctly', async () =\u003e {\n\trender(MyComponent, { props: { title: 'Test' } });\n\n\tawait expect.element().getByRole('heading').toHaveTextContent('Test');\n});\n```\n\n**Key Testing Practices:**\n\n- Use `data-testid` attributes for complex component selection\n- Prefer accessible selectors (`getByRole`, `getByAltText`)\n- Test both unit behavior and integration functionality\n- Include visual regression tests for critical UI components\n\n## Code Quality\n\n### Git Hooks\n\nAutomated quality checks using [Husky](https://typicode.github.io/husky/):\n\n**Pre-commit Hook:**\n\n1. 🎨 Formats staged files with Prettier\n2. 🔧 Auto-fixes ESLint issues\n3. 🔍 Runs TypeScript type checking\n4. ✅ Re-stages formatted files automatically\n\n**Commit Message Hook:**\n\n- Validates conventional commit format\n- Enforces consistent commit history\n\n### Commit Message Format\n\nFollow [Conventional Commits](https://www.conventionalcommits.org/) specification:\n\n```\n\u003ctype\u003e(\u003cscope\u003e): \u003cdescription\u003e\n\nExamples:\nfeat(dashboard): add user metrics visualization\nfix(nav): resolve mobile menu z-index issue\ndocs(readme): update installation instructions\ntest(header): add navigation accessibility tests\n```\n\n**Commit Types:**\n\n- `feat`: New features\n- `fix`: Bug fixes\n- `docs`: Documentation updates\n- `style`: Code formatting changes\n- `refactor`: Code restructuring\n- `test`: Test additions/modifications\n- `chore`: Maintenance tasks\n- `perf`: Performance improvements\n\n### Linting \u0026 Formatting\n\n**ESLint Configuration:**\n\n- Extends `@eslint/js` recommended rules\n- Svelte-specific linting via `eslint-plugin-svelte`\n- TypeScript integration with `typescript-eslint`\n- Prettier integration for consistent formatting\n\n**Prettier Configuration:**\n\n- Tailwind CSS class sorting via `prettier-plugin-tailwindcss`\n- Svelte template formatting via `prettier-plugin-svelte`\n- Project-specific config in `.prettierrc.project`\n\n## Deployment\n\n### Docker\n\nMulti-stage Docker build for optimized production images:\n\n```sh\n# Build Docker image\ndocker build -t bfloo-web-dashboard .\n\n# Run container\ndocker run -p 3000:3000 bfloo-web-dashboard\n```\n\n**Docker Features:**\n\n- Alpine Linux base for minimal image size\n- Non-root user for security\n- Optimized dependency caching\n- Production-only runtime dependencies\n\n### Production Build\n\n```sh\n# Build for production\nnpm run build\n\n# Preview production build\nnpm run preview\n\n# Start production server\nnpm run start\n```\n\nThe build outputs to the `build/` directory using the Node.js adapter for server-side deployment.\n\n## Contributing\n\n1. **Fork \u0026 Clone**: Create your own fork and clone it locally\n2. **Branch**: Create a feature branch (`git checkout -b feat/amazing-feature`)\n3. **Develop**: Make your changes following the architecture patterns\n4. **Test**: Ensure all tests pass and add new tests for your changes\n5. **Commit**: Use conventional commit messages\n6. **Push**: Push to your fork and create a Pull Request\n\n**Before Contributing:**\n\n- Review existing component patterns\n- Ensure your code follows the established conventions\n- Run the full test suite before submitting\n\n## License\n\nThis project is proprietary software. All rights reserved.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbfloo-app%2Fweb-client-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbfloo-app%2Fweb-client-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbfloo-app%2Fweb-client-dashboard/lists"}