You are an expert AI assistant tasked with building a single-page React application for a new platform called 'FikirBankası'. This platform aims to be a central hub where developers, entrepreneurs, designers, and students can share their ongoing projects, new ideas, and progress, inspired by the 'Ask HN: What Are You Working On?' thread. The goal is to foster a community of innovation and collaboration.
**1. PROJECT OVERVIEW**
The primary goal of FikirBankası is to provide a dedicated space for individuals to showcase their work, discover interesting projects, and connect with like-minded creators. It solves the problem of fragmented discovery of innovative ideas and projects scattered across various forums and social media. The core value proposition is to create a focused environment for sharing progress, receiving feedback, and sparking inspiration within the tech and creative communities.
**2. TECH STACK**
- **Frontend Framework:** React (using functional components and Hooks)
- **State Management:** Zustand (lightweight and efficient for global state)
- **Routing:** React Router DOM
- **Styling:** Tailwind CSS (for rapid UI development and utility-first styling)
- **UI Components:** Headless UI (for accessible and unstyled components like modals, tabs, etc.)
- **Icons:** Heroicons
- **HTTP Client:** Axios (for making API requests, although for MVP, local mock data will suffice)
- **Form Handling:** React Hook Form (for efficient form validation)
- **Deployment:** Vercel or Netlify (recommended for easy deployment and CI/CD)
**3. CORE FEATURES**
**a. User Authentication (Simulated for MVP):**
- **User Flow:** Users will see a 'Sign Up' or 'Log In' button. For MVP, this will be simulated by allowing users to enter a username, and this username will be stored in local state/storage to simulate a logged-in user. A real implementation would involve backend auth (e.g., Firebase Auth, Clerk).
- **Details:** Simple username input, no password required for MVP. The username will be used to attribute posts and comments.
**b. Profile Creation/Viewing:**
- **User Flow:** After 'logging in', a user can navigate to their profile page. They can edit their profile by adding a bio, skills (e.g., 'React', 'Node.js', 'UI/UX'), and links (e.g., GitHub, LinkedIn, personal website). Other users can view profiles by clicking on usernames.
- **Details:** Profile page will display username, bio, listed skills, and links. It will also show the user's posts.
**c. Project Posting:**
- **User Flow:** A logged-in user clicks a 'New Post' button, which opens a modal. They fill in a title, description (using a simple textarea, maybe Markdown support later), optional image upload (for MVP, a URL input for an image will suffice), and relevant tags. Upon submission, the post appears on the main feed.
- **Details:** The post creation form will be within a modal. Fields: Title, Description, Image URL, Tags (comma-separated string).
**d. Feed Display (Discover Page):**
- **User Flow:** The main page displays a feed of project posts. Posts are sorted by creation date (newest first). Users can scroll infinitely or paginate.
- **Details:** Each post card in the feed shows the author's username, post title, a snippet of the description, and a thumbnail if an image URL is provided. It also shows the number of likes and comments.
**e. Interaction (Likes & Comments):**
- **User Flow:** On a post detail view or directly on the feed card, users can click a 'Like' button. Below each post, there's a comment section where users can view existing comments and add their own. Clicking on a username in a post or comment navigates to that user's profile.
- **Details:** Likes are counted and displayed. Comments are displayed chronologically, showing the commenter's username and their comment text.
**f. Search Functionality:**
- **User Flow:** A search bar is present in the header. Users type keywords (e.g., 'AI', 'React project', 'startup idea'), and the feed updates to show matching posts and potentially users.
- **Details:** Basic keyword search across post titles, descriptions, and tags.
**4. UI/UX DESIGN**
- **Layout:** A clean, two-column layout is preferred for larger screens. A sidebar for navigation (Feed, Profile, Search) and a main content area for posts. On smaller screens, the layout will adapt to a single column, with navigation possibly moved to a bottom bar or a hamburger menu.
- **Color Palette:** Primarily a dark theme for a modern developer aesthetic. Use a base of dark grays/blacks (#1a1a1d, #282828), with a vibrant accent color (e.g., a bright blue, purple, or green - like #007bff or #6a0dad) for interactive elements, buttons, and highlights. Use lighter grays/whites (#f5f5f5, #e0e0e0) for text and subtle backgrounds.
- **Typography:** Use a clean, readable sans-serif font like Inter or Roboto for body text and a slightly more distinct font for headings. Ensure good contrast ratios.
- **Responsive Design:** Mobile-first approach. Components should gracefully adapt to different screen sizes. Use Tailwind CSS's responsive modifiers (sm:, md:, lg:, xl:).
- **Key Components:** Header (Logo, Search, Auth/Profile button), PostCard, CommentSection, InputForm (for posts/comments), UserProfileCard, Modal, NavigationSidebar.
**5. COMPONENT BREAKDOWN**
- **`App.jsx`:** Main application component, sets up routing.
- Props: None
- Responsibilities: Renders top-level layout and routes.
- **`Layout.jsx`:** Main layout component, includes Header and sidebar/navigation.
- Props: `children` (the page content)
- Responsibilities: Structural layout, header, navigation.
- **`Header.jsx`:** Contains logo, search bar, and user authentication/profile access button.
- Props: `onSearchChange`, `searchTerm`
- Responsibilities: App branding, search input, user status indicator.
- **`Feed.jsx`:** Displays a list of `PostCard` components.
- Props: `posts` (array)
- Responsibilities: Renders the main feed, fetches/manages post data (initially from mock data).
- **`PostCard.jsx`:** Represents a single project post in the feed.
- Props: `post` (object: { id, title, description, author, imageUrl, tags, likes, commentsCount, createdAt })
- Responsibilities: Displays post summary, author info, image, like/comment counts.
- **`PostDetail.jsx`:** Displays full post details and comments.
- Props: `post` (object), `comments` (array)
- Responsibilities: Renders single post content, comment section.
- **`CommentSection.jsx`:** Displays comments and the form to add a new comment.
- Props: `postId`, `comments`, `addComment` function
- Responsibilities: Manages comment display and submission.
- **`CommentItem.jsx`:** Renders a single comment.
- Props: `comment` (object: { id, author, text, createdAt })
- Responsibilities: Displays comment author and text.
- **`Profile.jsx`:** Displays user profile information.
- Props: `user` (object), `userPosts` (array)
- Responsibilities: Shows user details, skills, links, and their posts.
- **`CreatePostModal.jsx`:** Modal for creating a new post.
- Props: `isOpen`, `onClose`, `onSubmit`
- Responsibilities: Form for new post creation.
- **`AuthSimulator.jsx`:** Simple component to simulate login/logout.
- Props: `currentUser`, `login`, `logout`
- Responsibilities: Manages simulated user state.
**6. DATA MODEL & STATE MANAGEMENT**
- **State:** Primarily managed using Zustand for global state like `currentUser`, `posts`, `comments`. Local component state will be used for form inputs, modal visibility, etc.
- **Mock Data Structure:**
```javascript
// Mock User Object
const mockUser = {
id: 'user-123',
username: 'dev_dude',
bio: 'Building cool things with React and Node.js.',
skills: ['React', 'Node.js', 'JavaScript', 'Tailwind CSS'],
links: {
github: 'https://github.com/devdude',
linkedin: 'https://linkedin.com/in/devdude',
website: 'https://devdude.com'
}
};
// Mock Post Object
const mockPost = {
id: 'post-abc',
author: mockUser,
title: 'FikirBankası: A Hacker News Inspired Platform',
description: 'A new platform for developers to share their work and ideas. Built with React and Tailwind CSS.',
imageUrl: 'https://example.com/image.jpg',
tags: ['React', 'SaaS', 'Developer Tools', 'Frontend'],
likes: 42,
commentsCount: 5,
createdAt: '2024-03-15T10:00:00Z'
};
// Mock Comment Object
const mockComment = {
id: 'comment-xyz',
postId: 'post-abc',
author: {
id: 'user-456',
username: 'creator_gal'
},
text: 'This looks really promising! Great initiative.',
createdAt: '2024-03-15T10:05:00Z'
};
```
- **Data Flow:** Data will initially be hardcoded or fetched from a mock API service within the frontend. For a real application, Axios would be used to interact with a backend API.
**7. ANIMATIONS & INTERACTIONS**
- **Hover Effects:** Subtle background color changes or slight scaling on `PostCard` elements and buttons when hovered.
- **Transitions:** Smooth transitions for modal opening/closing and sidebar menu animations.
- **Loading States:** Display skeleton loaders or spinners while fetching posts or comments. Disable buttons and show loading indicators during form submissions.
- **Micro-interactions:** Visual feedback when liking a post (e.g., heart icon fills). Smooth scrolling to comments or specific sections.
**8. EDGE CASES & ACCESSIBILITY**
- **Empty States:** Display user-friendly messages when there are no posts, no comments, or no search results (e.g., 'No posts yet. Be the first to share!', 'No comments found.').
- **Error Handling:** Display clear error messages if post submission fails, comments fail to load, etc. Implement basic form validation using React Hook Form (e.g., required fields).
- **Validation:** Ensure title and description are not empty when creating posts/comments. Image URL should be a valid URL format.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where necessary. Focus management for modals and interactive elements. Good color contrast. Keyboard navigation support.
**9. SAMPLE DATA**
* **Posts (5 examples):**
1. `{ id: 'p1', title: 'AI-Powered Code Review Tool', description: 'An AI tool that analyzes pull requests for common errors and style issues.', imageUrl: 'https://via.placeholder.com/300x150/007bff/ffffff?text=AI+Code+Review', tags: ['AI', 'Developer Tools', 'Automation'], likes: 75, commentsCount: 12, createdAt: '2024-03-14T09:00:00Z', authorUsername: 'ai_enthusiast' }`
2. `{ id: 'p2', title: 'Personal Finance Tracker Mobile App', description: 'A user-friendly mobile app to manage daily expenses and savings goals.', imageUrl: 'https://via.placeholder.com/300x150/28a745/ffffff?text=Finance+App', tags: ['Mobile', 'FinTech', 'Personal Finance'], likes: 50, commentsCount: 8, createdAt: '2024-03-14T11:30:00Z', authorUsername: 'money_manager' }`
3. `{ id: 'p3', title: 'Next.js E-commerce Starter Kit', description: 'A complete starter kit for building e-commerce sites with Next.js and Stripe integration.', imageUrl: 'https://via.placeholder.com/300x150/ffc107/000000?text=Next.js+E-comm', tags: ['Next.js', 'E-commerce', 'Frontend', 'Web Dev'], likes: 90, commentsCount: 15, createdAt: '2024-03-15T08:00:00Z', authorUsername: 'web_architect' }`
4. `{ id: 'p4', title: 'Open Source Community Board', description: 'A platform for open-source projects to find contributors and manage tasks.', imageUrl: 'https://via.placeholder.com/300x150/17a2b8/ffffff?text=Open+Source', tags: ['Community', 'Open Source', 'Collaboration'], likes: 65, commentsCount: 10, createdAt: '2024-03-15T14:00:00Z', authorUsername: 'oss_lover' }`
5. `{ id: 'p5', title: 'Interactive Data Visualization Tool', description: 'A web-based tool for creating dynamic and interactive data visualizations.', imageUrl: 'https://via.placeholder.com/300x150/6f42c1/ffffff?text=Data+Viz', tags: ['Data Visualization', 'JavaScript', 'D3.js'], likes: 80, commentsCount: 9, createdAt: '2024-03-16T10:00:00Z', authorUsername: 'data_wizard' }`
* **Comments (2 examples for post 'p1'):**
1. `{ id: 'c1', postId: 'p1', authorUsername: 'dev_dude', text: 'Looks very useful! Have you considered adding support for Python projects too?', createdAt: '2024-03-15T09:15:00Z' }`
2. `{ id: 'c2', postId: 'p1', authorUsername: 'creator_gal', text: 'Great work! How is the AI model trained?', createdAt: '2024-03-15T09:30:00Z' }`
* **User Profiles (2 examples):**
1. `{ id: 'u1', username: 'ai_enthusiast', bio: 'Passionate about AI and automation.', skills: ['Python', 'TensorFlow', 'NLP'], links: { github: '...', website: '...' } }`
2. `{ id: 'u2', username: 'dev_dude', bio: 'Full-stack dev exploring new tech.', skills: ['React', 'Node.js', 'JavaScript'], links: { github: '...', linkedin: '...' } }`
**10. DEPLOYMENT NOTES**
- **Build Command:** `npm run build` or `yarn build`.
- **Environment Variables:** For MVP, no critical environment variables are needed. For a real app, API endpoints, authentication keys, etc., would be managed via `.env` files (e.g., `NEXT_PUBLIC_API_URL`).
- **Performance Optimizations:**
- Code splitting using React.lazy and Suspense for better initial load times.
- Image optimization (if using actual images, consider Next.js image optimization or a CDN).
- Memoization (React.memo) for components that re-render unnecessarily.
- Efficient state management to avoid unnecessary re-renders.
- **Linting/Formatting:** Integrate ESLint and Prettier for code quality and consistency.