As a Senior Full-Stack Developer and Startup Consultant, your task is to generate a complete single-page application (SPA) for a social media analytics platform focused on leadership changes, specifically inspired by the Hacker News post about the Bluesky CEO stepping down. The application should be built using React and Tailwind CSS.
**1. PROJECT OVERVIEW:**
The application aims to provide insightful analysis of leadership transitions within emerging social media platforms. The core problem it solves is the lack of readily available, consolidated information and analysis regarding how founder/CEO departures or changes impact platform health, user engagement, and market position. The value proposition is to offer early-stage investors, tech entrepreneurs, community managers, and tech enthusiasts strategic foresight into the dynamics of nascent social networks by tracking key personnel changes and their potential consequences. This platform will act as an intelligence hub, helping users make more informed decisions in a rapidly evolving digital landscape.
**2. TECH STACK:**
- **Frontend Framework:** React (using Create React App or Vite for setup)
- **Styling:** Tailwind CSS for rapid UI development and a consistent design system.
- **State Management:** React Context API for global state and `useState`/`useReducer` for local component state. For more complex state, consider Zustand or Jotai.
- **Routing:** React Router DOM for navigation within the SPA.
- **Data Fetching:** `fetch` API or Axios for API requests (mocked initially).
- **UI Components:** Potentially libraries like Headless UI for accessible, unstyled components.
- **Icons:** React Icons or Heroicons.
**3. CORE FEATURES:**
- **Platform Dashboard:** The main landing page providing an overview of tracked platforms and recent leadership changes.
- **User Flow:** Upon landing, the user sees a summary of key platforms (e.g., Bluesky, Threads, Mastodon) and highlights of recent leadership news. They can click on a platform to view its detailed analysis.
- **Platform-Specific Analysis:** A dedicated page for each tracked platform.
- **User Flow:** Clicking a platform on the dashboard navigates to its detail page. This page displays:
- Platform Name & Logo
- Current/Previous CEO/Key Leader Info (with dates of tenure/departure)
- Timeline of Leadership Changes
- Key Metrics Overview (e.g., User Growth Trend, Engagement Rate Trend, Sentiment Score Trend - initially mocked data)
- Analysis Summary: A brief text summary of the implications of the recent leadership change.
- **Leader Profile:** A view showing details about a specific leader.
- **User Flow:** Clicking on a leader's name on the platform detail page navigates to their profile, showing their history, tenure, and any associated analysis.
- **Search & Filtering:** Ability to search for platforms or leaders.
- **User Flow:** A search bar in the header allows users to type platform or leader names. Results dynamically update as the user types.
- **(Future) User Accounts & Watchlists:** Allow users to save platforms or leaders to a personalized watchlist (MVP will not include this).
**4. UI/UX DESIGN:**
- **Layout:** Single-page application. A clean, modern, and data-focused design. Header with logo and search. Main content area displaying cards, tables, and charts. Footer with basic links.
- **Color Palette:** Primary: Dark Blue (`#1A202C` - Tailwind's `gray-800` or similar). Secondary: Teal (`#38B2AC` - Tailwind's `teal-500`). Accent: Orange (`#F6AD55` - Tailwind's `orange-500`) for calls to action or highlights. Neutral: Grays for text and borders. Ensure high contrast for readability.
- **Typography:** Sans-serif font like Inter or Poppins (via Google Fonts). Use varying weights and sizes for hierarchy (e.g., `text-3xl font-bold` for page titles, `text-lg font-semibold` for section headers, `text-base` for body text).
- **Responsive Design:** Mobile-first approach. Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`) to adapt the layout. On mobile, use a single-column layout. On larger screens, use multi-column layouts with cards and sidebars as appropriate.
- **Interactions:** Subtle hover effects on cards and buttons. Smooth transitions for route changes and data loading.
**5. DATA MODEL:**
- **`Platform` Object:**
- `id`: string (unique identifier)
- `name`: string (e.g., "Bluesky")
- `logoUrl`: string (URL to platform logo)
- `websiteUrl`: string
- `currentLeader`: `Leader` object
- `previousLeaders`: `Leader[]`
- `metrics`: `Metrics` object
- **`Leader` Object:**
- `id`: string (unique identifier)
- `name`: string
- `title`: string (e.g., "CEO", "Founder")
- `startDate`: string (ISO date format)
- `endDate`: string (ISO date format, null if current)
- `bio`: string (short description)
- **`Metrics` Object:** (Mocked for MVP)
- `userGrowth`: `[ { date: string, value: number } ]`
- `engagementRate`: `[ { date: string, value: number } ]`
- `sentimentScore`: `[ { date: string, value: number } ]`
- `lastUpdated`: string (ISO date format)
- **State Management:** Use a global context for the list of platforms and fetched data. Local state for search queries, loading indicators, and individual component states.
- **Data Persistence:** For MVP, data will be hardcoded mock data. Future versions would involve API calls. LocalStorage could be used for user preferences (e.g., watchlist) in later stages.
**6. COMPONENT BREAKDOWN:**
- **`App.jsx`:** Main application component, sets up routing.
- Props: None
- Responsibility: Routing setup, global layout.
- **`Header.jsx`:** Contains the logo, navigation (if any), and search bar.
- Props: `onSearch` (function)
- Responsibility: Top navigation, search input.
- **`SearchBar.jsx`:** Input component for search.
- Props: `placeholder`, `onChange`
- Responsibility: Handling search input.
- **`PlatformDashboard.jsx`:** Displays a grid or list of platform summary cards.
- Props: `platforms` (array)
- Responsibility: Fetching/displaying platform overviews.
- **`PlatformCard.jsx`:** Individual card for each platform on the dashboard.
- Props: `platform` (object)
- Responsibility: Displaying key platform info concisely.
- **`PlatformDetail.jsx`:** Page showing detailed analysis for a single platform.
- Props: `platformId` (from route params)
- Responsibility: Fetching and displaying all details for a platform.
- **`LeaderTimeline.jsx`:** Component to display the history of leaders for a platform.
- Props: `leaders` (array)
- Responsibility: Visualizing leader tenure.
- **`MetricChart.jsx`:** Placeholder for charting metrics (e.g., using a simple charting library or even just placeholder divs for MVP).
- Props: `title`, `data` (array)
- Responsibility: Displaying metric trends.
- **`LoadingSpinner.jsx`:** Generic loading indicator.
- Props: None
- Responsibility: Visual feedback during data loading.
- **`ErrorDisplay.jsx`:** Component to show error messages.
- Props: `message`
- Responsibility: Displaying error states.
**7. ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Use `react-router-dom`'s `<TransitionGroup>` or a library like `Framer Motion` for smooth fade/slide transitions between pages.
- **Button Hovers:** Subtle background color change or slight scale-up on hover using Tailwind's `hover:` variants.
- **Card Hovers:** Slight shadow increase or translateY effect on card hover.
- **Loading States:** Display `LoadingSpinner` component when fetching data. Disable buttons or inputs during processing.
- **Micro-interactions:** Subtle animations on data updates or successful form submissions (if forms were implemented).
**8. EDGE CASES:**
- **No Data:** Display user-friendly messages like "No platforms found" or "No data available for this metric" when lists or data points are empty.
- **Error Handling:** Implement `try...catch` blocks for data fetching. Display `ErrorDisplay` component with informative messages if an API call fails or data is malformed.
- **Validation:** If search or forms were implemented, add client-side validation (e.g., ensure search query is not empty).
- **Accessibility (a11y):** Use semantic HTML elements. Ensure sufficient color contrast. Add `aria-label` attributes where necessary. Ensure keyboard navigability for all interactive elements.
- **Responsiveness:** Thoroughly test on various screen sizes.
**9. SAMPLE DATA:**
```json
[
{
"id": "bluesky",
"name": "Bluesky",
"logoUrl": "/path/to/bluesky-logo.svg",
"websiteUrl": "https://bsky.app",
"currentLeader": {
"id": "jay-graber",
"name": "Jay Graber",
"title": "CEO & Founder",
"startDate": "2022-10-19T00:00:00Z",
"endDate": "2024-03-04T00:00:00Z",
"bio": "Led the development of the decentralized social media protocol."
},
"previousLeaders": [],
"metrics": {
"userGrowth": [
{"date": "2023-01-01", "value": 10000},
{"date": "2023-06-01", "value": 50000},
{"date": "2024-01-01", "value": 150000}
],
"engagementRate": [
{"date": "2023-01-01", "value": 0.15},
{"date": "2023-06-01", "value": 0.25},
{"date": "2024-01-01", "value": 0.22}
],
"sentimentScore": [
{"date": "2023-01-01", "value": 6.5},
{"date": "2023-06-01", "value": 7.5},
{"date": "2024-01-01", "value": 7.0}
],
"lastUpdated": "2024-03-10T10:00:00Z"
}
},
{
"id": "threads",
"name": "Threads",
"logoUrl": "/path/to/threads-logo.svg",
"websiteUrl": "https://www.threads.net",
"currentLeader": {
"id": "mark-zuckerberg",
"name": "Mark Zuckerberg",
"title": "CEO, Meta Platforms",
"startDate": "2023-07-05T00:00:00Z",
"endDate": null,
"bio": "Oversees Meta's social media platforms."
},
"previousLeaders": [],
"metrics": {
"userGrowth": [
{"date": "2023-07-01", "value": 100000000},
{"date": "2023-09-01", "value": 50000000},
{"date": "2024-01-01", "value": 90000000}
],
"engagementRate": [
{"date": "2023-07-01", "value": 0.40},
{"date": "2023-09-01", "value": 0.20},
{"date": "2024-01-01", "value": 0.25}
],
"sentimentScore": [
{"date": "2023-07-01", "value": 8.0},
{"date": "2023-09-01", "value": 6.0},
{"date": "2024-01-01", "value": 6.8}
],
"lastUpdated": "2024-03-10T10:00:00Z"
}
}
]
```
**10. DEPLOYMENT NOTES:**
- **Build Tool:** Vite is recommended for faster build times and development server.
- **Build Command:** `npm run build` (or `yarn build`).
- **Environment Variables:** Use `.env` files for API keys (if any in future) and configuration. `VITE_API_URL` could be an example.
- **Performance Optimizations:**:
- Code splitting using React.lazy() and Suspense for route-based splitting.
- Image optimization (use appropriate formats like WebP, lazy loading).
- Memoization (`React.memo`, `useMemo`, `useCallback`) to prevent unnecessary re-renders.
- Minimize bundle size by removing unused CSS/JS.
- **Hosting:** Deploy to platforms like Vercel, Netlify, or GitHub Pages for static site hosting.