## AI Master Prompt for 'Barış Hattı: Küresel Kriz Takip'
### 1. PROJECT OVERVIEW
**Goal:** To create a single-page React application (SPA) that provides users with real-time updates, in-depth analysis, and interactive visualizations of global conflicts and crises. The application aims to consolidate information from reputable news sources, geopolitical analyses, and humanitarian reports, offering a centralized and objective platform for users to stay informed.
**Problem Solved:** The current information landscape regarding global crises is fragmented across numerous websites, often biased, and lacks a user-friendly interface for comprehensive understanding. 'Barış Hattı' addresses this by aggregating, verifying (through source credibility), and presenting information in an accessible and visually engaging format.
**Value Proposition:** 'Barış Hattı' offers a trustworthy, consolidated, and intuitive way for individuals interested in global affairs to access critical information about conflicts and crises, enabling them to make informed decisions and understand complex geopolitical situations.
### 2. TECH STACK
* **Frontend Framework:** React (using Create React App for simplicity or Vite for speed)
* **Styling:** Tailwind CSS (for rapid UI development and utility-first styling)
* **State Management:** Zustand (lightweight and performant global state management) or React Context API for simpler state needs.
* **Routing:** React Router DOM (for handling navigation within the SPA)
* **Data Fetching:** Axios or native `fetch` API.
* **Mapping Library:** Leaflet with `react-leaflet` for the interactive crisis map.
* **UI Components:** Potentially a lightweight library like Headless UI for accessible components if needed, but primarily custom components styled with Tailwind.
* **Icons:** Heroicons or Font Awesome.
* **Date Handling:** `date-fns` or `moment.js`.
### 3. CORE FEATURES
**A. Real-time News Feed:**
* **Description:** Displays the latest news articles related to global conflicts and crises, aggregated from predefined, credible sources (e.g., Reuters, AP, BBC World, Al Jazeera English).
* **User Flow:** Upon loading the app, the user sees a chronological feed of news headlines. Each item shows the source, publication time, and a brief snippet. Clicking a headline expands to show the full snippet or a link to the original article. Filters will be available to sort by region or keyword.
**B. Interactive Crisis Map:**
* **Description:** A world map visualizing active conflict zones, major refugee movements, and significant geopolitical events. Markers on the map represent specific incidents or regions.
* **User Flow:** The map loads with default markers. Users can zoom, pan, and click on markers to get a popup with details (event type, affected population, date, source link). Filters can be applied to show specific types of events (e.g., 'Ceasefire Violations', 'Humanitarian Aid Routes', 'Major Battles'). Clicking a marker might also highlight related news articles in the feed.
**C. Push Notifications:**
* **Description:** Allows users to subscribe to alerts for critical developments in specific regions or concerning specific types of events. (Requires browser notification API or a service worker).
* **User Flow:** Users can access a 'Settings' or 'Notifications' section. They can toggle notifications on/off globally, and select specific regions (e.g., 'Middle East', 'Eastern Europe') or event categories (e.g., 'Sudden Escalation', 'Peace Talks Announced') to receive alerts for. When a relevant event occurs, a browser notification appears.
**D. Discussion Forums (Optional MVP Feature/Phase 2):**
* **Description:** Dedicated forums for users to discuss specific ongoing crises or geopolitical topics. Moderation will be key.
* **User Flow:** Users can navigate to a 'Forums' section, select a crisis/topic, read existing threads, and create new posts or reply to others. User authentication might be needed for posting.
### 4. UI/UX DESIGN
* **Layout:** A clean, modern, and responsive single-page layout. A persistent navigation sidebar (collapsible on smaller screens) for accessing News Feed, Crisis Map, and Settings/Notifications. The main content area dynamically updates based on the selected section.
* **Color Palette:** Primarily uses a neutral and professional palette (e.g., shades of grey, white, dark blue) to convey seriousness and focus. Accent colors (e.g., muted red for alerts/conflict, a calming green/blue for positive developments/aid) should be used sparingly and purposefully.
* Primary: `#FFFFFF` (White)
* Secondary: `#F8F9FA` (Light Gray)
* Text: `#212529` (Dark Gray)
* Primary Accent (Conflict/Alert): `#E74C3C` (Muted Red)
* Secondary Accent (Info/Aid): `#2ECC71` (Muted Green)
* Navigation/Sidebar: `#343A40` (Darker Gray)
* **Typography:** Clean, readable sans-serif fonts. Use a combination like Inter or Roboto for body text and a slightly bolder weight for headings.
* Headings: `font-family: 'Inter', sans-serif; font-weight: 700;`
* Body Text: `font-family: 'Inter', sans-serif; font-weight: 400;`
* **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Map controls are optimized for touch. News feed items stack vertically. Ensure readability and usability across devices (Mobile, Tablet, Desktop).
* **Dark Mode:** Consider implementing a dark mode toggle for user preference and reduced eye strain.
### 5. DATA MODEL
**A. State Structure (using Zustand or Context):
```javascript
// Example for news feed state
{
news: {
articles: [], // Array of Article objects
loading: false,
error: null,
filters: { region: 'All', keyword: '' }
},
map: {
markers: [], // Array of Marker objects
loading: false,
error: null,
selectedMarker: null,
filters: { eventType: 'All' }
},
notifications: {
settings: { global: true, regions: [], eventTypes: [] }
}
}
```
**B. Mock Data Formats:**
* **Article Object:**
```json
{
"id": "uuid-123e4567-e89b-12d3-a456-426614174000",
"title": "Provisional Ceasefire Agreed Between Nation A and B",
"source": "Reuters",
"publicationDate": "2023-10-27T10:30:00Z",
"snippet": "Following intense diplomatic efforts, both nations have agreed to a provisional ceasefire, effective midnight local time. Details remain scarce...",
"url": "https://www.reuters.com/article/...
"region": "Middle East"
}
```
* **Map Marker Object:**
```json
{
"id": "uuid-a1b2c3d4-e5f6-7890-1234-567890abcdef",
"lat": 34.0522,
"lng": -118.2437,
"type": "Ceasefire Violation", // e.g., 'Conflict Zone', 'Refugee Movement', 'Diplomatic Breakthrough'
"title": "Border Skirmish Reported",
"description": "Reports indicate localized fighting along the disputed border region.",
"timestamp": "2023-10-27T09:15:00Z",
"relatedArticleId": "uuid-123e4567-e89b-12d3-a456-426614174000" // Optional link to a news article
}
```
### 6. COMPONENT BREAKDOWN
* **`App.js`:** Main application component, sets up routing and global layout.
* **Props:** None (manages overall state).
* **Responsibility:** Initialize router, fetch initial data (if needed), manage theme/dark mode.
* **`Navigation.js`:** Sidebar/header component containing navigation links.
* **Props:** `currentPath`, `onNavigate` (function).
* **Responsibility:** Display navigation items, handle link clicks, manage active link styling.
* **`NewsFeed.js`:** Container component for the news articles list.
* **Props:** `articles` (array), `loading` (boolean), `error` (string/null), `filters` (object).
* **Responsibility:** Fetch news data, manage loading/error states, render `ArticleList` and `FilterBar`.
* **`ArticleList.js`:** Renders the list of `ArticleItem` components.
* **Props:** `articles` (array).
* **Responsibility:** Iterate over articles and render `ArticleItem` for each.
* **`ArticleItem.js`:** Displays a single news article summary.
* **Props:** `article` (object).
* **Responsibility:** Show title, source, date, snippet. Handle click to view more/link.
* **`FilterBar.js`:** Component for filtering news articles (e.g., by region, keyword).
* **Props:** `currentFilters` (object), `onFilterChange` (function).
* **Responsibility:** Render input fields/dropdowns for filters, call `onFilterChange` when filters are updated.
* **`CrisisMap.js`:** Component for rendering the interactive Leaflet map.
* **Props:** `markers` (array), `loading` (boolean), `error` (string/null), `selectedMarker` (object), `filters` (object).
* **Responsibility:** Initialize map, render markers, handle map interactions (zoom, pan, click), display popups.
* **`MapMarker.js`:** Component representing a single marker on the map (wrapper for Leaflet marker).
* **Props:** `position` (lat/lng object), `eventData` (object), `onClick` (function).
* **Responsibility:** Create and manage Leaflet marker instance, bind popup content.
* **`NotificationSettings.js`:** Component for managing user notification preferences.
* **Props:** `settings` (object), `onSettingsChange` (function).
* **Responsibility:** Display checkboxes/toggles for notification options, call `onSettingsChange`.
* **`LoadingSpinner.js`:** Reusable loading indicator component.
* **Props:** None.
* **Responsibility:** Display a visual loading animation.
* **`ErrorMessage.js`:** Reusable error display component.
* **Props:** `message` (string).
* **Responsibility:** Display error messages clearly.
### 7. ANIMATIONS & INTERACTIONS
* **Page Transitions:** Subtle fade-in/fade-out transitions between different sections (News Feed, Map) using React Transition Group or Framer Motion for a smoother user experience.
* **Hover Effects:** Slight scale-up or background color change on `ArticleItem` and interactive map markers on hover.
* **Loading States:** Use `LoadingSpinner.js` component and disable interactions while data is being fetched for both news feed and map.
* **Map Marker Popups:** Smooth expansion/contraction of popups on marker click.
* **Filter Application:** A subtle visual cue (e.g., a brief highlight) when filters are successfully applied.
* **Notification:** Browser push notifications should have a distinct visual and auditory alert.
### 8. EDGE CASES
* **Empty States:**:
* News Feed: Display a message like "No news available for your selected filters." with instructions.
* Map: Display a message like "No crisis events found for the selected criteria." if no markers match.
* **Error Handling:**:
* API Fetch Errors: Catch errors during data fetching and display `ErrorMessage.js` with a user-friendly message (e.g., "Could not load news. Please try again later."). Include a 'Retry' button.
* Map Library Errors: Gracefully handle potential issues with the mapping library.
* **Validation:**:
* If user input is added (e.g., search keywords), implement basic validation to prevent excessively long or malformed queries.
* **Accessibility (a11y):**:
* Ensure all interactive elements have clear focus states.
* Use semantic HTML tags appropriately (header, nav, main, article, button).
* Provide ARIA attributes where necessary, especially for dynamic content and custom controls.
* Ensure sufficient color contrast.
* Make sure the map is navigable via keyboard and screen readers, potentially by providing a table-based alternative for critical data.
* **Data Freshness:** Implement logic to periodically refresh news data or indicate the last updated time clearly.
### 9. SAMPLE DATA
* **Multiple Articles (as defined in Data Model section):** Include at least 5-10 diverse `Article Object` examples covering different regions and event types.
* **Multiple Map Markers (as defined in Data Model section):** Include at least 5-10 diverse `Map Marker Object` examples, ensuring variety in `type`, `lat`, `lng`, and `timestamp`.
* **User Notification Settings:**
```json
{
"global": true,
"regions": ["Middle East", "Eastern Europe"],
"eventTypes": ["Sudden Escalation", "Peace Talks Announced"]
}
```
### 10. DEPLOYMENT NOTES
* **Build Tool:** Use Vite or Create React App's build command (`npm run build` or `yarn build`).
* **Environment Variables:** Use `.env` files for API keys (if any external APIs are used for data) and configuration settings. Prefix variables with `REACT_APP_` (for CRA) or `VITE_` (for Vite).
* **Performance Optimizations:**
* Code Splitting: Implement lazy loading for components, especially the `CrisisMap` component, to reduce initial bundle size.
* Image Optimization: Ensure any images used are optimized.
* Memoization: Use `React.memo` or `useMemo`/`useCallback` where appropriate to prevent unnecessary re-renders.
* Dependency Analysis: Keep dependencies updated and minimize their number.
* **Hosting:** Recommend static hosting platforms like Vercel, Netlify, or GitHub Pages for easy deployment of the SPA.
* **HTTPS:** Ensure the deployed application uses HTTPS.
* **Service Worker:** For push notifications, a service worker will need to be registered and configured.