You are an expert full-stack developer and AI assistant tasked with creating a single-page SaaS application called 'Veri Güven' (Data Trust) using React and Tailwind CSS. This application aims to provide users with insights into the reliability of US economic data by tracking key indicators, analyzing potential influencing factors, and alerting users to significant changes.
PROJECT OVERVIEW:
The core problem this application addresses is the growing mistrust and unreliability of US economic data due to factors like political interference, budget cuts in statistical agencies, and declining survey response rates. 'Veri Güven' will serve as a central hub for monitoring the health and trustworthiness of this data. Its value proposition is to empower economists, financial analysts, policymakers, investors, and data scientists with timely, actionable intelligence about data reliability, enabling them to make more informed decisions even when faced with potentially compromised data sources. The application will offer a dynamic dashboard, simulation tools for impact analysis, and an alert system for critical changes.
TECH STACK:
- Frontend Framework: React (using functional components and hooks)
- Styling: Tailwind CSS for rapid UI development and consistent design
- State Management: Zustand for efficient and scalable state management
- Routing: React Router DOM for client-side navigation
- Data Fetching: Axios for making HTTP requests to mock APIs
- UI Components: Headless UI for accessible and customizable components (e.g., Popovers, Tooltips, Modals)
- Icons: Heroicons
- Utilities: Lodash (optional, for utility functions)
CORE FEATURES:
1. **Dashboard View:**
* **User Flow:** Upon loading the app, the user is presented with a central dashboard. This dashboard displays a summary of key economic indicators (e.g., Unemployment Rate, CPI, GDP Growth). Each indicator has an associated 'Reliability Score' (%), a trend indicator (up/down/stable), and a brief status update (e.g., 'Stable', 'Declining', 'Alert'). The overall 'Data Trust Index' for the US economy is prominently displayed.
* **Details:** Clicking on an indicator should allow the user to see historical reliability trends, recent news impacting its reliability, and the primary data source agency.
2. **Reliability Score Calculation (Simulated):**
* **User Flow:** This is an underlying feature. The system continuously (or on a defined schedule, e.g., daily) updates the Reliability Score for each indicator. The score is influenced by factors such as the frequency of updates, recent news sentiment related to the data source agency, political statements concerning the data, changes in agency budgets (simulated), and historical survey response rates (simulated).
* **Details:** The algorithm will use a weighted approach. For MVP, mock data will be used, but the prompt should outline how these factors would contribute to the score. For example, negative news sentiment might decrease the score, while positive budget news might increase it.
3. **Impact Analysis Module:**
* **User Flow:** Users can navigate to the 'Impact Analysis' section. Here, they can select an economic indicator and simulate the effect of hypothetical changes. For instance, they can input a percentage decrease in an agency's budget or a hypothetical drop in survey participation. The module will then display the projected change in the indicator's Reliability Score and its potential impact on the overall 'Data Trust Index'.
* **Details:** This involves a simple input form and a display area for the simulated results. The calculation should be a simplified representation of the scoring algorithm.
4. **Alert System:**
* **User Flow:** Users can configure alerts in the 'Settings' section (or directly from the dashboard by clicking a bell icon on an indicator). They can set thresholds for Reliability Score drops (e.g., alert if score drops by more than 5% in 24 hours) or subscribe to alerts for specific agencies.
* **Details:** When an alert condition is met, a visual notification appears on the dashboard (e.g., a toast message using Headless UI's `Toast` component) and potentially updates the indicator's status on the dashboard.
5. **News Feed Integration (Simulated):**
* **User Flow:** A dedicated section or integrated component on the dashboard shows recent, relevant news headlines that could impact data reliability (e.g., 'White House Criticizes BLS Data Accuracy', 'Census Bureau Faces Budget Shortfall').
* **Details:** This will display headlines, sources, and publication dates fetched from a mock API.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) with a primary navigation sidebar (collapsible on smaller screens) and a main content area. The dashboard will be the default view.
- **Color Palette:** A professional and trustworthy color scheme. Primary: Dark Blue (#1a202c), Secondary: Teal (#4fd1c5), Accent: Light Gray (#e2e8f0), Alerts: Red (#f56565), Success: Green (#48bb78). Use subtle gradients where appropriate.
- **Typography:** Use a clean, sans-serif font like 'Inter' or 'Roboto'. Maintain a clear hierarchy using font sizes and weights for headings, subheadings, and body text.
- **Component Styling:** Tailwind CSS utility classes for rapid styling. Ensure consistency in spacing, borders, shadows, and interactive element states (hover, focus, active).
- **Responsive Design:** Mobile-first approach. The layout should adapt seamlessly to various screen sizes (mobile, tablet, desktop). Sidebar collapses into a hamburger menu on mobile. Dashboard elements reflow into a single column or stacked layout as needed.
- **Interactivity:** Clear visual cues for interactive elements. Use tooltips for clarifying metrics or icons.
COMPONENT BREAKDOWN:
1. `App.js`: Main application component, sets up routing and global layout.
2. `Layout.js`: Contains the main structure (sidebar, header, content area).
3. `Sidebar.js`: Navigation links (Dashboard, Impact Analysis, Settings). Receives `isOpen` and `onClose` props.
4. `Dashboard.js`: Main view. Fetches and displays overview data. Contains `DataTrustIndexCard`, `IndicatorList`, `NewsFeed`. State managed by Zustand.
5. `DataTrustIndexCard.js`: Displays the main 'Data Trust Index' value and trend. Props: `indexValue`, `trend`.
6. `IndicatorList.js`: Renders a list of `IndicatorCard` components. Props: `indicators` (array).
7. `IndicatorCard.js`: Displays individual economic indicator data (name, score, trend, status). Props: `indicator` (object), `onIndicatorClick` (function).
8. `ImpactAnalysis.js`: Form for simulating changes and displaying results. Contains `SimulationForm` and `SimulationResults`.
9. `SimulationForm.js`: Inputs for selecting indicator, change type, and value. Props: `indicators`, `onSubmitSimulation`.
10. `SimulationResults.js`: Displays the output of the simulation. Props: `originalScore`, `simulatedScore`, `impactPercentage`.
11. `NewsFeed.js`: Displays a list of news items. Props: `newsItems` (array).
12. `NewsItem.js`: Displays a single news item. Props: `item` (object).
13. `Alerts.js`: Configuration for alert settings.
14. `Settings.js`: General application settings.
15. `LoadingSpinner.js`: Reusable spinner component for loading states.
16. `Tooltip.js`: Custom tooltip component (using Headless UI).
DATA MODEL (Zustand Store):
`useStore` = {
// Core economic data
indicators: [
{
id: 'unemployment',
name: 'Unemployment Rate',
agency: 'Bureau of Labor Statistics (BLS)',
currentScore: 85.5, // 0-100
trend: 'up', // 'up', 'down', 'stable'
status: 'Stable',
lastUpdated: '2023-10-26T10:00:00Z',
historicalScores: [ { date: '...', score: '...' }, ... ],
newsImpact: 0.2 // simulated impact score from recent news
},
// ... more indicators (CPI, GDP, etc.)
],
dataTrustIndex: 72.3,
indexTrend: 'down',
// Settings & Alerts
alertThreshold: 5,
alertEnabled: true,
// Mock News Data
newsFeed: [
{
id: 'news1',
title: 'BLS Faces Scrutiny Over Latest Employment Figures',
source: 'Reuters',
date: '2023-10-25T08:30:00Z',
impactScore: -1.5 // Simulated score influencing indicator reliability
},
// ... more news items
],
// Loading and Error States
isLoadingIndicators: false,
isLoadingNews: false,
error: null,
// Actions (async functions to fetch/update data)
fetchIndicators: async () => { ... },
fetchNews: async () => { ... },
simulateImpact: (indicatorId, changes) => { ... }, // Local state update simulation
updateSettings: (settings) => { ... }
}
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out for route changes using `react-transition-group` (optional, or simple CSS fades).
- **Loading States:** Use `LoadingSpinner` component with `opacity` transitions on elements that are being loaded. Skeleton loaders for the dashboard cards if applicable.
- **Hover Effects:** Tailwind's `hover:` variants for buttons, cards, and links. Subtle background color change or shadow lift on hover.
- **Trend Indicators:** Animate the trend arrows (up/down) subtly, perhaps a slight pulse or bounce.
- **Score Updates:** When scores update, consider a brief highlight or color change on the `IndicatorCard` to draw attention to the change.
- **Interactive Charts:** If charts are added later (e.g., for historical scores), ensure smooth transitions for data points and lines.
EDGE CASES:
- **Initial Load (Empty State):** Display `LoadingSpinner` prominently. Once data is potentially fetched but empty, show a clear message like 'No economic data available at this time.'
- **API Errors:** Catch errors during data fetching (using `try...catch` in Zustand actions). Display a user-friendly error message using a toast notification or a dedicated error banner. Include a 'Retry' button.
- **Data Validation:** Although using mock data, the app structure should anticipate validation. For example, ensure simulated inputs are numbers, percentages are within bounds (0-100).
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes for dynamic content and interactive components (especially those from Headless UI). Keyboard navigation must be fully supported. Color contrast ratios should meet WCAG AA standards.
- **Offline Mode:** (Future consideration) - Could potentially cache data using Service Workers.
- **No Data Sources:** Handle cases where specific agencies might stop reporting.
SAMPLE DATA (Mock Data for API Responses / Initial State):
```json
{
"indicators": [
{
"id": "unemployment",
"name": "Unemployment Rate",
"agency": "Bureau of Labor Statistics (BLS)",
"currentScore": 85.5,
"trend": "up",
"status": "Stable",
"lastUpdated": "2023-10-26T10:00:00Z",
"historicalScores": [
{"date": "2023-10-25", "score": 86.0},
{"date": "2023-10-24", "score": 85.5}
],
"newsImpact": 0.2
},
{
"id": "cpi",
"name": "Consumer Price Index (CPI)",
"agency": "Bureau of Labor Statistics (BLS)",
"currentScore": 78.2,
"trend": "down",
"status": "Declining",
"lastUpdated": "2023-10-26T09:30:00Z",
"historicalScores": [
{"date": "2023-10-25", "score": 80.0},
{"date": "2023-10-24", "score": 81.5}
],
"newsImpact": -1.1
},
{
"id": "gdp",
"name": "Gross Domestic Product (GDP)",
"agency": "Bureau of Economic Analysis (BEA)",
"currentScore": 70.1,
"trend": "stable",
"status": "Caution",
"lastUpdated": "2023-10-25T15:00:00Z",
"historicalScores": [
{"date": "2023-10-24", "score": 70.5}
],
"newsImpact": 0.0
}
],
"dataTrustIndex": 72.3,
"indexTrend": "down"
}
// Mock News Feed Data
{
"newsFeed": [
{
"id": "news1",
"title": "BLS Faces Scrutiny Over Latest Employment Figures",
"source": "Reuters",
"date": "2023-10-25T08:30:00Z",
"impactScore": -1.5
},
{
"id": "news2",
"title": "BEA Announces Revised GDP Growth Data Amidst Budget Concerns",
"source": "Bloomberg",
"date": "2023-10-24T11:00:00Z",
"impactScore": -0.8
},
{
"id": "news3",
"title": "Government Agrees to Modest Budget Increase for Statistical Agencies",
"source": "Associated Press",
"date": "2023-10-20T16:00:00Z",
"impactScore": 0.5
}
]
}
```
DEPLOYMENT NOTES:
- **Build Tool:** Vite (for React) - provides fast development server and optimized production builds.
- **Environment Variables:** Use `.env` files (e.g., `.env.local`) for API base URLs or any sensitive keys (though none are strictly needed for this mock setup). Prefix variables with `VITE_` (e.g., `VITE_API_URL`).
- **Performance Optimizations:**
- Code Splitting: Vite handles this automatically for route-based chunks.
- Memoization: Use `React.memo` for components that re-render unnecessarily. Use `useMemo` and `useCallback` where appropriate.
- Image Optimization: If images were used, optimize them and use appropriate formats.
- Bundle Analysis: Use tools like `rollup-plugin-visualizer` to analyze bundle size and identify potential optimizations.
- **Hosting:** Suggest static hosting platforms like Vercel, Netlify, or GitHub Pages for easy deployment.
- **CI/CD:** Recommend setting up a basic CI/CD pipeline using GitHub Actions to automate testing and deployment on push/merge events.