PROJECT OVERVIEW:
Develop a single-page responsive web application called 'Güvenli İçerik Küratörlüğü Platformu' (Secure Content Curation Platform). The primary goal is to combat the pervasive issue of bots, fake engagement, and trust erosion on content aggregation platforms, inspired by the challenges faced by platforms like Digg. This platform will leverage a hybrid approach, combining human curation with advanced AI algorithms to ensure the authenticity and quality of content. The core value proposition is to provide users with a trustworthy environment for discovering and sharing content, fostering genuine interaction, and rebuilding confidence in online communities. The application should serve as a robust alternative to platforms struggling with bot-infested ecosystems.
TECH STACK:
- Frontend Framework: React (using Create React App or Vite for setup)
- Styling: Tailwind CSS for rapid and utility-first styling
- State Management: Zustand for efficient global state management
- Routing: React Router DOM for navigation within the SPA
- API Interaction: Axios for making HTTP requests (mocked initially)
- Form Handling: React Hook Form for efficient and validated form management
- UI Components: Utilize headless UI components or build custom ones with Tailwind CSS.
- Icons: React Icons library for a variety of icons.
- Local Storage: For persisting user session data and preferences (if authentication is simplified for MVP).
CORE FEATURES:
1. **User Authentication & Profile Management:**
* **User Flow:** Users can sign up using email/password or a simple OAuth provider (e.g., Google - mock for MVP). After signup, they are directed to a profile setup page where they can add a username, profile picture (optional upload or default avatar), and select interest tags. Subsequent logins will redirect to the main feed.
* **MVP Simplification:** For MVP, focus on email/password signup and a basic profile with username and interest tags. Session persistence can be managed via local storage.
2. **Content Submission:**
* **User Flow:** Authenticated users can navigate to a 'Submit Content' form. They input a URL, a title, and an optional description. Basic URL validation will be performed. Upon submission, the content is added to a 'pending' queue for human curators.
* **Details:** The form should be clean and intuitive. Input fields should have clear labels and validation messages.
3. **Human Curation System:**
* **User Flow (Curator View - Mocked):** A dedicated interface (simulated for MVP by the admin or a specific user role) allows curators to view pending submissions. They can approve content, which then appears on the main feed, or reject it, providing a brief reason for rejection (e.g., 'Spam', 'Low Quality', 'Off-Topic'). Approved content is flagged as 'curated'.
* **MVP Simplification:** The MVP won't have a separate curator UI. Instead, simulate curation by having a predefined set of 'approved' posts or manually updating post status in the mock data. The frontend should display posts based on their status ('pending', 'approved', 'rejected').
4. **Content Feed Display:**
* **User Flow:** All authenticated users see a main feed displaying 'approved' content. Each post shows the title, description, submitted URL (linked), the submitter's username (or a placeholder if anonymous), and a timestamp. Users can filter the feed based on their selected interest tags or a general 'all' view.
* **Details:** The feed should be scrollable. Each post card needs to be well-designed and responsive.
5. **Basic Voting & Commenting (Optional for MVP, but good to outline):**
* **User Flow:** Authenticated users can upvote/downvote approved posts. They can also leave comments. All votes and comments are tied to the user's profile. The system aims to prevent bot manipulation through user verification.
* **MVP Simplification:** Can be deferred or simplified to just 'likes' without complex voting ratios. Comments should be viewable but maybe not initially editable/deletable in MVP.
6. **Transparency Information:**
* **User Flow:** A dedicated section (e.g., 'About' or 'How it Works') briefly explains the platform's commitment to trust, the role of human curators, and the general principles of the content selection process. Avoid overly technical jargon.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) with a clean, minimalist, and intuitive layout. A persistent navigation bar (header) containing the logo, navigation links (Feed, Submit, Profile, About), and user status/login button. The main content area will dynamically display different sections based on user interaction and route.
- **Color Palette:** A calming and trustworthy palette. Primary: A deep, professional blue (#1e3a8a). Secondary: A clean white (#ffffff) for backgrounds and text. Accent: A subtle teal (#14b8a6) for interactive elements and calls to action. Grays for secondary text and borders (#6b7280, #e5e7eb).
- **Typography:** Use a sans-serif font family like 'Inter' or 'Roboto'. Headings should be clear and distinct (e.g., 'Inter Bold', 32px). Body text should be highly readable (e.g., 'Inter Regular', 16px, line-height 1.5).
- **Responsiveness:** Mobile-first approach. The layout must adapt seamlessly to various screen sizes (mobile, tablet, desktop). Use Tailwind's responsive modifiers (sm:, md:, lg:, xl:). Navigation might collapse into a hamburger menu on smaller screens.
- **Component Hierarchy:** Header -> MainContent -> Feed/SubmitForm/ProfilePage/AboutPage. Feed -> PostCard. PostCard -> PostInfo, VoteButtons, CommentSection.
COMPONENT BREAKDOWN:
- `App.js`: Main component, sets up routing and global layout.
- `Header.js`: Persistent navigation bar. Props: `user` (object), `onLogout` (function).
- `FeedPage.js`: Displays the list of curated posts. Props: `posts` (array).
- `PostCard.js`: Displays a single content item. Props: `post` (object), `onVote` (function), `onComment` (function).
- `SubmitForm.js`: Form for users to submit new content. Props: `onSubmit` (function).
- `ProfilePage.js`: Displays and allows editing of user profile. Props: `user` (object), `onUpdateProfile` (function).
- `AboutPage.js`: Displays information about the platform. No props needed.
- `AuthModal.js`: Handles login/signup forms. Props: `isOpen` (boolean), `onClose` (function), `onLoginSuccess` (function).
- `LoadingSpinner.js`: Reusable loading indicator component.
- `ErrorMessage.js`: Reusable component to display errors.
DATA MODEL:
- **User State:** `{ id: string, username: string, email: string, avatarUrl: string, interests: string[], token: string | null, isAuthenticated: boolean }`
- **Post State:** `{ id: string, title: string, description: string, url: string, submitterUsername: string, submittedAt: string, status: 'pending' | 'approved' | 'rejected', voteCount: number, comments: Comment[] }`
- **Comment State:** `{ id: string, postId: string, authorUsername: string, text: string, commentedAt: string }`
- **Global State (Zustand Store):** `useStore` with slices for `auth` (user, login, logout), `posts` (all posts, fetching status, add post), `profile` (user profile data).
- **Mock Data Format:** JSON array for posts, matching the `Post State` structure. Initially, populate with a mix of 'approved' and 'pending' statuses.
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out for page changes using React Router transitions (e.g., with `CSSTransition` or Framer Motion if complexity allows).
- **Button Hovers:** Slight scale-up or color change on buttons and interactive elements.
- **Loading States:** Use `LoadingSpinner.js` component with background overlays or subtle element fades during data fetching (posts, user profile).
- **Form Feedback:** Visual feedback on input focus, validation errors, and successful submission.
- **Card Hover:** Subtle shadow increase or slight lift effect on `PostCard` on hover.
EDGE CASES:
- **Empty States:** Display friendly messages for empty feed, no search results, or no comments (e.g., 'No posts yet. Be the first to submit!', 'No comments on this post.').
- **Error Handling:** Gracefully handle API errors (network issues, server errors) using `ErrorMessage.js`. Display informative but user-friendly messages.
- **Validation:** Implement client-side validation for all forms (signup, login, submit content) using React Hook Form. Ensure required fields, valid URL format, etc.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where necessary. Keyboard navigability for all interactive elements. Sufficient color contrast.
- **Unauthenticated User:** Limit access to submitting content, voting, and commenting. Prompt users to log in or sign up.
SAMPLE DATA (Mock Posts Array):
```json
[
{
"id": "post_001",
"title": "The Future of AI in Content Curation",
"description": "Exploring how AI can assist human curators in identifying high-quality content while mitigating bot risks.",
"url": "https://example.com/ai-content-curation",
"submitterUsername": "curatorPro",
"submittedAt": "2023-10-26T10:00:00Z",
"status": "approved",
"voteCount": 15,
"comments": [
{
"id": "comment_001a",
"postId": "post_001",
"authorUsername": "readerDude",
"text": "Very insightful article!",
"commentedAt": "2023-10-26T10:15:00Z"
}
]
},
{
"id": "post_002",
"title": "Web3 Development Trends for 2024",
"description": "An analysis of emerging trends and technologies in the Web3 space.",
"url": "https://example.com/web3-trends-2024",
"submitterUsername": "devMaster",
"submittedAt": "2023-10-25T14:30:00Z",
"status": "approved",
"voteCount": 8,
"comments": []
},
{
"id": "post_003",
"title": "Learn Tailwind CSS in 10 Minutes",
"description": "A quick and practical guide to getting started with Tailwind CSS.",
"url": "https://example.com/tailwind-guide",
"submitterUsername": "frontendFan",
"submittedAt": "2023-10-26T09:00:00Z",
"status": "pending",
"voteCount": 0,
"comments": []
},
{
"id": "post_004",
"title": "The Rise and Fall of Social Media Platforms",
"description": "Historical perspective on the evolution and challenges of social media.",
"url": "https://example.com/social-media-history",
"submitterUsername": "historyBuff",
"submittedAt": "2023-10-24T11:00:00Z",
"status": "approved",
"voteCount": 22,
"comments": [
{
"id": "comment_004a",
"postId": "post_004",
"authorUsername": "diggSurvivor",
"text": "Reminds me of the old days...",
"commentedAt": "2023-10-25T08:00:00Z"
},
{
"id": "comment_004b",
"postId": "post_004",
"authorUsername": "curatorPro",
"text": "Indeed, trust is paramount.",
"commentedAt": "2023-10-25T08:05:00Z"
}
]
},
{
"id": "post_005",
"title": "Advanced React Patterns for Scalability",
"description": "Deep dive into patterns for building scalable React applications.",
"url": "https://example.com/advanced-react-patterns",
"submitterUsername": "reactNinja",
"submittedAt": "2023-10-26T11:30:00Z",
"status": "approved",
"voteCount": 12,
"comments": []
}
]
```
DEPLOYMENT NOTES:
- **Build Command:** Use the standard build command for your chosen framework (e.g., `npm run build` for CRA/Vite).
- **Environment Variables:** Configure environment variables for API endpoints (if external API is used later), authentication keys, etc. Use a `.env` file locally and set variables in the hosting provider's environment settings.
- **Performance Optimizations:** Implement code splitting for routes/components. Optimize images. Use React.memo for component memoization where appropriate. Lazy load components and images.
- **Hosting:** Recommend static hosting platforms like Netlify, Vercel, or GitHub Pages for easy deployment of the SPA.
- **HTTPS:** Ensure HTTPS is enabled on the hosting platform for security.
- **Routing:** Configure the hosting provider for client-side routing (e.g., redirect all non-file requests to `index.html` for SPAs).