{"id":29806540,"url":"https://github.com/katavinanguyen/cloud-infrastructure-cost-tracking-dashboard","last_synced_at":"2026-04-07T09:31:24.237Z","repository":{"id":305045362,"uuid":"1021568251","full_name":"KatavinaNguyen/cloud-infrastructure-cost-tracking-dashboard","owner":"KatavinaNguyen","description":"Simulated cloud infrastructure cost tracking dashboard built with React and Spring Boot. Visualizes usage trends and cost breakdowns across engineering teams, featuring mock data ingestion, dynamic reporting, and modular microservice architecture, all containerized with Docker and deployable via Kubernetes.","archived":false,"fork":false,"pushed_at":"2025-07-18T05:08:50.000Z","size":225,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-28T14:19:12.447Z","etag":null,"topics":["backend","cloud-cost-optimization","cloud-infrastructure","docker","frontend","fullstack","infrastructure-monitoring","kubernetes","reactjs","spring-boot"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KatavinaNguyen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-07-17T15:40:59.000Z","updated_at":"2025-07-18T05:08:54.000Z","dependencies_parsed_at":"2025-07-18T03:39:45.868Z","dependency_job_id":"7e5eb77e-2967-4b56-afab-529f2e92159f","html_url":"https://github.com/KatavinaNguyen/cloud-infrastructure-cost-tracking-dashboard","commit_stats":null,"previous_names":["katavinanguyen/cloud-infrastructure-cost-tracking-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KatavinaNguyen/cloud-infrastructure-cost-tracking-dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KatavinaNguyen%2Fcloud-infrastructure-cost-tracking-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KatavinaNguyen%2Fcloud-infrastructure-cost-tracking-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KatavinaNguyen%2Fcloud-infrastructure-cost-tracking-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KatavinaNguyen%2Fcloud-infrastructure-cost-tracking-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KatavinaNguyen","download_url":"https://codeload.github.com/KatavinaNguyen/cloud-infrastructure-cost-tracking-dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KatavinaNguyen%2Fcloud-infrastructure-cost-tracking-dashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31507942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"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":["backend","cloud-cost-optimization","cloud-infrastructure","docker","frontend","fullstack","infrastructure-monitoring","kubernetes","reactjs","spring-boot"],"created_at":"2025-07-28T14:11:08.721Z","updated_at":"2026-04-07T09:31:24.221Z","avatar_url":"https://github.com/KatavinaNguyen.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cloud Infrastructure Cost Tracking Dashboard\n\u003e Cloud infrastructure costs can quickly become difficult to manage as engineering teams grow and operate independently. Resources are provisioned across environments without centralized tracking, and costs spread across compute, storage, and networking services. Without clear visibility, organizations risk overspending and struggle to identify where waste is occurring and how to address it effectively.\n\nThis project simulates a full-stack dashboard that addresses this challenge. It ingests mock usage data for multiple teams, calculates estimated cloud costs, and displays time-based breakdowns through a React UI. The backend is modular, containerized, and structured to reflect how a real cost-tracking system could be deployed and scaled.\n\n## Key Capabilities \nThis project replicates the core components of a cloud cost monitoring system, focused on team-level usage visibility and simplified cost breakdowns. While built with mock data, each feature mirrors the functionality you'd expect in a real infrastructure reporting tool, making it useful for understanding the architecture and tradeoffs behind cost tracking at scale.\n\n**Key capabilities include**:\n- **Usage Data Ingestion**: Parses structured usage data (e.g., CPU hours, storage used) from CSV files, simulating the way infrastructure usage is logged in real cloud environments.\n\n- **Cost Calculation Engine**: Estimates resource costs by applying fixed pricing rules, similar to cloud billing models (e.g., per vCPU/hour or per GB stored).\n\n- **Team Attribution**: Organizes usage records by engineering team, enabling spend analysis at the organizational unit level, which are critical for chargebacks or budget enforcement.\n\n- **Time-Range Filtering**: Allows cost reports to be generated for specific time windows, supporting common workflows like monthly spend reviews or spike detection.\n\n- **Frontend Dashboard**: React UI that displays usage trends, cost summaries, and team-level breakdowns in a clean, responsive layout.\n\n- **Modular Backend Design**: The backend separates ingestion, computation, and reporting into dedicated Spring Boot services to reflect scalable service boundaries.\n\n- **Containerized \u0026 Deployable**: The full stack is containerized with Docker and includes Kubernetes manifests, enabling deployment simulation in a cloud-native environment.\n\n## Architecture Overview\nThe system follows a modular full-stack architecture that mirrors how cloud cost platforms are typically structured in production environments. The backend is responsible for simulating usage ingestion, cost computation, and reporting, while the frontend visualizes that data in an interactive dashboard.\n\n**← COMPONENTS →**\n- Frontend (React)\n  - Renders cost breakdowns, usage summaries, and team-level insights\n  - Sends API requests to the backend to retrieve filtered reports\n  - Built with reusable components for charts, tables, and filters\n- Backend (Spring Boot)\n  - Ingestion Service: Parses sample usage data from CSV into memory (or a stubbed data layer)\n  - Cost Calculation Service: Applies logic to convert usage into estimated costs\n  - Report Generation Service: Aggregates data by team and time window, returning it via a REST API\n- Data Layer\n  - Uses static CSV as a mock data source for usage records\n  - Simulates team ownership, resource types, and usage over time\n- Containerization \u0026 Deployment\n  - Both frontend and backend are containerized with Docker\n  - Includes Kubernetes manifests (`/k8s`) for simulating multi-service orchestration\n\n**← DATA FLOW →**\n```bash\nCSV File → Ingestion Service → Cost Calculation → Report Aggregation → API → React UI\n```\nEach backend module is designed as an independent service to reflect how real-world cost systems are often decomposed for scalability and maintainability.\n\n## Tech Stack\n| **Category**         | **Tools / Technologies**                         |\n| -------------------- | ------------------------------------------------ |\n| **Frontend**         | React, JavaScript (ES6+), Axios, HTML, CSS       |\n| **Backend**          | Spring Boot, Java 17, Spring Data JPA, Thymeleaf |\n| **Testing**          | JUnit, Mockito                                   |\n| **Data Source**      | CSV (sample usage data)                          |\n| **Database**         | MySQL                                            |\n| **Containerization** | Docker, Docker Compose                           |\n| **Deployment**       | Kubernetes (YAML manifests)                      |\n\n## Installation and Setup\nFollow the steps below to run the full-stack dashboard locally using Docker or manually with separate backend and frontend setups.\n\n**← OPTION 1: Run with Docker Compose (Recommended) →**\n```bash\n# Clone the repository\ngit clone https://github.com/KatavinaNguyen/cloud-infrastructure-cost-tracking-dashboard.git\ncd cloud-infrastructure-cost-tracking-dashboard\n\n# Start the full stack (backend + frontend + MySQL)\ndocker-compose up --build\n```\n\n- Backend will be available at: `http://localhost:8080`\n- Frontend UI will be available at: `http://localhost:3000`\n\n**← OPTION 2: Run Manually (Backend + Frontend Separately) →**\n\nStart the Backend\n\n  ```bash\n    cd backend\n    ./mvnw spring-boot:run\n  ```\n    \n- Make sure MySQL is running locally and matches the credentials in `application.properties`.\n     \nStart the Frontend\n\n  ```bash\n    cd frontend\n    npm install\n    npm start\n  ```\n    \n- The React frontend will auto-open at `http://localhost:3000`.\n\n## Running with Docker \nYou can run the entire application stack — backend, frontend, and MySQL — using Docker and Docker Compose. This is the fastest way to simulate a real deployment environment.\n  ```bash\n    # Navigate to the project root\n    cd cloud-infrastructure-cost-tracking-dashboard\n    \n    # Build and start all services\n    docker-compose up --build\n  ```\n\n| Service      | URL                     | Description                     |\n| ------------ | ----------------------- | ------------------------------- |\n| **Frontend** | `http://localhost:3000` | React dashboard UI              |\n| **Backend**  | `http://localhost:8080` | Spring Boot REST API            |\n| **Database** | `localhost:3306`        | MySQL instance with sample data |\n\nThe `docker-compose.yml` file includes:\n- `backend`: Spring Boot application containerized with OpenJDK\n- `frontend`: React app built and served via Nginx\n- `mysql`: MySQL database with sample schema and usage data from `init-db.sql`\n\n```bash\n  # Stop all running containers\n  docker-compose down\n```\n\n## Kubernetes Deployment\nYou can deploy the full application stack to a local or remote Kubernetes cluster using the provided YAML manifests.\n\n**Included Manifests (`/k8s`)**\n| File                       | Purpose                                                      |\n| -------------------------- | ------------------------------------------------------------ |\n| `backend-deployment.yaml`  | Deploys the Spring Boot backend                              |\n| `frontend-deployment.yaml` | Deploys the React frontend (via Nginx)                       |\n| `service.yaml`             | Exposes both frontend and backend services internally        |\n| `configmap.yaml`           | Injects environment variables for backend configuration      |\n| `ingress.yaml`             | Optional ingress configuration (requires ingress controller) |\n\n**Deploy to Local Clusters**\n- `kubectl` should point to cluster: \n  ```bash\n    # Apply all manifests\n    kubectl apply -f k8s/\n  ```\n\n**Accessing the App**\n- If using Minikube: \n  ```bash\n    # Expose the frontend service\n    minikube service frontend-service\n  ```\n- Or use port-forwarding: \n  ```bash\n    # Forward frontend to port 3000\n    kubectl port-forward svc/frontend-service 3000:80\n    \n    # Forward backend to port 8080\n    kubectl port-forward svc/backend-service 8080:8080\n  ```\n\n## Sample Data\nThe application uses mock infrastructure usage data to simulate cost reporting across multiple engineering teams. This data is stored in a CSV file and loaded during startup.\n\n**File Location**\n```bash\n  backend/src/main/resources/data/sample-usage.csv\n```\n\n**Data Format**\nEach row in the CSV represents a usage record for a specific team and resource type:\n\n| team       | resource\\_type | usage\\_amount | timestamp            |\n| ---------- | -------------- | ------------- | -------------------- |\n| team-alpha | compute        | 120.5         | 2024-05-01T10:00:00Z |\n| team-beta  | storage        | 300.0         | 2024-05-01T10:00:00Z |\n| team-alpha | compute        | 140.0         | 2024-05-02T10:00:00Z |\n\n- **team** – Name of the engineering team using the resource\n- **resource_type** – Type of resource (e.g. compute, storage, bandwidth)\n- **usage_amount** – Quantity of resource consumed (e.g. vCPU hours, GB stored)\n- **timestamp** – When the resource usage occurred\n\n**How It’s Used**\n- The **ingestion service** reads and parses the CSV on startup\n- The **cost calculation service** applies basic pricing logic (e.g. $0.05/vCPU-hour)\n- The **reporting service** aggregates this data into cost reports by team and date\n\n## Future Improvements\nThis project is intended as a prototype for exploring how engineering organizations might structure a cost tracking system. While it simulates core concepts effectively, there are several areas where the system could be extended or made more realistic:\n\n- **Dynamic Data Ingestion**: Replace static CSV files with real-time data ingestion from cloud billing APIs or usage logs.\n- **Persistent Storage**: Integrate a real database layer with write/read operations instead of relying on in-memory or mock data.\n- **Authentication \u0026 Role-Based Access**: Add login functionality and support for multiple user roles (e.g., engineers, finance teams, admins).\n- **Advanced Cost Modeling**: Support more granular pricing structures, tiered billing, reserved instances, and usage discounts.\n- **Alerting \u0026 Budgets**: Allow users to define cost thresholds and receive alerts when team spend approaches limits.\n- **Environment Awareness**: Break down usage not just by team, but also by environment (e.g., dev, staging, production).\n- **Cloud Provider Integration**: Simulate or connect to provider-specific APIs (e.g., AWS Cost Explorer, GCP Billing) to model actual cost mappings.\n\n## License \nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatavinanguyen%2Fcloud-infrastructure-cost-tracking-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkatavinanguyen%2Fcloud-infrastructure-cost-tracking-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatavinanguyen%2Fcloud-infrastructure-cost-tracking-dashboard/lists"}