You are tasked with building a single-page responsive web application that visualizes and analyzes global renewable energy capacity growth against fossil fuel additions and evolving energy demand, specifically in the context of climate goals. The application aims to provide clear, actionable insights based on data from reputable sources like IRENA. The target audience includes environmentally conscious individuals, sustainability professionals, energy sector experts, policymakers, investors, and students.
## PROJECT OVERVIEW:
The core purpose of this application, tentatively named 'Yeşil Enerji İzleyici' (Green Energy Tracker), is to provide a clear, data-driven overview of the global transition towards renewable energy. It addresses the growing concern that despite significant growth in renewables, the overall pace might not be sufficient to meet climate commitments due to continued fossil fuel expansion and rising energy demands (e.g., from AI). The application will offer interactive visualizations, key performance indicators (KPIs) tracking progress towards climate goals, and automated data updates from sources like IRENA. The value proposition lies in offering a consolidated, easy-to-understand platform that empowers users to track the real progress of global energy sustainability and identify potential shortcomings.
## TECH STACK:
- **Framework:** React (using Vite for a fast development experience)
- **Styling:** Tailwind CSS for rapid, utility-first styling.
- **State Management:** Zustand for efficient global and local state management.
- **Charting Library:** Chart.js (or Recharts) for interactive data visualizations.
- **Data Fetching:** `fetch` API or Axios for asynchronous data requests.
- **Routing (if needed for future expansion):** React Router DOM (for this MVP, a single page is sufficient).
- **Deployment:** Netlify or Vercel for seamless CI/CD.
## CORE FEATURES:
1. **Global Renewable Capacity Dashboard:**
* **User Flow:** Upon loading the app, the user is presented with a main dashboard. The primary visualization shows the current global installed electricity capacity breakdown (Renewables vs. Fossil Fuels). A prominent section highlights the percentage of new capacity additions that were renewable in the last recorded year. A line graph shows the historical trend of renewable capacity growth over the past 5-10 years.
* **Details:** Interactive charts allowing users to hover over data points to see specific values (e.g., GW added, percentage change). Key metrics like 'Total Renewable Capacity %', 'New Capacity Additions (GW)', and 'Renewable % of New Additions' are displayed clearly.
2. **Fossil Fuel & Demand Tracker:**
* **User Flow:** A dedicated section or tab on the dashboard displays data related to fossil fuel capacity additions and overall global electricity demand trends. This provides context to the renewable growth figures.
* **Details:** Simple bar charts or line graphs showing fossil fuel additions (GW) and overall energy demand growth (%). This section helps users understand the 'muddying the math' aspect mentioned in the source.
3. **Climate Goal Progress (KPI Tracker):**
* **User Flow:** A distinct area showcases key performance indicators (KPIs) related to global climate commitments (e.g., Paris Agreement targets). This could include metrics like 'Required Annual Renewable Growth Rate vs. Actual' or 'Projected Year to Reach 50% Renewables vs. Target Year'.
* **Details:** Progress bars or clear numerical displays showing the gap between current trajectory and target goals. These KPIs should be calculated based on historical data and projections.
4. **Automated Data Updates & Sources:**
* **User Flow:** A subtle indicator (e.g., 'Last Updated: [Date]') shows when the data was last refreshed. A link to the data source (e.g., IRENA report) is provided.
* **Details:** The application should simulate data fetching from a mock API endpoint that returns updated JSON data periodically or upon user request (for MVP, a manual refresh button is acceptable). The data model should be flexible enough to accommodate future real API integrations.
5. **Customizable Alerts (Future MVP/V2):**
* **User Flow:** (Conceptual for MVP) Users could notionally set preferences to be notified when significant milestones are reached or when progress deviates from targets.
* **Details:** This would involve a notification system, likely requiring backend infrastructure for a real-world app, but can be simulated with client-side logic for the MVP.
## UI/UX DESIGN:
- **Layout:** Single-page application (SPA) with a clean, modern, and intuitive layout. A persistent navigation sidebar (collapsible on smaller screens) for accessing different dashboard sections (Overview, Fossil Fuel Tracker, KPIs). Main content area displays charts and key metrics.
- **Color Palette:** Primary colors: Shades of green (representing nature, growth, renewables) and blue (representing stability, technology, sky). Accent colors: Yellow/orange for solar, grey for fossil fuels, and a neutral white/off-white background. Use red sparingly for warnings or negative trends.
- **Typography:** A clean, readable sans-serif font family (e.g., Inter, Poppins). Clear hierarchy using font sizes and weights for headings, subheadings, and body text.
- **Responsive Design:** Mobile-first approach. Layout should adapt gracefully to various screen sizes (mobile, tablet, desktop). Charts should be responsive and resize appropriately. Use Tailwind CSS's responsive prefixes (sm:, md:, lg:, xl:) extensively.
- **Interactivity:** Charts should be interactive with hover effects. Buttons and clickable elements should have clear visual states (hover, active, disabled).
## COMPONENT BREAKDOWN:
- **`App.js`:** Main application component. Manages overall layout, routing (if implemented), and fetches initial data.
- Props: None
- Responsibilities: Root component, layout structure.
- **`Header.js`:** Application header with title and potentially a refresh button or last updated timestamp.
- Props: `lastUpdated` (string)
- Responsibilities: Branding, global actions.
- **`Sidebar.js`:** Collapsible navigation menu.
- Props: `isOpen` (boolean), `onClose` (function)
- Responsibilities: Navigation between sections.
- **`DashboardOverview.js`:** Displays the main renewable energy capacity charts and metrics.
- Props: `renewableCapacity` (object), `newCapacity` (object), `historicalData` (array)
- Responsibilities: Rendering overview charts and KPIs.
- **`FossilFuelTracker.js`:** Displays fossil fuel additions and demand trends.
- Props: `fossilAdditions` (object), `demandTrends` (object)
- Responsibilities: Rendering context-related charts.
- **`KpiTracker.js`:** Displays progress towards climate goals.
- Props: `kpiData` (array of objects)
- Responsibilities: Visualizing goal progress.
- **`ChartComponent.js`:** Reusable chart component.
- Props: `chartData` (object), `chartOptions` (object), `type` (string - e.g., 'bar', 'line')
- Responsibilities: Abstracting Chart.js/Recharts implementation.
- **`StatCard.js`:** Component to display individual key metrics.
- Props: `title` (string), `value` (string/number), `unit` (string)
- Responsibilities: Displaying single data points.
- **`LoadingSpinner.js`:** Displays a loading indicator.
- Props: None
- Responsibilities: Indicating data fetching state.
- **`ErrorMessage.js`:** Displays error messages.
- Props: `message` (string)
- Responsibilities: Handling and displaying errors.
## DATA MODEL:
- **State Structure (using Zustand):**
```javascript
// src/store.js
import create from 'zustand';
export const useStore = create(set => ({
// Data
renewableCapacity: null,
newCapacityStats: null,
fossilAdditions: null,
demandTrends: null,
kpiData: null,
historicalRenewableData: null,
loading: false,
error: null,
lastUpdated: null,
// Actions
fetchData: async () => {
set({ loading: true, error: null });
try {
// Simulate API call
const response = await fetch('/api/data'); // Mock API endpoint
if (!response.ok) throw new Error('Failed to fetch data');
const data = await response.json();
set({
renewableCapacity: data.renewableCapacity,
newCapacityStats: data.newCapacityStats,
fossilAdditions: data.fossilAdditions,
demandTrends: data.demandTrends,
kpiData: data.kpiData,
historicalRenewableData: data.historicalRenewableData,
lastUpdated: new Date().toLocaleString(),
loading: false,
});
} catch (error) {
set({ error: error.message, loading: false });
}
},
}));
```
- **Mock API Endpoint (`/api/data`):** This would be a simple JSON file or a mock server endpoint returning data in the following structure:
```json
{
"renewableCapacity": {
"totalPercentage": 49.4,
"variablePercentage": 35.0,
"label": "Global Renewable Capacity"
},
"newCapacityStats": {
"year": 2025,
"totalNewCapacityGW": 692,
"renewableNewCapacityGW": 590,
"renewablePercentageOfNew": 85.6,
"growthYearOverYearPercent": 15.5,
"solarPercentageOfRenewable": 75.0
},
"fossilAdditions": {
"year": 2025,
"totalFossilCapacityGW": 102,
"percentageOfNew": 14.4
},
"demandTrends": {
"year": 2025,
"demandGrowthPercent": 3.5
},
"kpiData": [
{
"id": "renewable_target_gap",
"title": "Renewable Growth vs. Climate Target",
"currentValuePercent": 15.5,
"targetValuePercent": 20.0,
"unit": "%",
"status": "behind"
},
{
"id": "fossil_reduction_needed",
"title": "Fossil Fuel Capacity Reduction Needed",
"currentValueGW": -50,
"targetValueGW": -100,
"unit": "GW",
"status": "behind"
},
{
"id": "net_zero_year",
"title": "Projected Year for 100% Renewables",
"currentValueYear": 2070,
"targetValueYear": 2050,
"unit": "Year",
"status": "behind"
}
],
"historicalRenewableData": [
{"year": 2020, "capacityGW": 1200, "percentageOfTotal": 38.0},
{"year": 2021, "capacityGW": 1450, "percentageOfTotal": 40.5},
{"year": 2022, "capacityGW": 1750, "percentageOfTotal": 43.2},
{"year": 2023, "capacityGW": 2100, "percentageOfTotal": 46.0},
{"year": 2024, "capacityGW": 2500, "percentageOfTotal": 48.5},
{"year": 2025, "capacityGW": 2950, "percentageOfTotal": 49.4}
]
}
```
## ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Charts will have subtle hover effects to highlight data points. Buttons and navigation links will have subtle background or border changes on hover.
- **Transitions:** Smooth transitions for elements appearing/disappearing (e.g., sidebar opening/closing, error messages fading in/out). Use CSS transitions for these.
- **Loading States:** Display `LoadingSpinner.js` component when `loading` state is true. Disable interactive elements while loading.
- **Micro-interactions:** Subtle animations on KPI progress bars filling up. A slight bounce or scale effect on chart elements when they are first rendered.
## EDGE CASES:
- **Empty State:** If data fetching fails or returns empty results, display a user-friendly message using `ErrorMessage.js` (e.g., 'Data could not be loaded. Please try again later.'). The `kpiData` array might be empty initially; the `KpiTracker` should handle this gracefully, perhaps showing a 'No KPI data available' message.
- **Error Handling:** Implement `try...catch` blocks for all asynchronous operations (API calls). Display specific error messages to the user via `ErrorMessage.js`.
- **Validation:** Primarily server-side validation for real APIs. For the MVP using mock data, ensure the data structure is consistent. If user inputs were involved (e.g., setting custom targets), client-side validation using libraries like `yup` or simple checks would be necessary.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure sufficient color contrast. Add ARIA attributes where necessary (e.g., for interactive elements, screen reader navigation). Charts should ideally have text alternatives or summaries.
## SAMPLE DATA (See Data Model section for detailed JSON structure):
1. **`renewableCapacity`:** `{ "totalPercentage": 49.4, "variablePercentage": 35.0, "label": "Global Renewable Capacity" }`
2. **`newCapacityStats`:** `{ "year": 2025, "renewablePercentageOfNew": 85.6, "solarPercentageOfRenewable": 75.0 }`
3. **`fossilAdditions`:** `{ "year": 2025, "totalFossilCapacityGW": 102 }`
4. **`kpiData` (Example Item):** `{ "id": "renewable_target_gap", "title": "Renewable Growth vs. Climate Target", "currentValuePercent": 15.5, "targetValuePercent": 20.0, "unit": "%", "status": "behind" }`
5. **`historicalRenewableData` (Array Snippet):** `[ {"year": 2023, "capacityGW": 2100, "percentageOfTotal": 46.0}, {"year": 2024, "capacityGW": 2500, "percentageOfTotal": 48.5} ]`
6. More examples for `fossilAdditions`, `demandTrends`, and additional `kpiData` entries.
## DEPLOYMENT NOTES:
- **Build:** Configure Vite for production build (`npm run build`). Ensure the `index.html` and bundled assets are correctly generated.
- **Environment Variables:** Use `.env` files for managing environment variables (e.g., API URLs if not using mock data). Prefix variables with `VITE_` for Vite.
- **Performance Optimizations:**:
- Code Splitting: Vite handles this automatically for route-based splitting if React Router is used. For a SPA, ensure components are not unnecessarily large.
- Image Optimization: If any static images are used, optimize them.
- Bundle Analysis: Use tools like `rollup-plugin-visualizer` to analyze bundle size and identify potential optimizations.
- Memoization: Use `React.memo`, `useMemo`, `useCallback` judiciously to prevent unnecessary re-renders, especially in frequently updated components or large lists.
- **Mock API:** For local development and MVP, create a `mockApi.json` file in the `public` directory and fetch from `/mockApi.json`. Alternatively, use tools like `msw` (Mock Service Worker) for more robust mocking.