Excellent. You’ve just stepped into a real-world dev team setting.
🧑💼 Team Lead Context:
We’re building InsightBridge – A Data Sync Health Checker. This is a frontend-only Vanilla JS project simulating an internal SaaS dashboard. The system will visualize sync health for different external/internal data sources (CRM, Payments, APIs, etc.), including status, last sync time, and error/success info.
— as shared by the client during the kickoff call and email brief.
InsightBridge: Frontend Data Sync Health Monitor
Build a lightweight web dashboard that helps operations and dev teams monitor the sync health of critical data sources. The dashboard should reflect the latest sync stats, allow drill-downs into failures, and be self-contained using only frontend technologies.
| Feature ID | Feature Name | Description | Done |
|---|---|---|---|
| FR-01 | Data Source Cards | Display a card per data source (e.g., “CRM System”, “Payments API”, etc.). Each card shows:• Source Name• Last Sync Time• Sync Status (Success/Error/Warning)• Records Synced• Success/Failure Ratio | yes |
| FR-02 | Periodic Auto Refresh | Data should auto-refresh every X seconds (simulated with fetch to mock JSON). |
yes |
| FR-03 | Color Coded Health | Status should be color coded:• 🟢 Green = Healthy• 🟡 Yellow = Warnings• 🔴 Red = Errors or outdated syncs | Nope |
| FR-04 | Tooltip Info | Hovering over any sync status should show a tooltip explaining the status (e.g., “Last successful sync was 15 mins ago”) | Nope |
| FR-05 | View Logs Button | Each card should have a button that opens a modal/dialog with simulated sync logs (e.g., "Fetched 320 records at 10:42 AM"). | Yes. . Full. detials. |
| FR-06 | Global Filters | Provide dropdowns to filter data sources by:• Type (e.g., external/internal)• Status (healthy, warning, error) | nope |
| FR-07 | Manual Refresh | Include a “Refresh Now” button to immediately reload all sync statuses. | Finaly. Done |
| Feature ID | Area | Specification |
|---|---|---|
| NFR-01 | Responsiveness | The dashboard must be responsive and usable on both desktop and tablet screens. |
| NFR-02 | Vanilla Only | No frontend frameworks; use Vanilla JS, HTML, CSS only. Optional use of Chart.js/SVG if graphs needed. |
| NFR-03 | Code Modularity | JS should be structured cleanly using module patterns or ES6 modules (separate files). |
| NFR-04 | Mocked API | Use a static JSON file or mock fetch simulation to replicate API behavior (we will plug in the real API later). |