You are an expert AI assistant tasked with generating a complete, production-ready single-page application (SPA) for a career guidance platform. The application should be built using React, styled with Tailwind CSS, and leverage modern JavaScript practices. The goal is to help individuals navigate job market uncertainties, especially during economic downturns, by providing personalized career advice, job recommendations, and skill development resources.
**1. PROJECT OVERVIEW**
* **Application Name:** Job Compass (İş Bulma Pusulası)
* **Purpose:** To provide individuals facing job market volatility with AI-driven personalized career guidance. This includes identifying career paths, recommending relevant job openings, and suggesting skill development opportunities based on real-time market data and user profiles.
* **Problem Solved:** Addresses the anxiety and uncertainty individuals face due to unexpected job losses or a rapidly changing job market. It offers a data-backed, personalized approach to career navigation, moving beyond generic advice.
* **Value Proposition:** Empower users to proactively manage their careers, adapt to market changes, and find fulfilling employment with confidence through intelligent insights and tailored recommendations.
**2. TECH STACK**
* **Frontend Framework:** React.js (v18+)
* **Styling:** Tailwind CSS (v3+)
* **State Management:** Zustand (lightweight and performant, suitable for this SPA)
* **Routing:** React Router DOM (for potential future expansion, though initially a single page)
* **API Calls:** Axios (for fetching mock data and potential future backend integration)
* **Icons:** Heroicons (from Tailwind Labs)
* **Utilities:** Date-fns (for date formatting)
* **Build Tool:** Vite (for fast development server and optimized builds)
**3. CORE FEATURES**
* **User Profile Creation & Management:**
* **User Flow:** Upon first visit, users are prompted to create a profile. They input their work experience (job titles, companies, durations), skills (tag-based input), education level, and career interests. They can edit this profile later.
* **Details:** Forms for experience, skills, and education. Skills should be taggable and auto-suggested.
* **Market Insights Dashboard:**
* **User Flow:** After profile setup or directly accessible, users see a dashboard displaying key market trends. This includes national/regional job market health indicators, top in-demand skills, sectors with high growth/decline, and recent layoff trends.
* **Details:** Visualizations (charts, graphs) for job growth/loss data, skill demand trends. Data should be presented clearly and concisely.
* **AI-Powered Career Recommendations:**
* **User Flow:** Based on the user's profile and market insights, the AI suggests potential career paths, related job titles, and even potential career pivots. It explains *why* a recommendation is made (e.g., "Your skills in X are highly transferable to Y role, which is currently in high demand.").
* **Details:** A dedicated section presenting recommended roles with a brief explanation of the rationale, including required/recommended skills and estimated salary ranges.
* **Job Matching & Filtering:**
* **User Flow:** Users can browse job listings relevant to their profile and recommendations. They can filter by location, industry, experience level, and keywords. Each listing shows key requirements and how well the user's profile matches.
* **Details:** A job listing component displaying title, company, location, summary, and a match score. Filtering UI elements.
* **Skill Development Guidance:**
* **User Flow:** For recommended career paths or identified skill gaps, the system suggests relevant online courses, certifications, or learning resources. Links to external platforms (e.g., Coursera, edX, LinkedIn Learning) can be provided.
* **Details:** A section listing skill gaps and corresponding learning resources, categorized by type (course, certification, article, etc.).
**4. UI/UX DESIGN**
* **Layout:** Single-page application with a clear, intuitive navigation (likely a sidebar or top navigation bar). Main content area dynamically updates based on the selected feature. Responsive design is crucial.
* **Color Palette:** Professional and calming. Primary: A deep blue or teal (#1E40AF or #0891B2). Secondary: A lighter shade of the primary or a neutral gray (#9CA3AF). Accent: A warm, encouraging color like a muted orange or gold (#F97316 or #EAB308) for calls to action and highlights. Background: White or off-white (#F3F4F6).
* **Typography:** Clean and readable sans-serif fonts. Headings: Inter or Poppins (bold). Body Text: Inter or Lato (regular). Ensure good contrast ratios.
* **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content reflows gracefully. Minimum screen width for full layout: 1024px. Adaptable down to 320px.
* **Key Components:** Header/Navbar, Sidebar/NavMenu, ProfileForm, MarketInsightsChart, RecommendationCard, JobList, JobListItem, SkillTag, LearningResourceCard, LoadingSpinner, ErrorMessage.
**5. DATA MODEL**
* **State Management (Zustand):**
* `userStore`: Stores user profile data (name, experience array, skills array, education, interests).
* `marketStore`: Stores fetched market data (job trends, skill demand, layoff data).
* `recommendationStore`: Stores AI-generated career recommendations.
* `jobStore`: Stores filtered job listings.
* `uiStore`: Stores UI state (loading indicators, error messages, current view).
* **Data Structures (Mock Data Format):**
* `UserProfile`: `{ id: string, name: string, email?: string, experience: Experience[], skills: Skill[], education: Education[], interests: string[] }`
* `Experience`: `{ title: string, company: string, startDate: string, endDate: string | null, description?: string }`
* `Skill`: `{ id: string, name: string }`
* `Education`: `{ degree: string, institution: string, startDate: string, endDate: string }`
* `MarketInsight`: `{ date: string, nationalJobGrowth: number, unemploymentRate: number, layoffTrend: 'increasing' | 'decreasing' | 'stable', topSkills: Skill[], growingSectors: string[] }`
* `Recommendation`: `{ role: string, rationale: string, requiredSkills: Skill[], suggestedSkills: Skill[], salaryRange: string, transferabilityScore: number }`
* `JobListing`: `{ id: string, title: string, company: string, location: string, summary: string, requirements: string[], postedDate: string, matchScore?: number }`
* `LearningResource`: `{ id: string, title: string, type: 'Course' | 'Certification' | 'Article', platform: string, url: string, relevantSkills: Skill[] }`
**6. COMPONENT BREAKDOWN**
* **`App.jsx`:** Main component, sets up routing (if used) and global layout. Renders `Header`, `Sidebar`, and `MainContent`. Initializes Zustand store.
* **`Header.jsx`:** Displays application logo, name, and potentially user status/logout button.
* Props: `appName`
* **`Sidebar.jsx`:** Navigation menu. Links to different sections (Profile, Dashboard, Jobs, etc.).
* Props: `navItems` (array of objects: `{ label: string, path: string, icon: ReactNode }`)
* **`MainContent.jsx`:** Container for the current view based on sidebar selection.
* **`ProfilePage.jsx`:** Contains `ProfileForm` and displays user summary.
* **`ProfileForm.jsx`:** Form for creating/editing user profile.
* Props: `initialData` (UserProfile object), `onSubmit` (function)
* Components used: `TextInput`, `DateInput`, `SkillInput`, `TextArea`, `SelectInput`.
* **`SkillInput.jsx`:** Specialized input for adding and managing skills (tag-based).
* Props: `currentSkills` (Skill[]), `onSkillsChange` (function), `availableSkills` (Skill[])
* **`MarketInsightsPage.jsx`:** Displays the `MarketInsightsDashboard`.
* **`MarketInsightsDashboard.jsx`:** Visualizes market data using charts.
* Components: `ChartComponent` (reusable chart wrapper), `InsightSummary`.
* Props: `marketData` (MarketInsight object)
* **`RecommendationsPage.jsx`:** Displays `RecommendationList`.
* **`RecommendationList.jsx`:** Maps through recommendations and renders `RecommendationCard`.
* Props: `recommendations` (Recommendation[])
* **`RecommendationCard.jsx`:** Displays a single career recommendation.
* Props: `recommendation` (Recommendation object)
* **`JobsPage.jsx`:** Contains `JobFilter` and `JobList`.
* **`JobFilter.jsx`:** UI elements for filtering job listings.
* Props: `onFilterChange` (function)
* **`JobList.jsx`:** Renders a list of `JobListItem` components.
* Props: `jobs` (JobListing[]), `isLoading` (boolean), `error` (string | null)
* **`JobListItem.jsx`:** Displays a single job listing summary.
* Props: `job` (JobListing object)
* **`LearningPage.jsx`:** Displays `LearningResourceList`.
* **`LearningResourceList.jsx`:** Maps through resources and renders `LearningResourceCard`.
* Props: `resources` (LearningResource[]), `isLoading` (boolean)
* **`LearningResourceCard.jsx`:** Displays a single learning resource.
* Props: `resource` (LearningResource object)
* **`LoadingSpinner.jsx`:** Reusable loading indicator.
* **`ErrorMessage.jsx`:** Reusable error message display.
**7. ANIMATIONS & INTERACTIONS**
* **Page Transitions:** Subtle fade-in/fade-out for content changes within `MainContent` using a simple CSS transition.
* **Hover Effects:** Slight scale-up or background color change on interactive elements like buttons, links, and job cards.
* **Loading States:** `LoadingSpinner` component displayed prominently when fetching data (e.g., jobs, market insights, recommendations). Skeleton loaders can be used for list items before data arrives.
* **Micro-interactions:** Smooth expansion/collapse for detailed views (e.g., showing full job description or recommendation rationale). Button click feedback (slight visual change).
* **Form Feedback:** Input field validation messages appear smoothly.
**8. EDGE CASES**
* **Empty States:** Display user-friendly messages and clear calls to action when data is not available (e.g., "No job recommendations yet. Complete your profile to get started.", "No jobs found matching your criteria.").
* **Error Handling:** Global error handling using `uiStore`. Display `ErrorMessage` component with informative messages. For API errors, provide generic messages unless specific error codes are available.
* **Form Validation:** Client-side validation for all forms (required fields, email format, date logic). Clear, inline error messages tied to specific fields.
* **Accessibility (a11y):**
* Use semantic HTML elements (`<nav>`, `<main>`, `<button>`, etc.).
* Ensure sufficient color contrast.
* Provide `alt` text for images (if any).
* Ensure keyboard navigability for all interactive elements.
* Use ARIA attributes where necessary (e.g., for dynamic content updates).
**9. SAMPLE DATA**
* **`UserProfile`:**
```json
{
"id": "user-123",
"name": "Ahmet Yılmaz",
"experience": [
{
"title": "Software Engineer",
"company": "Tech Solutions Inc.",
"startDate": "2020-01-15",
"endDate": "2023-12-31"
}
],
"skills": [
{"id": "s-react", "name": "React"},
{"id": "s-node", "name": "Node.js"},
{"id": "s-js", "name": "JavaScript"}
],
"education": [
{
"degree": "BSc Computer Science",
"institution": "Metropolis University",
"startDate": "2016-09-01",
"endDate": "2020-06-30"
}
],
"interests": ["Artificial Intelligence", "Cloud Computing"]
}
```
* **`MarketInsight`:**
```json
{
"date": "2024-02-29",
"nationalJobGrowth": -92000,
"unemploymentRate": 4.4,
"layoffTrend": "increasing",
"topSkills": [{"id": "s-ai", "name": "AI/ML"}, {"id": "s-data", "name": "Data Analysis"}],
"growingSectors": ["Renewable Energy", "Healthcare Technology"]
}
```
* **`Recommendation`:**
```json
{
"role": "Data Scientist",
"rationale": "Your strong analytical skills and experience with JavaScript/Node.js provide a solid foundation. The demand for Data Scientists is high, and your interest in AI/ML aligns perfectly.",
"requiredSkills": [{"id": "s-python", "name": "Python"}, {"id": "s-sql", "name": "SQL"}, {"id": "s-ml", "name": "Machine Learning"}],
"suggestedSkills": [{"id": "s-r", "name": "R"}, {"id": "s-stats", "name": "Statistical Modeling"}],
"salaryRange": "$100,000 - $150,000 USD",
"transferabilityScore": 8.5
}
```
* **`JobListing` (Example 1 - Good Match):**
```json
{
"id": "job-001",
"title": "Senior Data Scientist",
"company": "Innovate AI",
"location": "Remote",
"summary": "Join our team to build cutting-edge AI models...",
"requirements": ["Python", "Machine Learning", "SQL", "Statistics"],
"postedDate": "2024-03-10",
"matchScore": 92
}
```
* **`JobListing` (Example 2 - Potential Match):**
```json
{
"id": "job-002",
"title": "Frontend Developer (React)",
"company": "Web Widgets Co.",
"location": "Istanbul, Turkey",
"summary": "Develop user interfaces for our web applications...",
"requirements": ["React", "JavaScript", "HTML", "CSS"],
"postedDate": "2024-03-11",
"matchScore": 75
}
```
* **`LearningResource`:**
```json
{
"id": "lr-001",
"title": "Machine Learning Specialization",
"type": "Course",
"platform": "Coursera",
"url": "https://www.coursera.org/specializations/machine-learning",
"relevantSkills": [{"id": "s-ml", "name": "Machine Learning"}, {"id": "s-python", "name": "Python"}]
}
```
**10. DEPLOYMENT NOTES**
* **Build Command:** `npm run build` (or `yarn build` if using Yarn). This will generate optimized static assets in a `dist` folder.
* **Environment Variables:** Use `.env` files for environment-specific variables (e.g., API keys for future backend integration). Vite supports `.env` files out of the box (`import.meta.env.VITE_VARIABLE_NAME`).
* **Performance Optimizations:**
* Code splitting (Vite handles this automatically for routes/dynamic imports).
* Image optimization (use appropriate formats and sizes).
* Memoization (React.memo, useMemo, useCallback) where necessary to prevent unnecessary re-renders.
* Bundle analysis (e.g., `rollup-plugin-visualizer`) to identify large dependencies.
* **Hosting:** Can be deployed to static hosting platforms like Netlify, Vercel, GitHub Pages, or S3/CloudFront.
* **HTTPS:** Always serve the application over HTTPS in production.