PROJECT OVERVIEW:
The user wants a single-page web application (SPA) called "Dijital Oda" (Digital Room) designed to combat the saturation and boredom caused by the overwhelming amount of AI-related content and discussions online, particularly in tech communities like Hacker News. The core problem is the 'AI echo chamber' effect, where genuine innovation in other areas gets drowned out. The application's value proposition is to provide a curated, focused, and inspiring space for users to discover and engage with non-AI-centric, innovative projects, articles, and discussions, thereby fostering broader creativity and exploration in the digital world. It aims to be a refreshing alternative to the current AI hype cycle.
TECH STACK:
- Frontend Framework: React (using Vite for fast development)
- 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 routing within the SPA
- UI Components: Potentially a lightweight component library like Headless UI or Radix UI for accessible and customizable components.
- Icons: Heroicons or Lucide React
- Data Fetching: `fetch` API or Axios (if more complex features are needed later, but start simple)
CORE FEATURES:
1. **Personalized Content Feed (AI-Free Focus):**
* **User Flow:** Upon first visit, users are prompted to select topics of interest *excluding* AI (e.g., Web Development, Design, Productivity, Gaming, Science, Art). They can also set a 'boredom threshold' for AI mentions.
* **Functionality:** The main feed displays articles, project links, and discussions based on these preferences. A filtering mechanism will actively de-prioritize or hide content heavily tagged or discussed as 'AI'. Users can adjust their preferences anytime via settings.
* **MVP Simplification:** Start with predefined categories and a simple keyword-based exclusion list for AI terms. A sophisticated AI-driven filtering can be a future enhancement.
2. **Discovery Hub (The 'Hidden Gems' Section):**
* **User Flow:** Users navigate to the 'Discovery' tab. Here, they see a curated list of unique, non-mainstream projects and insightful articles, often sourced from smaller blogs, forums, or less-hyped parts of the web.
* **Functionality:** This section is manually curated (initially) or uses a combination of less common tags and topic modeling to surface genuinely interesting, potentially overlooked content. A 'random' or 'surprise me' button could present truly niche finds.
3. **Project Board (Inspiration Stash):**
* **User Flow:** When a user finds an interesting project or article in the feed or discovery hub, they can click a 'save' or 'add to board' button.
* **Functionality:** Saved items are added to a personal, private 'Project Board'. Users can categorize their saved items (e.g., 'To Read', 'Potential Project', 'Inspiration'), add personal notes, and view them later. This replaces the need for scattered bookmarks.
4. **Minimalist & Focused UI:**
* **User Flow:** The entire application should feel calm, clean, and distraction-free.
* **Functionality:** Clean typography, ample whitespace, intuitive navigation, and subtle animations. No intrusive ads or notifications. The focus is on content consumption and reflection.
UI/UX DESIGN:
- **Layout:** Single-page application. A clean sidebar for navigation (Feed, Discovery, Project Board, Settings) and a main content area. Mobile-first responsive design.
- **Color Palette:** Calming, muted tones. Primary: A soft off-white or light grey background. Secondary: A subtle, desaturated blue or green for accents and interactive elements. Tertiary: Dark grey for text. Avoid bright, attention-grabbing colors.
- **Typography:** A readable sans-serif font for body text (e.g., Inter, Manrope) and perhaps a slightly more distinct sans-serif or serif for headings (e.g., Playfair Display if used sparingly, or a bolder weight of the body font).
- **Responsive Rules:**:
* Mobile (< 768px): Sidebar collapses into a hamburger menu. Content takes full width.
* Tablet (768px - 1024px): Sidebar visible, content area adjusts.
* Desktop (> 1024px): Full layout with sidebar and main content.
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions between sections. Loading spinners should be minimal and unobtrusive.
COMPONENT BREAKDOWN:
1. **`App.jsx`**: Main application component. Handles routing setup using `React Router DOM`. Wraps the entire application and sets up global context/state providers.
* Props: None.
* Responsibility: Application shell, routing.
2. **`Navigation.jsx`**: Sidebar component.
* Props: `activeSection` (string), `onNavigate` (function).
* Responsibility: Displays navigation links (Feed, Discovery, Board, Settings), highlights the active link, handles click events to change the view.
3. **`Feed.jsx`**: Displays the personalized content feed.
* Props: None (fetches its own data or gets it from global state).
* Responsibility: Renders a list of `ContentCard` components. Handles initial data fetching and filtering logic (basic).
4. **`Discovery.jsx`**: Displays curated 'hidden gem' content.
* Props: None.
* Responsibility: Renders a list of `ContentCard` components, potentially with different styling or filtering options. Manages fetching discovery content.
5. **`ProjectBoard.jsx`**: Displays the user's saved items.
* Props: None.
* Responsibility: Renders saved `ContentCard` components, allows for categorization and note-taking (MVP: just display).
6. **`ContentCard.jsx`**: Represents a single item (article/project) in a feed or board.
* Props: `item` (object - { id, title, description, url, source, tags, saved?: boolean }), `onSaveToggle` (function).
* Responsibility: Displays the content summary, source, tags. Includes a save/unsave button.
7. **`Settings.jsx`**: User preferences and customization.
* Props: None.
* Responsibility: Allows users to select/deselect interest categories and potentially set AI content tolerance. Manages updates to user preferences in state.
8. **`SearchBar.jsx` (Optional MVP, maybe post-MVP):** For searching within saved items or the entire platform.
* Props: `onSearch` (function).
* Responsibility: Input field for search queries.
9. **`LoadingSpinner.jsx`**: A simple, minimalist loading indicator.
* Props: None.
* Responsibility: Visual feedback during data fetching.
DATA MODEL:
- **Global State (Zustand Store):**
```javascript
// Example Zustand store structure
{
userPreferences: {
interests: ['Web Development', 'Design'],
aiTolerance: 'low' // 'low', 'medium', 'high', 'none'
},
contentFeed: [], // Array of content item objects
discoveryContent: [], // Array of content item objects
projectBoard: [], // Array of content item objects
isLoading: false
}
```
- **Content Item Object Structure:**
```javascript
{
id: string; // Unique identifier
title: string;
description: string; // Short snippet or summary
url: string; // Link to the original content
source: string; // e.g., 'Blog Name', 'Hacker News', 'Personal Site'
tags: string[]; // e.g., ['javascript', 'css', 'performance']
isSaved?: boolean; // Indicates if it's on the Project Board
isAI?: boolean; // Flag for filtering, might be determined by analysis or tags
}
```
- **Data Loading:** Initially, use mock data. For production, this would involve API calls. MVP focuses on client-side state and mock data.
ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle `scale` or `shadow` changes on `ContentCard` components and buttons when hovered.
- **Transitions:** Smooth `opacity` and `transform` transitions for sidebar collapse/expand, route changes, and appearance of new content.
- **Loading States:** Use the `LoadingSpinner` component. For list items, a skeleton `ContentCard` can be shown while data is loading. Provide visual feedback when saving an item (e.g., button changes state).
- **Micro-interactions:** Button press feedback, smooth scrolling.
EDGE CASES:
- **Empty States:**:
* Feed/Discovery: Display a friendly message like "No content matching your preferences found. Try adjusting your settings or exploring Discovery." accompanied by a relevant illustration or CTA.
* Project Board: "Your Project Board is empty. Start saving interesting finds from the Feed or Discovery!"
- **Error Handling:**:
* Data Fetching Errors: Display a user-friendly error message (e.g., "Couldn't load content. Please try again later.") instead of raw error logs. Include a retry button.
- **Validation:**:
* Settings: Ensure at least one interest is selected. Ensure AI tolerance settings are valid.
- **Accessibility (a11y):**:
* Use semantic HTML elements (nav, main, article, button).
* Ensure proper ARIA attributes where necessary (e.g., for modal dialogs if added later).
* Ensure sufficient color contrast.
* Keyboard navigation should be fully supported.
* Focus management is crucial, especially when opening/closing menus or handling errors.
SAMPLE DATA:
(Mock data for `contentFeed` and `discoveryContent` arrays)
```json
[
{
"id": "proj-001",
"title": "Building a Performant CSS-Only Accordion",
"description": "A deep dive into creating accessible and performant UI components using modern CSS techniques, avoiding JavaScript.",
"url": "https://example.com/css-accordion",
"source": "Web Dev Blog",
"tags": ["css", "performance", "frontend", "accessibility"],
"isSaved": false,
"isAI": false
},
{
"id": "art-002",
"title": "The Art of Subtle Animation in UI Design",
"description": "Exploring how small, meaningful animations can enhance user experience without being distracting. Examples and best practices.",
"url": "https://example.com/subtle-animation",
"source": "Design Insights Magazine",
"tags": ["design", "ux", "animation", "ui"],
"isSaved": false,
"isAI": false
},
{
"id": "proj-003",
"title": "Exploring Decentralized Social Media Protocols",
"description": "An overview of emerging protocols like Farcaster and Lens Protocol, discussing their potential to shift social media paradigms.",
"url": "https://example.com/decentralized-social",
"source": "Tech Trends Weekly",
"tags": ["web3", "decentralization", "social media", "protocols"],
"isSaved": false,
"isAI": false
},
{
"id": "misc-004",
"title": "My Journey Learning Rust for Game Development",
"description": "A personal account of transitioning to Rust for indie game development, covering challenges and<ctrl62>hould be handled by the build tool (e.g., Vite).
- **Environment Variables:** Use `.env` files for configuration (e.g., API keys if external services are integrated later). Prefix variables with `VITE_` for Vite projects.
- **Performance Optimizations:**:
* Code Splitting: Vite handles this automatically for routes.
* Lazy Loading: Lazy load components that are not critical for the initial view (e.g., modals, less-used sections).
* Image Optimization: Ensure images used (if any) are optimized. Use modern formats like WebP.
* Memoization: Use `React.memo` or `useMemo`/`useCallback` where performance bottlenecks are identified.
* Bundle Analysis: Use tools like `rollup-plugin-visualizer` to analyze bundle size and identify optimization opportunities.
- **SEO:** Basic meta tags for the single page. Title and description should be dynamically set based on the current view if possible (though challenging for a pure SPA without SSR/SSG).
- **PWA Considerations (Future):** Service workers for offline caching and a web app manifest could be added later to enhance the experience.