Create a single-page SPA (Single Page Application) called 'Kariyer Pusulası' (Career Compass) designed to help tech professionals navigate the current challenging job market, inspired by discussions around tech employment difficulties post-recessions. The application should provide insights into market trends, job listings, and skill development opportunities.
**PROJECT OVERVIEW:**
Kariyer Pusulası aims to empower tech professionals by providing them with real-time market insights, curated job opportunities, and actionable advice for skill enhancement. The core problem it solves is the uncertainty and difficulty faced by individuals in the tech industry when seeking employment or career advancement amidst economic downturns and industry shifts. The value proposition lies in offering a centralized, data-driven platform that demystifies the job market and guides users towards relevant opportunities and skill development.
**TECH STACK:**
- **Frontend Framework:** React (using functional components and Hooks)
- **UI Library/Framework:** Tailwind CSS for rapid styling and utility-first approach.
- **State Management:** Zustand (lightweight and efficient for SPAs).
- **Routing:** React Router DOM for navigation within the SPA.
- **Data Fetching:** Axios for making HTTP requests to a hypothetical backend API.
- **Charting Library:** Chart.js or Recharts for visualizing market data.
- **Form Handling:** React Hook Form for efficient form management.
- **Deployment:** Vercel or Netlify for seamless deployment.
**CORE FEATURES:**
1. **Job Board Module:**
* **User Flow:** Users can navigate to the 'Job Board' section. They can use filters such as 'Job Title' (e.g., 'Software Engineer', 'Data Scientist'), 'Technology Stack' (e.g., 'React', 'Python', 'AWS'), 'Location' (Remote, Hybrid, On-site), and 'Experience Level' (Junior, Mid, Senior). The system fetches and displays a list of relevant job postings.
* **Details:** Each job posting should show the title, company, location, a brief description snippet, and a link to the original posting. Implement pagination for efficient browsing.
* **Data Source:** Mock API endpoint for now, simulating job listings.
2. **Market Analysis Dashboard:**
* **User Flow:** Users access the 'Dashboard' to view key market trends. Visualizations will include:
* Hiring Trends Over Time (Line Chart)
* Most In-Demand Technologies (Bar Chart)
* Average Salary Ranges by Role (Box Plot or Bar Chart)
* Layoff Tracker (Key metric display).
* **Details:** Charts should be interactive, allowing users to hover for more data. Data should be presented clearly with appropriate labels.
* **Data Source:** Mock data representing market statistics.
3. **Skill Development Hub:**
* **User Flow:** Navigate to 'Skill Hub'. Based on market demand data (from the Dashboard) and potentially user-inputted skills, this section suggests relevant skills to learn. For each suggested skill, it provides links to curated learning resources (e.g., online courses, tutorials, documentation, relevant articles).
* **Details:** Each skill listing should include a brief explanation of its importance and a categorized list of resources.
* **Data Source:** Mock data for skills and associated resources.
4. **Personalized Career Insights (Future MVP / Basic in MVP):**
* **User Flow:** A simple input form where users can list their current skills and desired roles. The system provides basic recommendations connecting their profile to suitable job categories or skills to focus on.
* **Details:** Initial version can be rule-based, matching keywords.
* **Data Source:** User input and pre-defined mapping rules.
**UI/UX DESIGN:**
- **Layout:** A clean, modern, single-page layout. A persistent sidebar navigation for accessing core features (Job Board, Dashboard, Skill Hub). The main content area will dynamically load content based on the selected navigation item.
- **Color Palette:** Primary: Dark Blue (#1A202C), Secondary: Teal (#4FD1C5), Accent: Yellow (#F6AD55), Text: White (#FFFFFF) and Light Gray (#A0AEC0), Background: Off-white (#F7FAFC) with darker shades for cards. Ensure high contrast for readability.
- **Typography:** Use a clean, sans-serif font family like 'Inter' or 'Roboto'. H1, H2, H3 for headings, and standard paragraph text. Font sizes should scale responsively.
- **Responsive Design:** Mobile-first approach. The layout must adapt seamlessly to various screen sizes (mobile, tablet, desktop). Use Tailwind CSS's responsive prefixes (sm:, md:, lg:, xl:).
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions for route changes and content loading. Loading spinners/skeletons should be used during data fetching.
**COMPONENT BREAKDOWN:**
- `App.js`: Main component, sets up routing and global layout.
- `Navigation.js`: Sidebar component, contains links to different sections. Props: `activeItem`, `onItemClick`.
- `JobBoardPage.js`: Container for the job board feature. Manages state for filters and job listings.
- `JobList.js`: Displays a list of job cards. Props: `jobs`.
- `JobCard.js`: Displays a single job posting. Props: `job` (object containing title, company, location, description, url).
- `SearchBar.js`: Search input component with filter options. Props: `onFilterChange`.
- `DashboardPage.js`: Container for the market analysis dashboard. Fetches and displays chart data.
- `ChartComponent.js`: Reusable chart component. Props: `chartData`, `chartOptions`, `type` (e.g., 'line', 'bar').
- `SkillHubPage.js`: Container for the skill development section. Displays suggested skills and resources.
- `SkillCard.js`: Displays a single skill and its learning resources. Props: `skill`.
- `LoadingSpinner.js`: Reusable loading spinner component.
- `ErrorMessage.js`: Component to display errors. Props: `message`.
**DATA MODEL:**
- **State Structure (Zustand Store Example):**
```javascript
{
jobs: [],
filters: { title: '', tech: '', location: '' },
isLoadingJobs: false,
dashboardData: { hiringTrends: [], topTech: [], salaries: [] },
isLoadingDashboard: false,
skills: [],
isLoadingSkills: false,
error: null
}
```
- **Mock Data Formats:**
* **Job:** `{ id: string, title: string, company: string, location: string, description: string, url: string, postedDate: string }`
* **Dashboard Hiring Trends:** `[{ month: string, count: number }]`
* **Dashboard Top Tech:** `[{ tech: string, count: number }]`
* **Dashboard Salaries:** `[{ role: string, minSalary: number, maxSalary: number }]`
* **Skill:** `{ id: string, name: string, description: string, resources: [{ name: string, url: string, type: string }] }`
**ANIMATIONS & INTERACTIONS:**
- **Page Transitions:** Use `framer-motion` or similar for smooth fade-in/fade-out transitions between pages/sections.
- **Hover Effects:** Subtle scaling or background color change on interactive elements like buttons, job cards, and skill cards.
- **Loading States:** Display `LoadingSpinner` or skeleton screens while data is being fetched. For charts, show a loading state before rendering.
- **Micro-interactions:** Button click feedback, subtle animations on filter application.
**EDGE CASES:**
- **Empty States:** Display user-friendly messages when no job listings are found matching the criteria, or when dashboard/skill data is unavailable (e.g., 'No jobs found. Try adjusting your filters.', 'Market data is currently unavailable.').
- **Error Handling:** Implement robust error handling for API requests. Display clear error messages to the user using the `ErrorMessage` component. Retry mechanisms where appropriate.
- **Validation:** Basic client-side validation for any input forms (e.g., search filters). Ensure inputs are not empty when required.
- **Accessibility (a11y):** Use semantic HTML tags. Ensure proper ARIA attributes where necessary. Keyboard navigability for all interactive elements. Sufficient color contrast.
**SAMPLE DATA (Mock Data Examples):**
1. **Job 1:** `{ id: 'j1', title: 'Senior React Developer', company: 'Tech Solutions Inc.', location: 'Remote', description: 'We are seeking a senior React developer...', url: 'http://example.com/job/j1', postedDate: '2023-10-26' }`
2. **Job 2:** `{ id: 'j2', title: 'Data Scientist', company: 'Data Insights LLC', location: 'New York, NY', description: 'Analyze large datasets...', url: 'http://example.com/job/j2', postedDate: '2023-10-25' }`
3. **Dashboard Hiring Trends:** `[{ month: 'Jan', count: 1200 }, { month: 'Feb', count: 1150 }, { month: 'Mar', count: 1300 }]`
4. **Dashboard Top Tech:** `[{ tech: 'Python', count: 850 }, { tech: 'JavaScript', count: 780 }, { tech: 'AWS', count: 600 }]`
5. **Skill 1:** `{ id: 's1', name: 'Cloud Computing (AWS)', description: 'Essential for modern infrastructure...', resources: [{ name: 'AWS Certified Cloud Practitioner', url: 'http://example.com/aws-course', type: 'Course' }, { name: 'AWS Docs', url: 'http://example.com/aws-docs', type: 'Documentation' }] }`
6. **Skill 2:** `{ id: 's2', name: 'Kubernetes', description: 'Container orchestration is key...', resources: [{ name: 'Kubernetes Tutorial', url: 'http://example.com/k8s-tutorial', type: 'Tutorial' }] }`
7. **Job 3:** `{ id: 'j3', title: 'Frontend Developer (Vue.js)', company: 'Web Innovators', location: 'Remote', description: 'Build the future of web interfaces...', url: 'http://example.com/job/j3', postedDate: '2023-10-27' }`
8. **Dashboard Salaries:** `[{ role: 'Software Engineer', minSalary: 90000, maxSalary: 150000 }, { role: 'Data Analyst', minSalary: 70000, maxSalary: 110000 }]`
9. **Skill 3:** `{ id: 's3', name: 'Machine Learning', description: 'Leverage data for predictive models...', resources: [{ name: 'Coursera ML Course', url: 'http://example.com/coursera-ml', type: 'Course' }] }`
10. **Job 4:** `{ id: 'j4', title: 'DevOps Engineer', company: 'CloudMasters', location: 'Austin, TX', description: 'Automate and manage cloud infrastructure...', url: 'http://example.com/job/j4', postedDate: '2023-10-24' }`
**DEPLOYMENT NOTES:**
- **Build:** Use `npm run build` or `yarn build`. Ensure the `homepage` property is set correctly in `package.json` if deploying to a subdirectory.
- **Environment Variables:** Use `.env` files for API keys or configuration settings. Prefix variables with `REACT_APP_` (for Create React App) or configure appropriately for other build tools. For Vercel/Netlify, these can be set directly in the platform's environment settings.
- **Performance Optimizations:** Implement code splitting using React.lazy and Suspense for better initial load times. Optimize images. Use `React.memo` for performance-critical components. Ensure efficient state management to avoid unnecessary re-renders.
- **SEO:** Implement basic SEO tags (title, meta description) that can be dynamically updated per route if needed, though for a SPA, this might be more limited without SSR/SSG.