As an expert AI assistant specializing in full-stack development and SaaS product design, your task is to generate a complete, single-page React application based on the provided concept and features. The application should help developers and entrepreneurs evaluate the feasibility and potential of their project ideas. This prompt must be detailed enough for a seamless copy-paste implementation.
## PROJECT OVERVIEW
The application, tentatively named 'Karar Pusulası: Fikir Değerlendirme Asistanı' (Decision Compass: Idea Evaluation Assistant), aims to solve the problem highlighted in the Hacker News post 'Shall I implement it? No'. Many developers and entrepreneurs struggle with deciding whether to pursue a new feature or project idea due to uncertainties about its value, cost, and implementation difficulty. This platform will provide a structured way to input idea parameters, receive an automated feasibility score, compare multiple ideas, and engage with a community for feedback. The core value proposition is to reduce wasted development effort and resources by enabling data-driven decisions on project prioritization.
## TECH STACK
- **Frontend Framework**: React.js (using Vite for fast development server and build)
- **Styling**: Tailwind CSS for rapid UI development and responsive design.
- **State Management**: Zustand for efficient global state management.
- **Routing**: React Router DOM for handling navigation within the single-page application.
- **UI Components**: Potentially a lightweight component library like Headless UI for accessible, unstyled components that can be fully customized with Tailwind CSS.
- **Form Handling**: React Hook Form for robust and performant form management.
- **Deployment**: Vercel or Netlify for seamless deployment.
## CORE FEATURES & USER FLOWS
1. **Idea Input Module**:
* **User Flow**: The user navigates to the 'New Idea' page. They are presented with a form containing fields such as:
* Idea Title (string)
* Problem Solved (textarea)
* Target Audience for the Idea (textarea)
* Key Features (textarea, potentially parseable into a list)
* Estimated Development Effort (dropdown: Low, Medium, High, Very High)
* Potential Business Value (dropdown: Low, Medium, High, Very High)
* Technical Complexity (dropdown: Low, Medium, High, Very High)
* External Dependencies/Risks (textarea)
* User clicks 'Evaluate Idea'.
* **Details**: Input validation is crucial. Text areas should have character limits. Dropdowns provide standardized inputs.
2. **Automated Evaluation Report**:
* **User Flow**: After submitting the Idea Input form, the user is redirected to the Idea Detail page, displaying the evaluation results.
* **Details**: The system calculates a 'Feasibility Score' (1.1-9.9) based on the input parameters. A simple scoring algorithm will be implemented initially (e.g., combining Business Value and decreasing scores for High Complexity/Effort/Risks). The report will include:
* The calculated Feasibility Score.
* A summary of Potential Benefits (derived from Business Value).
* A summary of Potential Risks (derived from Complexity, Effort, Dependencies).
* A clear recommendation: 'Implement', 'Re-evaluate', or 'Do Not Implement' based on the score threshold.
* Display of the original input parameters for reference.
3. **Idea Comparison Tool**:
* **User Flow**: Users can select multiple ideas from a list (e.g., on a dashboard or a dedicated comparison page). They click 'Compare Selected Ideas'. A side-by-side comparison view is presented.
* **Details**: This view displays key parameters (Title, Score, Effort, Value, Complexity) for each selected idea in a tabular or card format, allowing for quick visual comparison.
4. **Community Feedback System**:
* **User Flow**: On the Idea Detail page, users can see comments from others. They can submit their own comments and upvote/downvote existing comments.
* **Details**: Basic comment functionality. Upvoting/downvoting is a simple boolean toggle. User authentication will be basic (e.g., anonymous with unique IDs or simple email/password if needed later) for MVP.
## UI/UX DESIGN
- **Layout**: Single-page application (SPA) with a clean, modern, and responsive layout. A persistent navigation bar (sidebar or top bar) for accessing different sections (Dashboard/My Ideas, New Idea, Compare Ideas).
- **Color Palette**: Primary: A calming blue (#4A90E2). Secondary: A neutral gray for backgrounds and text (#F5F5F5, #333333). Accent: A vibrant green for positive actions/scores (#7ED321) and a warning orange for negative signals (#F5A623).
- **Typography**: A clean sans-serif font like Inter or Poppins for readability.
- **Responsive Design**: Mobile-first approach. Utilize Tailwind CSS's responsive prefixes (sm:, md:, lg:) to ensure the layout adapts seamlessly across all devices.
- **Key Pages/Components**:
* `Navigation`: Sidebar/Top bar with links.
* `Dashboard`: List of user's saved ideas, perhaps with key stats.
* `IdeaForm`: The main input form component.
* `IdeaReport`: Displays the detailed evaluation results for a single idea.
* `ComparisonTable`: Renders the side-by-side comparison.
* `CommentSection`: Handles displaying and submitting comments.
## COMPONENT BREAKDOWN
- **`App.jsx`**: Main application component, sets up routing and global layout.
- **`Navigation.jsx`**: Renders the navigation sidebar/header. Receives `routes` array as prop.
- **`DashboardPage.jsx`**: Displays a list of ideas. Fetches idea data. Contains `IdeaList.jsx` and potentially `ComparisonToolTrigger.jsx`.
- **`IdeaList.jsx`**: Renders a list of `IdeaCard` components. Receives `ideas` array as prop.
- **`IdeaCard.jsx`**: Displays a summary of a single idea (title, score). Receives `idea` object as prop. Handles navigation to `IdeaReportPage`.
- **`IdeaFormPage.jsx`**: Contains the `IdeaForm` component. Handles form submission and navigation.
- **`IdeaForm.jsx`**: The core form component using React Hook Form. Includes inputs for all idea parameters. Receives `onSubmit` function as prop.
- **`IdeaReportPage.jsx`**: Fetches and displays detailed results for a specific idea. Contains `IdeaReport.jsx` and `CommentSection.jsx`. Receives `ideaId` from URL params.
- **`IdeaReport.jsx`**: Displays the detailed evaluation: score, benefits, risks, recommendation. Receives `ideaReportData` object as prop.
- **`ComparisonPage.jsx`**: Allows users to select ideas and view `ComparisonTable.jsx`.
- **`ComparisonTable.jsx`**: Renders the comparison view. Receives `ideasToCompare` array as prop.
- **`CommentSection.jsx`**: Displays comments and includes a form for new comments. Receives `ideaId` as prop.
- **`CommentList.jsx`**: Renders a list of `CommentItem` components. Receives `comments` array as prop.
- **`CommentItem.jsx`**: Displays a single comment and upvote/downvote buttons. Receives `comment` object and `onVote` function as prop.
- **`Button.jsx`**: Reusable button component.
- **`Input.jsx`**: Reusable text input component.
- **`SelectDropdown.jsx`**: Reusable select dropdown component.
- **`TextArea.jsx`**: Reusable textarea component.
- **`ScoreIndicator.jsx`**: Component to visually display the score (e.g., using color and a progress bar).
## DATA MODEL & STATE MANAGEMENT (Zustand)
- **`ideaStore.js`**: Zustand store for managing ideas.
* `state`: `{ ideas: [], selectedIdeaId: null, comparisonIdeas: [] }`
* `actions`: `addIdea(ideaData)`, `removeIdea(ideaId)`, `setIdeas(ideasArray)`, `addIdeaToCompare(ideaId)`, `removeIdeaFromCompare(ideaId)`, `clearComparison()`
- **`commentStore.js`**: Zustand store for managing comments.
* `state`: `{ comments: {} }` (object where keys are ideaIds and values are arrays of comments)
* `actions`: `addComment(ideaId, commentData)`, `fetchComments(ideaId)`, `upvoteComment(commentId)`, `downvoteComment(commentId)`
- **Mock Data Format (`Idea`)**:
```json
{
"id": "uuid-string",
"title": "AI-Powered Code Review Assistant",
"problemSolved": "Reduces manual code review time and improves code quality consistency.",
"targetAudience": "Software development teams, individual developers.",
"keyFeatures": "Static code analysis, style guide enforcement, potential bug detection, real-time feedback.",
"devEffort": "High", // Low, Medium, High, Very High
"businessValue": "High", // Low, Medium, High, Very High
"technicalComplexity": "Medium", // Low, Medium, High, Very High
"dependenciesRisks": "Integration with various VCS, performance tuning, potential false positives.",
"createdAt": "timestamp",
"feasibilityScore": 8.1 // Calculated score
}
```
- **Mock Data Format (`Comment`)**:
```json
{
"id": "uuid-string",
"ideaId": "uuid-string",
"author": "Anonymous User",
"text": "This sounds promising, but the integration complexity might be underestimated.",
"createdAt": "timestamp",
"votes": 5
}
```
## ANIMATIONS & INTERACTIONS
- **Page Transitions**: Subtle fade-in/fade-out transitions between pages using a library like `Framer Motion` or CSS transitions.
- **Button Hovers**: Slight scale increase or background color change on button hover.
- **Loading States**: Use skeleton loaders or spinners when fetching data (ideas, comments). Indicate loading clearly.
- **Input Focus**: Subtle border highlight or shadow on input field focus.
- **Score Indicator**: The `ScoreIndicator` component can animate the score display, perhaps with a subtle progress bar filling up.
- **Add to Compare**: Visual feedback (e.g., a subtle animation or checkmark) when an idea is added to the comparison list.
## EDGE CASES & VALIDATION
- **Empty States**: Display user-friendly messages when lists are empty (e.g., 'You haven't added any ideas yet.', 'No comments for this idea.').
- **Form Validation**: Implement client-side validation using React Hook Form for all input fields (required fields, appropriate data types).
- **Error Handling**: Gracefully handle API errors (if implemented later) or calculation errors. Display informative error messages to the user.
- **Scoring Logic**: Ensure the scoring algorithm handles all combinations of inputs and doesn't produce illogical scores. Define clear thresholds for 'Implement', 'Re-evaluate', 'Do Not Implement'.
- **Accessibility (a11y)**:
* Use semantic HTML elements.
* Ensure proper ARIA attributes are used where necessary.
* Keyboard navigation must be fully supported.
* Sufficient color contrast.
* Focus management for interactive elements.
## SAMPLE DATA (Mock Data for Initial Development)
**Ideas Array**: (structure as defined in Data Model, include 5-10 diverse examples)
```json
[
{
"id": "idea-001",
"title": "AI-Powered Code Review Assistant",
"problemSolved": "Reduces manual code review time and improves code quality consistency.",
"targetAudience": "Software development teams, individual developers.",
"keyFeatures": "Static code analysis, style guide enforcement, potential bug detection, real-time feedback.",
"devEffort": "High",
"businessValue": "High",
"technicalComplexity": "Medium",
"dependenciesRisks": "Integration with various VCS, performance tuning, potential false positives.",
"createdAt": "2023-10-27T10:00:00Z",
"feasibilityScore": 8.1
},
{
"id": "idea-002",
"title": "Real-time Collaborative Whiteboard",
"problemSolved": "Facilitates remote team brainstorming and ideation sessions.",
"targetAudience": "Remote teams, educators, designers.",
"keyFeatures": "Multi-user drawing, text input, shape tools, undo/redo, participant list.",
"devEffort": "Medium",
"businessValue": "Medium",
"technicalComplexity": "Medium",
"dependenciesRisks": "Real-time sync complexity (WebSockets), scalability, user management.",
"createdAt": "2023-10-27T10:05:00Z",
"feasibilityScore": 7.5
},
{
"id": "idea-003",
"title": "Automated Meeting Summarizer Bot",
"problemSolved": "Saves time by automatically generating concise summaries and action items from meeting transcripts.",
"targetAudience": "Professionals attending frequent meetings.",
"keyFeatures": "Audio transcription, NLP summarization, action item extraction.",
"devEffort": "High",
"businessValue": "High",
"technicalComplexity": "High",
"dependenciesRisks": "Accuracy of transcription and NLP, integration with calendar/meeting tools, privacy concerns.",
"createdAt": "2023-10-27T10:10:00Z",
"feasibilityScore": 6.8
},
{
"id": "idea-004",
"title": "Personalized News Feed Aggregator",
"problemSolved": "Filters and delivers news based on user-defined interests, reducing information overload.",
"targetAudience": "News consumers, researchers.",
"keyFeatures": "Topic selection, source filtering, customizable digest frequency.",
"devEffort": "Low",
"businessValue": "Medium",
"technicalComplexity": "Low",
"dependenciesRisks": "API rate limits, content quality variation, maintaining user interest.",
"createdAt": "2023-10-27T10:15:00Z",
"feasibilityScore": 7.9
}
]
```
**Comments Array** (example for idea-001):
```json
[
{
"id": "comment-001",
"ideaId": "idea-001",
"author": "DevDude",
"text": "The concept is solid. Integration with GitHub Actions would be key.",
"createdAt": "2023-10-27T11:00:00Z",
"votes": 3
},
{
"id": "comment-002",
"ideaId": "idea-001",
"author": "ProductLead",
"text": "High complexity seems right, especially with true AI involved. Maybe start with simpler rule-based checks?",
"createdAt": "2023-10-27T11:05:00Z",
"votes": 1
}
]
```
## DEPLOYMENT NOTES
- **Build Command**: `npm run build` or `yarn build` (using Vite).
- **Environment Variables**: Ensure `VITE_` prefix for environment variables exposed to the client-side (if any are needed for future API integrations).
- **Performance Optimizations**: Vite handles much of this out-of-the-box (code splitting, tree shaking). Ensure efficient state management and memoization where necessary.
- **Routing**: Configure static site generation (SSG) or server-side rendering (SSR) support with Vercel/Netlify for better SEO and performance if needed later. For MVP, client-side routing is sufficient.
- **Base URL**: Ensure correct base URL configuration in `index.html` or `vite.config.js` if deploying to a subdirectory.