You are a Senior Full-Stack Developer tasked with creating a Single Page Application (SPA) called 'BotSavior' using React and Tailwind CSS. This application aims to combat the increasing problem of AI-generated spam and bot activity on platforms like Hacker News (HN). The core idea is to provide users with tools to filter out content from suspicious or new accounts, thereby improving the quality and trustworthiness of the content they see. This prompt outlines the detailed requirements for building the MVP of BotSavior.
**1. PROJECT OVERVIEW:**
BotSavior addresses the growing concern of AI-generated posts and bot activity, particularly noticeable from new accounts on platforms like Hacker News. These posts can dilute the quality of discussions and obscure valuable content. BotSavior's value proposition is to empower users with granular control over their content feed, allowing them to filter out noise and focus on genuine contributions. It aims to preserve the signal-to-noise ratio on curated platforms by leveraging intelligent filtering mechanisms.
**2. TECH STACK:**
- **Frontend Framework:** React.js (using Vite for optimal build performance)
- **Styling:** Tailwind CSS for rapid and utility-first styling.
- **State Management:** Zustand for efficient and simple global state management.
- **Routing:** React Router DOM for client-side navigation.
- **API Interaction:** Axios for making HTTP requests to a potential backend (though MVP will focus on client-side filtering and potentially using HN's public API if feasible for read-only operations).
- **Utilities:** Date-fns for date manipulation, possibly a lightweight library for AI content detection heuristics if client-side processing is feasible (e.g., simple text analysis).
**3. CORE FEATURES (MVP):**
* **Account Linking (Simulated for MVP):**
* **User Flow:** The MVP won't implement actual account linking for security reasons. Instead, users will manually input their HN username or a proxy identifier. In a full implementation, this would involve OAuth or a secure API key mechanism.
* **Description:** Allows users to identify their content and apply filters based on their own profile or preferences. For MVP, we simulate this by letting the user input their desired username to see how it would look.
* **Suspicious Account Filtering:**
* **User Flow:** Users can enable/disable this feature. When enabled, the application will filter out posts from accounts meeting predefined criteria (e.g., created within the last X days, low karma score). Users can configure these thresholds.
* **Description:** The primary defense against new bot accounts. Filters posts based on account age and karma.
* **AI Content Heuristics (Basic):**
* **User Flow:** This feature runs in the background. Posts flagged by the AI heuristics are marked with a visual indicator (e.g., a small icon).
* **Description:** Implements basic checks for patterns commonly found in AI-generated text (e.g., overly formal language, lack of idiomatic expressions, repetitive sentence structures). This is a heuristic-based approach for MVP and not a definitive AI detection.
* **Customizable Filtering Rules:**
* **User Flow:** Users access a settings panel where they can define rules like 'Hide posts from accounts younger than 7 days' or 'Hide posts with karma below 50'.
* **Description:** Provides flexibility for users to tailor the filtering to their preferences.
* **Feed View Toggle:**
* **User Flow:** A prominent button or toggle allows users to switch between the default HN feed view and the BotSavior filtered view.
* **Description:** Enables easy comparison and usability.
**4. UI/UX DESIGN:**
- **Layout:** A clean, single-page application layout. A header for navigation/branding, a main content area for the feed, and a sidebar or modal for settings/filters.
- **Color Palette:** Primarily dark theme to be easier on the eyes and align with developer aesthetics. Use shades of dark gray, deep blue, and a contrasting accent color (e.g., a vibrant cyan or orange) for interactive elements and highlights. White or light gray for text.
- **Typography:** Use a modern, readable sans-serif font like Inter or Poppins for body text and a slightly more distinct font for headings. Ensure good hierarchy.
- **Responsive Design:** Mobile-first approach. The layout should adapt seamlessly to various screen sizes (desktop, tablet, mobile). Use Tailwind's responsive prefixes (sm:, md:, lg:).
- **Component Hierarchy:** Header -> FeedContainer -> PostCard (for each post) | SettingsPanel -> FilterControl
**5. DATA MODEL (Mock Data & State):**
- **`Post` Object:**
```json
{
"id": "string",
"title": "string",
"url": "string",
"domain": "string",
"score": "number",
"by": "string", // Author username
"time_ago": "string", // e.g., "2 hours ago"
"num_comments": "number",
"created_at": "number", // Unix timestamp for account age calculation
"is_suspicious": "boolean", // Flagged by filtering rules
"is_ai_heuristic": "boolean" // Flagged by AI heuristics
}
```
- **`UserSettings` State:**
```json
{
"defaultView": "filtered" | "original",
"filterNewAccounts": "boolean",
"newAccountThresholdDays": "number",
"filterLowKarma": "boolean",
"lowKarmaThreshold": "number",
"enableAiHeuristics": "boolean"
}
```
- **Global State (Zustand):** Store `posts` (array of `Post` objects), `userSettings`, and `isLoading` status.
**6. COMPONENT BREAKDOWN:**
* **`App.jsx`:** Main application component. Sets up routing and global layout. Renders Header, FeedContainer, and SettingsModal.
* **`Header.jsx`:** Displays the application title ('BotSavior'), branding, and the Feed View Toggle button.
* `props`: `currentView` (string), `onToggleView` (function)
* **`FeedContainer.jsx`:** Fetches (mock) posts, applies filters based on `userSettings`, and renders `PostCard` components. Handles loading and empty states.
* `props`: None (fetches from global state/mock data).
* **`PostCard.jsx`:** Displays a single post item. Shows title, author, score, comments, etc. Includes visual indicators for suspicious/AI content.
* `props`: `post` (object)
* **`SettingsModal.jsx`:** A modal dialog for managing user settings.
* `props`: `isOpen` (boolean), `onClose` (function), `userSettings` (object), `onSettingsChange` (function)
* **`FilterControl.jsx`:** A reusable component for a single filter setting (e.g., a slider for days, a number input for karma).
* `props`: `label` (string), `value` (any), `onChange` (function), `type` (string - e.g., 'range', 'number')
* **`LoadingSpinner.jsx`:** A simple, centered spinner component for loading states.
* `props`: None
**7. ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fade-in/fade-out transitions for route changes or when toggling between feed views using `Framer Motion` or CSS transitions.
- **Hover Effects:** Slight scale-up or background color change on `PostCard` hover.
- **Loading States:** `LoadingSpinner` should be displayed prominently when posts are being fetched or filtered. Use skeleton loaders for a smoother perceived performance.
- **Micro-interactions:** Smooth opening/closing animation for the `SettingsModal`. Visual feedback on toggle switches.
**8. EDGE CASES:**
- **Empty Feed:** Display a friendly message when no posts are available or all posts are filtered out. "No suspicious activity detected, or all posts filtered. Enjoy the clean feed!"
- **Error Handling:** Gracefully handle potential errors if interacting with external APIs (though MVP is mock-based). Display user-friendly error messages.
- **Validation:** Ensure numeric inputs for thresholds are within reasonable ranges. Prevent non-numeric input where applicable.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where necessary. Keyboard navigability for all interactive elements. Sufficient color contrast.
**9. SAMPLE DATA:**
* **`samplePosts` Array (Illustrative - 5 examples):**
```javascript
[
{
"id": "1",
"title": "Ask HN: Please restrict new accounts from posting",
"url": "https://news.ycombinator.com/item?id=...",
"domain": "news.ycombinator.com",
"score": 474,
"by": "anonuser123",
"time_ago": "2 hours ago",
"num_comments": 150,
"created_at": 1678886400, // Example timestamp (approx. 1 month ago)
"is_suspicious": false,
"is_ai_heuristic": false
},
{
"id": "2",
"title": "Show HN: A new AI-powered code generation tool",
"url": "https://showhn.com/project/ai-coder",
"domain": "showhn.com",
"score": 15,
"by": "newbie_coder_ai",
"time_ago": "10 minutes ago",
"num_comments": 2,
"created_at": Date.now() / 1000 - 3600, // Created 1 hour ago
"is_suspicious": true, // Suspicious: New account
"is_ai_heuristic": true // Potentially AI generated
},
{
"id": "3",
"title": "The State of Web Development in 2024",
"url": "https://blog.example.com/webdev",
"domain": "blog.example.com",
"score": 120,
"by": "experienced_dev",
"time_ago": "5 hours ago",
"num_comments": 45,
"created_at": 1670000000, // Older account
"is_suspicious": false,
"is_ai_heuristic": false
},
{
"id": "4",
"title": "Learning Rust: My Journey",
"url": "https://rust-journey.com",
"domain": "rust-journey.com",
"score": 25,
"by": "rust_learner_01",
"time_ago": "30 minutes ago",
"num_comments": 5,
"created_at": Date.now() / 1000 - 86400, // Created 1 day ago
"is_suspicious": true, // Suspicious: New account
"is_ai_heuristic": false
},
{
"id": "5",
"title": "AI advancements and their societal impact - a detailed analysis",
"url": "https://deepthoughts.ai/impact",
"domain": "deepthoughts.ai",
"score": 8,
"by": "ai_essaybot",
"time_ago": "15 minutes ago",
"num_comments": 1,
"created_at": Date.now() / 1000 - 1800, // Created 30 minutes ago
"is_suspicious": true, // Suspicious: New account
"is_ai_heuristic": true // Potentially AI generated due to topic and phrasing
}
]
```
**10. DEPLOYMENT NOTES:**
- **Build Tool:** Vite (ensure `vite build` command is used).
- **Environment Variables:** Use `.env` files for configuration (e.g., `VITE_HN_API_URL` if using HN API, though MVP likely won't need it).
- **Performance Optimizations:** Code splitting (handled by Vite), lazy loading components (especially `SettingsModal`), memoization (`React.memo`) for `PostCard` if performance becomes an issue.
- **Static Hosting:** The SPA can be deployed to static hosting services like Netlify, Vercel, or GitHub Pages.
- **CORS:** If interacting with HN API directly, be mindful of CORS policies. Client-side filtering of locally stored/mock data avoids this.
This prompt provides a comprehensive blueprint for building the BotSavior MVP. The focus is on creating a functional, user-friendly interface for filtering content, with simulated account linking and basic heuristic analysis for the initial release.