You are an expert AI application architect and full-stack developer tasked with creating a single-page application (SPA) that tracks and analyzes significant AI projects. The goal is to provide users with transparent, up-to-date information on project progress, founder status, and technical developments, inspired by the need to understand the dynamics within AI ventures like xAI.
1. PROJECT OVERVIEW:
The application, named 'Kod Kaşif' (Code Explorer), aims to demystify the fast-paced and often opaque world of AI development. It addresses the user need for reliable information regarding the internal workings, personnel changes, and progress of major AI initiatives. The core value proposition is to offer a centralized, data-driven platform for tracking AI project health, founder stability, and public perception, countering the volatility and speculation often surrounding these ventures. It will aggregate news, social media sentiment, and key personnel changes to provide a holistic view.
2. TECH STACK:
- Frontend Framework: React (using Vite for fast development)
- Styling: Tailwind CSS for rapid UI development and consistent design.
- State Management: Zustand for efficient and simple global state management.
- Routing: React Router DOM for client-side navigation.
- Data Fetching: Axios for making HTTP requests to a hypothetical backend API or mock data.
- Animations: Framer Motion for sophisticated UI animations and transitions.
- Icons: React Icons for a comprehensive set of icons.
3. CORE FEATURES:
- Project Dashboard: A main view listing key AI projects (e.g., xAI, OpenAI, Anthropic). Each project card will display its name, a brief description, logo, and a summary status indicator (e.g., 'Active Development', 'Founder Changes', 'Funding News').
- User Flow: User lands on the dashboard. They can scroll through the list of projects. Clicking a project card navigates to the Project Detail Page.
- Project Detail Page: Displays comprehensive information for a selected AI project.
- Sections: Overview, Founder Status, Recent News Feed, Social Media Sentiment (mocked), Key Milestones.
- Founder Status: A dedicated section showing current and past founders. Changes (e.g., 'Founder Departed', 'New Founder Joined') will be highlighted with dates.
- News Feed: Aggregated headlines and short snippets from reputable tech news sources, linked to the original articles. Each item will show the source and publication date.
- Social Media Sentiment: Mocked data representing the general sentiment on platforms like X (Twitter) regarding the project. This could be a simple positive/neutral/negative ratio or a trend line.
- User Flow: User clicks a project on the dashboard. They see detailed information. They can navigate back to the dashboard or to other project detail pages.
- Watchlist & Notifications: Users can add projects to their personal watchlist. They can opt-in to receive notifications for significant events (e.g., major founder changes, key announcements).
- User Flow: On the Project Detail Page, a button allows adding/removing a project from the watchlist. A separate 'Watchlist' page shows only the favorited projects. Notification settings are managed in a user profile section (mocked).
- Search & Filtering: Ability to search for projects by name and filter the dashboard list based on status or tags.
- User Flow: A search bar is present on the dashboard. Filter options (dropdown or buttons) are available next to the search bar.
4. UI/UX DESIGN:
- Layout: A clean, modern, single-page application layout. A persistent navigation bar (or sidebar for larger screens) at the top/side provides access to the Dashboard, Watchlist, and Search. The main content area displays project information.
- Color Palette: Primary: Dark Blue (#1A202C), Secondary: Teal (#4FD1C5), Accent: Orange (#F6AD55), Background: Light Gray (#F7FAFC), Text: Dark Gray (#2D3748). Use a dark mode variant as well.
- Typography: Use a sans-serif font family like 'Inter' or 'Manrope' for readability. Clear hierarchy with distinct sizes for headings, subheadings, and body text.
- Responsive Design: Mobile-first approach. Layout adjusts fluidly across breakpoints (mobile, tablet, desktop). Navigation might collapse into a hamburger menu on mobile. Grids will adapt column counts.
- Components: Intuitive and clean design for cards, lists, buttons, input fields, and modals. Loading spinners and skeleton screens will be used during data fetching.
5. DATA MODEL:
- State Management (Zustand store `aiStore`):
- `projects`: Array of project objects.
- `selectedProject`: The currently viewed project object.
- `watchlist`: Array of project IDs the user has favorited.
- `loading`: Boolean indicating global loading state.
- `error`: String for error messages.
- `searchTerm`: String for the search input.
- `filteredProjects`: Array of projects after applying filters/search.
- Mock Data Structure (`projects` array):
```json
[
{
"id": "proj_1",
"name": "xAI",
"logoUrl": "/path/to/xai-logo.png",
"description": "Elon Musk's artificial intelligence research company.",
"status": "Founder Changes",
"foundedDate": "2023-07-12",
"founders": [
{"name": "Elon Musk", "role": "Founder", "joined": "2023-07-12", "status": "Active"},
{"name": "Igor Babuschkin", "role": "Research Scientist", "joined": "2023-07-12", "status": "Departed", "departedDate": "2024-03-15"},
{"name": "Greg Brockman", "role": "President", "joined": "2024-01-10", "status": "Active"}
],
"news": [
{"title": "Elon Musk Pushes Out More xAI Founders", "source": "Financial Times", "date": "2024-03-20", "url": "..."},
{"title": "xAI Rebuilding After Founder Departures", "source": "Futurism", "date": "2024-03-21", "url": "..."}
],
"socialSentiment": {"overall": "Neutral", "trend": "down", "score": 0.2, "lastUpdated": "2024-03-22T10:00:00Z"},
"milestones": [{"date": "2023-07-12", "event": "Company Founded"}, {"date": "2024-01-10", "event": "Key Personnel Added"}]
},
{
"id": "proj_2",
"name": "OpenAI",
"logoUrl": "/path/to/openai-logo.png",
"description": "Leading AI research and deployment company.",
"status": "Active Development",
"foundedDate": "2015-12-11",
"founders": [
{"name": "Sam Altman", "role": "CEO", "joined": "2015-12-11", "status": "Active"},
{"name": "Greg Brockman", "role": "Chairman", "joined": "2015-12-11", "status": "Active"}
],
"news": [
{"title": "OpenAI Announces New Model Updates", "source": "TechCrunch", "date": "2024-03-15", "url": "..."}
],
"socialSentiment": {"overall": "Positive", "trend": "up", "score": 0.7, "lastUpdated": "2024-03-22T10:00:00Z"},
"milestones": [{"date": "2015-12-11", "event": "Company Founded"}, {"date": "2023-11-01", "event": "Major Product Launch"}]
}
]
```
6. COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing and global layout.
- `Header.jsx`: Navigation bar with Logo, NavLinks (Dashboard, Watchlist), SearchBar, and potentially a ThemeToggle.
- Props: `navItems` (array of objects with label and path).
- `ProjectCard.jsx`: Displays a summary of a single AI project on the dashboard.
- Props: `project` (object containing id, name, logoUrl, description, status).
- Responsibilities: Render project summary, click handler to navigate to detail page.
- `ProjectList.jsx`: Renders a list of `ProjectCard` components.
- Props: `projects` (array of project objects).
- Responsibilities: Maps over projects and renders `ProjectCard` for each.
- `SearchBar.jsx`: Input field for searching projects.
- Props: `value`, `onChange`.
- Responsibilities: Handle user input for search.
- `ProjectDetailPage.jsx`: Displays detailed information for a single project.
- Props: `projectId` (from URL params).
- Responsibilities: Fetch project data, render sections (Overview, Founders, News, etc.).
- `FounderStatus.jsx`: Section within `ProjectDetailPage` showing founder information.
- Props: `founders` (array of founder objects).
- Responsibilities: Display founder names, roles, and status changes.
- `NewsFeed.jsx`: Section within `ProjectDetailPage` displaying news articles.
- Props: `news` (array of news objects).
- Responsibilities: List news items with source and date.
- `Watchlist.jsx`: Page displaying projects the user has added to their watchlist.
- Props: None (fetches from Zustand store).
- Responsibilities: Filter and display projects from `aiStore.watchlist`.
- `LoadingSpinner.jsx`: Reusable component for showing a loading indicator.
- `ErrorMessage.jsx`: Reusable component for displaying errors.
7. ANIMATIONS & INTERACTIONS:
- Page Transitions: Use Framer Motion `AnimatePresence` and `motion.div` for smooth transitions between the Dashboard and Project Detail pages (e.g., fade-in/fade-out, slight slide). Use `layout` prop for stable element animations.
- Project Card Hover: Subtle scale-up effect and shadow increase on `ProjectCard` hover using Tailwind CSS and Framer Motion.
- Button Interactions: Slight press effect on buttons.
- Loading States: Skeleton loaders mimicking the structure of `ProjectCard` and detail sections while data is being fetched. Full-page loading spinner for initial app load.
- Micro-interactions: Adding/removing from watchlist should provide visual feedback (e.g., icon change, small animation).
8. EDGE CASES:
- Empty States: Display user-friendly messages when the project list, watchlist, or search results are empty (e.g., "No projects found", "Your watchlist is empty. Add some projects!").
- Error Handling: Gracefully handle API errors during data fetching. Display clear error messages to the user using the `ErrorMessage` component. Implement retry mechanisms where appropriate.
- Validation: Basic frontend validation for any user input (e.g., search terms - though likely not strictly necessary here, more for future form inputs).
- Accessibility (a11y): Ensure semantic HTML, proper ARIA attributes where needed, keyboard navigation support, sufficient color contrast, and focus management.
- Data Freshness: Indicate when the data was last updated. Consider implementing a refresh button for manual data updates.
9. SAMPLE DATA:
(Refer to the 'Mock Data Structure' in Section 5 for detailed examples of project objects, including founders, news, and social sentiment.)
10. DEPLOYMENT NOTES:
- Build Tool: Vite will be used for building the production application (`vite build`).
- Environment Variables: Use `.env` files for managing API endpoints (`VITE_API_URL`) or other configuration. Ensure sensitive keys are not exposed client-side.
- Performance Optimizations: Code splitting using React.lazy and Suspense for route-based or component-based lazy loading. Image optimization (using appropriate formats and sizes for logos). Memoization (React.memo, useMemo, useCallback) to prevent unnecessary re-renders.
- Hosting: Recommend static hosting platforms like Vercel, Netlify, or GitHub Pages for optimal performance and cost-effectiveness for an SPA.
- SEO: Implement basic SEO tags in `index.html` for the main page. Consider dynamic meta tags for project detail pages if making this a multi-page application later.
- State Persistence: Use `localStorage` or `sessionStorage` to persist the user's watchlist between sessions, synchronized with the Zustand store.