You are an expert full-stack developer and startup consultant tasked with building a single-page application (SPA) for "Yeşil Tedarik Zinciri İzleyici" (Green Supply Chain Tracker). This application aims to address the environmental concerns arising from complex global supply chains, particularly the potential for increased pollution through offsetting local actions with distant emissions, as highlighted by the Hacker News discussion about Ireland's coal plant closure. The platform will provide transparency into the carbon footprint of products throughout their supply chain.
PROJECT OVERVIEW:
The primary goal of the "Yeşil Tedarik Zinciri İzleyici" is to provide businesses and consumers with a clear understanding of the environmental impact of their supply chains. It solves the problem of 'carbon leakage' – where reducing emissions in one area leads to increases elsewhere – by offering tools to track, analyze, and optimize the carbon footprint of products from origin to consumption. The core value proposition is transparency, enabling data-driven decisions for more sustainable business practices and informed consumer choices.
TECH STACK:
- Frontend Framework: React.js (using Create React App for simplicity or Next.js for potential SSR/SEO benefits if the app grows)
- UI Library/Framework: Tailwind CSS for rapid, utility-first styling.
- State Management: Zustand or Redux Toolkit for efficient global state management.
- Routing: React Router DOM for client-side navigation.
- Data Fetching: Axios or Fetch API.
- Charting Library: Chart.js or Recharts for data visualization.
- Form Handling: React Hook Form for efficient form management and validation.
- Icons: Heroicons or Font Awesome.
- Animation: Framer Motion for smooth UI animations and transitions.
- Local Storage: For persisting user preferences or temporary data.
CORE FEATURES:
1. **Product Carbon Footprint Calculator:**
* **User Flow:** User navigates to the 'Calculator' section. They input product details (type, origin, destination, transportation modes, estimated quantities). The system queries a database (initially mock data, later a real API) for emission factors based on industry, materials, and transport. The calculated carbon footprint (CO2e) is displayed along with a breakdown by supply chain stage (raw material extraction, manufacturing, shipping, warehousing, final delivery). Users can save calculations.
* **Details:** Requires input fields for product name, category, origin country/port, destination country/port, primary transportation mode (sea, air, road, rail), secondary modes, estimated distance, and product weight/volume. The backend logic will use predefined emission factors. For MVP, these factors can be hardcoded or stored in a JSON file.
2. **Supply Chain Map Visualization:**
* **User Flow:** After a calculation or by selecting a saved product, the user sees an interactive map. The map visually represents the product's journey, highlighting key nodes (factories, ports, distribution centers) and the shipping routes between them. Each route segment is color-coded or has an associated label indicating its CO2e contribution.
* **Details:** Uses a mapping library (like Leaflet or Mapbox GL JS integrated with React). Route lines are drawn between coordinates. Tooltips appear on hover, showing emission data for that segment. The map should be zoomable and pannable.
3. **Sustainable Route Optimization:**
* **User Flow:** Within the calculator or on the map view, users can click an 'Optimize' button. The system analyzes the current route and suggests alternative routes or transportation modes that have a lower carbon footprint, while considering potential trade-offs (e.g., cost, time – though MVP focuses on CO2e).
* **Details:** Compares the carbon footprint of different transport modes for the same distance (e.g., sea vs. air freight). Could also suggest alternative suppliers or manufacturing locations if integrated with a broader database.
4. **Sustainability Dashboard & Reporting:**
* **User Flow:** A central dashboard displays an overview of tracked products, total carbon emissions, trends over time, and top emitting activities. Users can generate downloadable reports (CSV, PDF) summarizing their supply chain's environmental performance.
* **Details:** Utilizes charting components to show historical data, breakdown by category, and comparisons. Key performance indicators (KPIs) like 'Total CO2e Saved' (compared to a baseline) can be featured.
UI/UX DESIGN:
- **Layout:** Single-page application with a clean, intuitive navigation sidebar (or top bar). Main content area displays the active feature (Calculator, Map, Dashboard). Responsive design using a mobile-first approach.
- **Color Palette:** Primary colors: Shades of green (nature, sustainability), blue (trust, technology), and grey (neutrality, professionalism). Accent colors: Yellow or orange for highlights and calls to action. Use a neutral background (white or light grey).
- **Typography:** Clean, readable sans-serif fonts like Inter, Roboto, or Poppins. Clear hierarchy using font sizes and weights.
- **Responsive Design:** Utilize Tailwind CSS's responsive prefixes (sm:, md:, lg:, xl:) to ensure optimal viewing on all devices. Grids and flexbox for layout. Navigation might collapse into a hamburger menu on smaller screens.
COMPONENT BREAKDOWN:
- `App.js`: Main application component, sets up routing and global layout.
- `Navigation.js`: Sidebar/navbar component. Manages navigation state.
* `Props`: `routes` (array of route objects), `currentRoute` (string).
- `CalculatorPage.js`: Contains the form for inputting product details.
* `State`: Form input values, calculated footprint data.
* `Components`: `ProductForm.js`, `ResultsDisplay.js`.
- `ProductForm.js`: Form elements for product details.
* `Props`: `onSubmit` (function).
* `State`: Form field states, validation errors.
- `ResultsDisplay.js`: Shows the calculated carbon footprint and breakdown.
* `Props`: `calculationResults` (object).
* `Components`: `FootprintBreakdown.js`.
- `FootprintBreakdown.js`: Displays the CO2e breakdown (e.g., bar chart).
* `Props`: `breakdownData` (array of objects).
- `MapPage.js`: Displays the interactive supply chain map.
* `State`: Map data (routes, points), selected product/calculation.
* `Components`: `SupplyChainMap.js`.
- `SupplyChainMap.js`: Integrates the mapping library.
* `Props`: `routes` (array), `points` (array).
- `OptimizationPanel.js`: Shows suggested alternative routes.
* `Props`: `currentRouteData` (object), `optimizedRoutes` (array).
- `DashboardPage.js`: Overview of sustainability metrics.
* `State`: Aggregated data, chart data.
* `Components`: `MetricCard.js`, `EmissionsChart.js`.
- `MetricCard.js`: Displays a single KPI.
* `Props`: `title`, `value`, `trend`.
- `EmissionsChart.js`: Renders charts using a charting library.
* `Props`: `chartData`, `chartOptions`.
- `Modal.js`: Generic modal component for popups (e.g., saving confirmation).
* `Props`: `isOpen`, `onClose`, `children`.
- `Button.js`: Reusable button component with styling variations.
- `Input.js`: Reusable input component.
DATA MODEL:
- **Product Calculation State:**
```json
{
"id": "uuid-123",
"productName": "Organic Cotton T-Shirt",
"category": "Apparel",
"origin": {
"location": "Dhaka, Bangladesh",
"type": "Factory"
},
"destination": {
"location": "Dublin, Ireland",
"type": "Retail"
},
"transportation": [
{ "mode": "Sea Freight", "distance": 9000, "co2e": 150 },
{ "mode": "Road Freight", "distance": 50, "co2e": 5 },
{ "mode": "Warehousing", "duration_days": 7, "co2e": 2 },
{ "mode": "Final Delivery Truck", "distance": 10, "co2e": 0.5 }
],
"totalCo2e": 157.5,
"calculationTimestamp": "2023-10-27T10:00:00Z"
}
```
- **Emission Factors (simplified example):
```json
[
{ "transportMode": "Sea Freight", "co2e_per_tonne_km": 0.015 },
{ "transportMode": "Road Freight", "co2e_per_tonne_km": 0.110 },
{ "transportMode": "Air Freight", "co2e_per_tonne_km": 0.500 },
{ "transportMode": "Rail Freight", "co2e_per_tonne_km": 0.020 },
{ "transportMode": "Warehousing", "co2e_per_product_unit": 0.1 },
{ "transportMode": "Final Delivery Truck", "co2e_per_km": 0.05 }
]
```
- **Application State:** Store saved calculations, user settings, and fetched emission data. For MVP, local state management (e.g., Zustand) is sufficient. For larger scale, consider Redux Toolkit.
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out animations when navigating between sections using `react-router-dom` and Framer Motion.
- **Button Hovers:** Slight scale-up or background color change on button hover states.
- **Chart Interactions:** Tooltips appearing on chart data points hover.
- **Map Interactions:** Smooth panning and zooming. Routes animating on initial load or when dynamically added.
- **Loading States:** Use spinners or skeleton loaders when fetching data or performing calculations. Indicate ongoing processes clearly.
- **Micro-interactions:** Subtle feedback on form submissions (e.g., a checkmark animation).
EDGE CASES:
- **Empty States:** Display friendly messages and clear calls to action when no data is available (e.g., "No calculations saved yet. Try calculating your first product!" on the dashboard).
- **Error Handling:** Implement robust error handling for API calls (if applicable) or calculation failures. Display user-friendly error messages. Use try-catch blocks and conditional rendering.
- **Input Validation:** Use React Hook Form with validation rules (e.g., required fields, numeric inputs for distances/weights, valid email format if user accounts are added later). Provide inline validation feedback.
- **Accessibility (a11y):** Ensure proper semantic HTML, ARIA attributes where necessary, keyboard navigability, sufficient color contrast, and alt text for images.
- **Data Incompleteness:** Handle cases where emission factors might be missing for certain transport modes or regions. Provide default values or flag the data as incomplete.
SAMPLE DATA:
1. **Product: "Ethiopian Coffee Beans"**
* Origin: Addis Ababa, Ethiopia (Processing/Warehousing)
* Transport 1: Road to Port (Djibouti) - 900 km, 5000 kg
* Transport 2: Sea Freight to Rotterdam, Netherlands
* Transport 3: Road to Distribution Center, Germany - 300 km
* Transport 4: Final Delivery Van to Customer - 20 km
* *Expected Output:* CO2e breakdown by transport stage.
2. **Product: "Electronics Gadget"**
* Origin: Shenzhen, China (Factory)
* Transport 1: Sea Freight to Long Beach, USA
* Transport 2: Road Freight to Warehouse, California
* Transport 3: Air Freight to Chicago (Expedited)
* Transport 4: Final Delivery Van to Customer
* *Expected Output:* High CO2e due to air freight, comparison of sea vs. air.
3. **Product: "Irish Wool Sweater" (Hypothetical, for comparison)**
* Origin: Galway, Ireland (Farming/Processing)
* Transport 1: Road to Distribution Center
* Transport 2: Local Delivery Truck
* *Expected Output:* Low CO2e, showcasing benefits of local sourcing.
4. **Product: "Brazilian Soybeans"**
* Origin: Mato Grosso, Brazil (Farm/Processing)
* Transport 1: Road to Port (e.g., Santos)
* Transport 2: Sea Freight to Europe
* Transport 3: Inland transport in Europe
* *Expected Output:* Significant emissions from long-distance sea freight.
5. **Product: "Recycled Plastic Pellets"**
* Origin: Recycling Facility, Germany
* Transport 1: Road to Manufacturing Plant, France
* Transport 2: Final Delivery
* *Expected Output:* Lower emissions due to recycled material and shorter distances.
6. **Calculation Input Example:**
```json
{
"productName": "Example Widget",
"category": "Industrial",
"origin": {"location": "Berlin, Germany", "type": "Factory"},
"destination": {"location": "New York, USA", "type": "Distribution Center"},
"transportation": [
{"mode": "Sea Freight", "distance": 6000, "weight_tonnes": 10},
{"mode": "Road Freight", "distance": 100, "weight_tonnes": 10}
]
}
```
DEPLOYMENT NOTES:
- **Build Process:** Use `npm run build` or `yarn build` to create an optimized production build. The output will be in the `build/` directory.
- **Environment Variables:** Utilize `.env` files (e.g., `.env.local`, `.env.production`) for managing environment-specific variables (e.g., API keys for map services if not using free tiers). Prefix variables with `REACT_APP_` for Create React App or use Next.js conventions.
- **Performance Optimizations:**
* Code Splitting: Implement dynamic `import()` for route-based or component-based code splitting to reduce initial load time.
* Image Optimization: Use optimized image formats and consider a CDN.
* Memoization: Use `React.memo`, `useMemo`, and `useCallback` where appropriate to prevent unnecessary re-renders.
* Bundle Analysis: Use tools like `webpack-bundle-analyzer` to identify large dependencies and optimize bundle size.
- **Hosting:** Deploy to static hosting platforms like Vercel, Netlify, or AWS S3/CloudFront for optimal performance and scalability.
- **HTTPS:** Ensure the application is served over HTTPS.
- **CORS:** If interacting with a separate backend API, ensure proper CORS (Cross-Origin Resource Sharing) configuration on the server.