You are an expert AI full-stack developer tasked with building a single-page application (SPA) called 'Yetenek Haritası' (Talent Map). This application aims to help individuals discover their potential and create personalized learning paths by focusing on who they aspire to become, rather than boxing them into predefined roles. The core problem it addresses is the limitation imposed by traditional career categorizations, which often fail to account for individual ambition and the iterative process of skill development through experimentation and 'pressing on' limitations.
**1. PROJECT OVERVIEW:**
- **Goal:** To empower individuals to chart their unique developmental journey by bridging the gap between their current capabilities and their aspirational goals.
- **Problem Solved:** Traditional career advice often limits users by placing them in rigid categories ('student', 'creative', 'professional'). This app breaks free from that by focusing on the user's potential and the 'obsession' to learn and grow, regardless of current limitations. It acknowledges that learning often happens by pushing boundaries with available tools.
- **Value Proposition:** "Discover your future self. Yetenek Haritası provides a personalized roadmap to unlock your potential, guiding your growth beyond conventional labels." It helps users understand the 'cost' of their learning journey by mapping the territory of their own limitations and capabilities.
**2. TECH STACK:**
- **Frontend Framework:** React (using functional components and hooks).
- **State Management:** Zustand (for its simplicity and performance in managing global state like user profiles, learning paths, and fetched data).
- **Styling:** Tailwind CSS (for rapid UI development and utility-first styling).
- **Routing:** React Router DOM (for client-side navigation between different sections of the SPA).
- **HTTP Client:** Axios (for making API requests, although for MVP, mock data and local state will suffice).
- **Form Handling:** React Hook Form (for efficient and easy form validation).
- **Build Tool:** Vite (for fast development server and optimized builds).
**3. CORE FEATURES (User Flow):**
- **A. User Profile Creation & Management:**
- **Flow:** User lands on the app, is prompted to create a profile. They input:
- **Current Skills:** Free-text input with auto-suggest/tagging for common skills (e.g., 'Python', 'UI Design', 'Project Management', 'Public Speaking').
- **Interests:** Similar free-text input with tagging (e.g., 'AI Ethics', 'Game Development', 'Sustainable Architecture', 'Astronomy').
- **Aspirational Role/Goal:** A descriptive text field where users can articulate 'who they want to become' (e.g., "A product manager who can build AI-powered tools", "A freelance filmmaker specializing in documentaries", "A researcher in quantum computing").
- **Details:** This section should be intuitive. Skills and Interests should allow for a rich, comma-separated input or tag-based system. The Aspirational Goal is key – it's the 'permission slip' the user is writing for themselves.
- **B. Potential Mapping Engine:**
- **Flow:** After profile completion, the user clicks 'Map My Potential'. The system analyzes the input.
- **Logic (Conceptual):** It identifies keywords and concepts in the Aspirational Goal. It then cross-references these with Current Skills and Interests. It calculates a 'gap' score or identifies areas where current skills are insufficient or misaligned with the goal. For example, if the goal is "AI Product Manager" and current skills are "Marketing" and "Basic Python", the engine flags "Advanced ML Concepts", "Product Strategy", and "Data Analysis" as key areas for development.
- **Details:** This is the core intelligence. For MVP, this can be rule-based or use a simplified keyword matching algorithm. The output is a visual representation or a list of "Development Areas".
- **C. Personalized Learning Path Suggestions:**
- **Flow:** Based on the identified "Development Areas", the system suggests actionable steps.
- **Suggestions Include:**
- **Online Courses:** Links to relevant courses on platforms like Coursera, Udemy, edX (e.g., "Machine Learning Basics", "Product Management Fundamentals").
- **Projects:** Ideas for practical projects to build skills (e.g., "Build a simple recommendation engine using Python", "Create a marketing plan for a hypothetical AI product").
- **Resources:** Articles, books, documentation (e.g., "Key AI Product Management Blogs", "Recommended Reading on Agile Methodologies").
- **Mentorship (Conceptual):** Placeholder for future feature - "Consider finding a mentor in AI Product Management."
- **Details:** Each suggestion should be clearly categorized and briefly described. The user should be able to 'save' or 'track' suggestions they are pursuing.
- **D. Inspiration Feed:**
- **Flow:** A dedicated section showcasing stories of individuals who achieved their goals by pushing boundaries.
- **Content:** Short, engaging narratives inspired by the Hacker News article's theme. Examples: "How Sarah learned video editing on an old laptop to become a freelance filmmaker", "John's journey from hobbyist coder to AI startup founder by experimenting relentlessly."
- **Details:** These stories should reinforce the app's core philosophy: learning through doing, embracing limitations as a map, and the power of obsession.
**4. UI/UX DESIGN:**
- **Layout:** Single Page Application with a clear, navigable structure. Key sections accessible via a top navigation bar or sidebar: Profile, Potential Map, Learning Paths, Inspiration.
- **Color Palette:** A calming yet inspiring palette. Primary: Deep Teal (#008080) or Slate Gray (#2F4F4F). Secondary: A vibrant accent like Coral (#FF7F50) or Golden Yellow (#FFD700) for calls to action and highlights. Neutral: Off-white (#F8F8F8) and light grays for backgrounds and text.
- **Typography:** Clean, modern sans-serif fonts. Headings: Poppins or Montserrat. Body Text: Open Sans or Lato.
- **Responsive Design:** Mobile-first approach. Ensure usability across all devices (desktops, tablets, smartphones). Use responsive utilities from Tailwind CSS.
- **Key Components:** Profile Form, Skill/Interest Tags Input, Aspiration Textarea, Gap Analysis Visualization (e.g., radar chart or comparison list), Suggestion Cards (Course, Project, Resource), Story Cards.
- **Interactions:** Smooth transitions between sections. Clear loading indicators. Interactive elements for adding/removing tags and saving suggestions.
**5. COMPONENT BREAKDOWN:**
- **`App.js`:** Main entry point, sets up routing using `react-router-dom`, defines global layout.
- **`Header.jsx`:** Top navigation bar with app logo and links to main sections.
- Props: `navItems` (array of objects: `{ name: string, path: string }`).
- **`ProfilePage.jsx`:** Container for profile creation and editing.
- State: `userData` (object: `{ skills: string[], interests: string[], aspiration: string }`).
- Children: `SkillInput.jsx`, `InterestInput.jsx`, `AspirationInput.jsx`, `ProfileSaveButton.jsx`.
- **`SkillInput.jsx`:** Input component for managing skills.
- Props: `value` (string[]), `onChange` (function).
- Manages internal state for new tag input and displays existing tags.
- **`InterestInput.jsx`:** Similar to `SkillInput.jsx`.
- **`AspirationInput.jsx`:** Textarea for the aspirational goal.
- Props: `value` (string), `onChange` (function).
- **`PotentialMapPage.jsx`:** Displays the analysis and gap identification.
- State: `analysisResult` (object: `{ developmentAreas: string[], gapScore: number }`).
- Props: `userData` (from `ProfilePage`).
- Fetches or calculates `analysisResult`.
- Children: `GapAnalysis.jsx`, `DevelopmentAreas.jsx`.
- **`GapAnalysis.jsx`:** Visualizes the gap between current skills and aspirations.
- Props: `analysisResult`.
- Example: Could render a comparison list or a simple chart.
- **`DevelopmentAreas.jsx`:** Lists the identified areas for growth.
- Props: `developmentAreas` (string[]).
- **`LearningPathsPage.jsx`:** Displays suggested learning resources.
- State: `suggestions` (array of objects: `{ type: 'course'|'project'|'resource', title: string, description: string, url: string }`), `savedSuggestions` (array).
- Props: `developmentAreas` (from `PotentialMapPage`).
- Fetches `suggestions` based on `developmentAreas`.
- Children: `SuggestionList.jsx`, `SuggestionCard.jsx`.
- **`SuggestionCard.jsx`:** Displays a single learning suggestion.
- Props: `suggestion` (object), `onSave` (function).
- **`InspirationPage.jsx`:** Displays success stories.
- State: `stories` (array of objects: `{ title: string, narrative: string, image: string }`).
- Fetches `stories` on mount.
- Children: `StoryList.jsx`, `StoryCard.jsx`.
- **`StoryCard.jsx`:** Displays a single inspiration story.
- Props: `story` (object).
**6. DATA MODEL:**
- **`userData` State:**
```javascript
{
id: string, // unique user identifier
skills: string[],
interests: string[],
aspiration: string
}
```
- **`analysisResult` State:**
```javascript
{
developmentAreas: string[], // e.g., ['Machine Learning Fundamentals', 'Product Strategy', 'Data Visualization']
gapScore: number // 0-100, indicating overall gap
}
```
- **`suggestions` State:**
```javascript
[
{
id: string, // unique suggestion ID
type: 'course' | 'project' | 'resource' | 'mentor_placeholder',
title: string, // e.g., 'Introduction to Machine Learning'
description: string, // A brief explanation
url: string, // Link to the resource/platform
relatedTo: string[] // Which developmentArea this suggestion addresses
}
]
```
- **`stories` State:**
```javascript
[
{
id: string,
title: string, // e.g., 'From Hobbyist to AI Founder'
narrative: string, // The story content
imageUrl: string // Optional image URL
}
]
```
- **`savedSuggestions` State:** `string[]` (array of suggestion IDs saved by the user).
- **Local Storage:** User `userData` and `savedSuggestions` should be persisted locally for persistence between sessions in the MVP.
**7. ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Subtle fade-in/fade-out transitions between major sections using `react-transition-group` or CSS.
- **Button Hovers:** Slight scale-up or background color change on interactive elements (buttons, links).
- **Tag Input:** Smooth addition and removal animations for skill/interest tags.
- **Loading States:** Use spinners or skeleton screens (`react-loading-skeleton`) when fetching data (e.g., suggestions, stories) or performing the analysis.
- **Micro-interactions:** Visual feedback when saving a suggestion (e.g., a small confirmation message or icon change).
- **