PROJECT OVERVIEW:
Develop a single-page React application (SPA) named 'VatanTech' designed to bridge the gap between global tech companies seeking talent and skilled Turkish professionals. The application addresses the challenge highlighted by Oracle's H-1B visa filings amidst layoffs, suggesting a trend of companies looking for cost-effective global talent while potentially overlooking domestic pools or facing scrutiny for their hiring practices. VatanTech aims to be a B2B SaaS platform that simplifies the process for international companies to discover, vet, and hire Turkish tech talent, offering guidance on visa compliance and cultural integration. The core value proposition is to provide a transparent, efficient, and compliant channel for global companies to access Turkey's burgeoning tech talent pool, thereby mitigating risks associated with traditional visa programs and fostering international collaboration.
TECH STACK:
- Frontend Framework: React (using Create React App or Vite for setup)
- Styling: Tailwind CSS for rapid, utility-first styling.
- State Management: Zustand or Context API for efficient global and local state management.
- Routing: React Router DOM for navigation within the SPA.
- Form Handling: React Hook Form with Yup for validation.
- UI Components: Headless UI or similar for accessible, unstyled components that work seamlessly with Tailwind CSS.
- Icons: React Icons.
- API Communication: Axios for making HTTP requests.
- Build Tool: Vite (recommended for speed).
- Deployment: Consider Netlify, Vercel, or similar static hosting platforms.
CORE FEATURES:
1. **Company Dashboard:**
* **User Flow:** A registered company user logs in and sees a personalized dashboard. This includes sections for managing job postings, viewing candidate applications, accessing the talent database, and reviewing account settings.
* **Functionality:** Display key metrics (active jobs, new applications, talent database searches). Provide quick links to core features. Allow companies to update their profile and subscription status.
* **UI/UX:** Clean, data-driven layout. Sidebar navigation for different sections. Prominent call-to-actions.
2. **Job Posting Management:**
* **User Flow:** From the dashboard, a company can initiate creating a new job posting. They fill out a form detailing the role, required skills, experience level, location (remote/hybrid/on-site within Turkey), and a brief description. Upon submission, the job is listed and becomes searchable.
* **Functionality:** Create, edit, and delete job postings. Mark postings as active/inactive. Search and filter existing postings.
* **UI/UX:** Intuitive form with clear fields and validation. A rich text editor for job descriptions. A preview option before publishing.
3. **Talent Database Search:**
* **User Flow:** A company can access the talent database and use filters to find suitable candidates. Filters include skills (e.g., React, Python, Data Science), years of experience, specific technologies, preferred location (city or remote), and potentially certifications or education level.
* **Functionality:** Search and filter candidates based on predefined criteria. View summarized candidate profiles (name, headline, key skills, experience summary). Click to view detailed profiles (requires a higher subscription tier or specific action).
* **UI/UX:** Advanced filtering interface, possibly with multi-select options. Search results displayed in a card or list format. Clear indication of filter applied.
4. **Candidate Profile Viewing:**
* **User Flow:** After finding a candidate via search or application, a company clicks on their profile to see detailed information. This includes a full resume/CV summary, detailed experience, projects, education, skills, and contact information (if the candidate permits).
* **Functionality:** Display comprehensive candidate information. Allow companies to 'shortlist' or 'contact' candidates directly through the platform (triggering an email notification to the candidate).
* **UI/UX:** Well-structured profile page. Clear separation of sections (Summary, Experience, Education, Skills). Professional and readable typography.
5. **Application Tracking & Communication:**
* **User Flow:** When a candidate applies for a job, the company sees the application in their dashboard. They can review the candidate's profile, move them through hiring stages (e.g., Applied, Screening, Interviewing, Offered, Rejected), and initiate communication (e.g., scheduling an interview).
* **Functionality:** Track application status. Internal notes for each application. Basic email notification system to candidates.
* **UI/UX:** Kanban-style board or a table view for applications. Status indicators and quick action buttons.
6. **Visa & Compliance Guidance (Basic):**
* **User Flow:** Companies can access a dedicated section providing general information and resources regarding the process of hiring foreign workers, specifically focusing on Turkish talent. This includes potential visa pathways (like H-1B, L-1, E-2, or relevant Turkish work permits if applicable for specific scenarios), legal considerations, and best practices.
* **Functionality:** Curated articles, FAQs, and links to official government resources. Disclaimer emphasizing that this is informational and not legal advice.
* **UI/UX:** A dedicated 'Resources' or 'Compliance' page. Clearly organized content with search functionality.
UI/UX DESIGN:
- **Layout:** Single-page application with a persistent sidebar navigation (collapsible on smaller screens) for core sections: Dashboard, Job Postings, Talent Database, Resources, Settings. Main content area displays the active section.
- **Color Palette:** Primary: A professional, calming blue (e.g., `#3b82f6` - Tailwind's `blue-500`) for primary actions and highlights. Secondary: A neutral dark gray (e.g., `#1f2937` - Tailwind's `gray-800`) for text and backgrounds. Accent: A subtle green (e.g., `#10b981` - Tailwind's `emerald-500`) for success states or positive indicators. Background: Light gray or off-white (`#f3f4f6` - Tailwind's `gray-100`). Ensure high contrast for readability.
- **Typography:** Use a clean, modern sans-serif font family like Inter or Poppins (available via Google Fonts) for all text. Define clear hierarchy using font weights (e.g., 700 for headings, 500 for subheadings, 400 for body text) and sizes (e.g., `text-2xl` for H1, `text-lg` for body paragraphs).
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on small screens. Content reflows and adjusts. Forms and tables should be responsive, potentially using horizontal scrolling for tables if necessary. Ensure touch targets are adequately sized.
- **Component Hierarchy:** Use a clear, nested structure. e.g., `App` -> `Layout` -> `Sidebar`, `MainContent` -> `DashboardCard`, `JobListTable`, `SearchBar`, etc.
DATA MODEL:
- **User (Company):**
```json
{
"id": "comp_123",
"name": "Global Tech Inc.",
"email": "contact@globaltech.com",
"subscriptionTier": "Gold", // 'Free', 'Bronze', 'Silver', 'Gold'
"createdAt": "2024-01-15T10:00:00Z"
}
```
- **Job Posting:**
```json
{
"id": "job_abc",
"companyId": "comp_123",
"title": "Senior React Developer",
"description": "<p>We are seeking...</p>",
"skills": ["React", "JavaScript", "Redux", "CSS", "HTML"],
"experienceLevel": "Senior", // 'Entry', 'Mid', 'Senior', 'Lead'
"location": "Remote (Turkey)", // e.g., 'Istanbul', 'Remote (Turkey)', 'Ankara', 'Hybrid (Istanbul)'
"status": "Active", // 'Active', 'Inactive', 'Filled'
"createdAt": "2024-04-01T09:00:00Z",
"updatedAt": "2024-04-01T09:00:00Z"
}
```
- **Candidate (Simplified for MVP display):**
```json
{
"id": "cand_xyz",
"name": "Ayşe Yılmaz",
"headline": "Senior Software Engineer with 8+ years of experience in backend development.",
"primarySkill": "Java",
"experienceYears": 8,
"location": "Istanbul, Turkey",
"profileUrl": "/candidates/cand_xyz" // Internal link
}
```
- **Detailed Candidate Profile (Accessed via profileUrl):**
```json
{
"id": "cand_xyz",
"name": "Ayşe Yılmaz",
"headline": "Senior Software Engineer with 8+ years of experience in backend development.",
"summary": "Highly motivated and results-oriented Senior Software Engineer with extensive experience in designing, developing, and deploying scalable backend systems using Java and Spring Boot. Proven ability to lead projects and mentor junior developers.",
"skills": ["Java", "Spring Boot", "Microservices", "SQL", "AWS", "Docker", "Kubernetes", "RESTful APIs"],
"experience": [
{
"title": "Lead Backend Engineer",
"company": "Tech Solutions Ltd.",
"duration": "2020 - Present",
"description": "Led a team of 5 engineers..."
},
{
"title": "Software Engineer",
"company": "Innovatech",
"duration": "2016 - 2020",
"description": "Developed and maintained RESTful APIs..."
}
],
"education": [
{
"degree": "M.Sc. Computer Engineering",
"university": "Middle East Technical University",
"year": "2016"
}
],
"contact": {
"email": "ayse.yilmaz.pro@email.com", // Only shown if candidate allows
"linkedin": "linkedin.com/in/ayseyilmaz"
}
}
```
- **Application:**
```json
{
"id": "app_789",
"jobId": "job_abc",
"candidateId": "cand_xyz",
"companyId": "comp_123",
"status": "Screening", // 'Applied', 'Screening', 'Interviewing', 'Offered', 'Rejected', 'Hired'
"appliedAt": "2024-04-02T11:00:00Z",
"notes": "Candidate has strong experience in microservices."
}
```
- **State Management:** Use Zustand for managing global states like user authentication, company profile data, and potentially fetched job postings/candidate lists. Local component state for form inputs, UI toggles, etc. Context API could be used for theme or complex prop drilling scenarios if needed.
COMPONENT BREAKDOWN:
- `App.js`: Root component, sets up routing and global layout.
- `Layout.js`: Contains the main structure, including `Sidebar` and `MainContent`. Handles responsive sidebar toggling.
- `Sidebar.js`: Navigation menu component. Displays links based on user authentication status and role. Uses `NavLink` from React Router.
- `MainContent.js`: Renders the content for the currently active route.
- `DashboardPage.js`: Displays the company dashboard. Fetches and renders `DashboardStatsCard` and `RecentApplicationsList`.
- `DashboardStatsCard.js`: Shows key metrics (e.g., number of active jobs, new applications). Props: `title`, `value`.
- `JobListingsPage.js`: Manages the job posting section. Includes `JobListTable` and `CreateJobButton`.
- `JobListTable.js`: Displays job postings in a table format. Props: `jobs` (array), `onEdit`, `onDelete`, `onStatusChange`.
- `JobForm.js`: Form for creating/editing job postings. Uses React Hook Form. Props: `initialData` (for editing), `onSubmit`.
- `TalentSearchPage.js`: Interface for searching the talent database. Includes `TalentSearchBar` and `TalentResultsList`.
- `TalentSearchBar.js`: Contains filter inputs (skills, experience, location). Props: `onFilterChange`.
- `TalentResultsList.js`: Displays search results as `TalentCard` components. Props: `candidates` (array).
- `TalentCard.js`: Displays a summary of a candidate's profile. Props: `candidate` (object).
- `CandidateProfilePage.js`: Displays the full profile of a candidate. Fetches detailed data. Props: `candidateId`.
- `ApplicationTrackingPage.js`: Shows applications for jobs. Might use a `KanbanBoard` or `ApplicationTable`. Props: `applications` (array).
- `ResourcePage.js`: Displays articles and FAQs about visa compliance. Props: `articles` (array).
- `Button.js`: Reusable button component. Props: `children`, `onClick`, `variant` (e.g., 'primary', 'secondary'), `size`, `isLoading`.
- `Input.js`: Reusable input field component. Props: `label`, `type`, `value`, `onChange`, `error`.
- `Modal.js`: Reusable modal component for confirmations or detailed views. Props: `isOpen`, `onClose`, `children`.
- `Spinner.js`: Loading indicator component.
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out transitions between pages using React Router's `CSSTransition` or a library like `Framer Motion` for more advanced animations.
- **Hover Effects:** Subtle background color changes or slight scaling on interactive elements like buttons, cards, and table rows.
- **Loading States:** Display `Spinner.js` component or skeleton loaders while data is being fetched. Buttons should show a loading state when clicked for async actions.
- **Form Validation Feedback:** Error messages appear below input fields with a slight fade-in animation. Input borders might change color (e.g., to red) on error.
- **Sidebar Collapse:** Smooth sliding animation when the sidebar collapses or expands.
- **Micro-interactions:** Subtle animations on status changes (e.g., application status update), sorting table columns.
EDGE CASES:
- **Authentication:** Handle login/logout states correctly. Redirect unauthenticated users to login. Protect routes.
- **Empty States:** Display user-friendly messages and potential actions when lists are empty (e.g., "No job postings yet. Create your first posting!").
- **Error Handling:** Gracefully handle API errors (e.g., network issues, server errors). Display informative error messages to the user without crashing the app. Implement global error boundaries.
- **Form Validation:** Client-side validation using React Hook Form/Yup for immediate feedback. Server-side validation should also be implemented.
- **Data Loading:** Ensure loading indicators are displayed consistently during data fetching.
- **Permissions:** Different subscription tiers should restrict access to certain features (e.g., advanced talent search, contacting candidates). Implement checks based on `company.subscriptionTier`.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes are used. Keyboard navigation should be fully supported. Color contrast ratios must meet WCAG standards.
- **No Data Scenario:** For the visa guidance section, if no specific content is available, display a message like "Information coming soon" or "Please consult with a legal professional."
SAMPLE DATA:
- **Mock Company Data:**
```json
// Example for context, not directly used in frontend state unless logged in
{
"id": "comp_456",
"name": "Innovate Solutions",
"email": "hr@innovate.com",
"subscriptionTier": "Silver"
}
```
- **Mock Job Posting Data (for `JobListTable.js`):**
```json
[
{
"id": "job_def",
"companyId": "comp_123",
"title": "Frontend Developer (React)",
"description": "<p>Join our dynamic team...</p>",
"skills": ["React", "TypeScript", "Tailwind CSS", "Next.js"],
"experienceLevel": "Mid",
"location": "Remote (Turkey)",
"status": "Active",
"createdAt": "2024-03-20T14:30:00Z",
"updatedAt": "2024-03-20T14:30:00Z"
},
{
"id": "job_ghi",
"companyId": "comp_456",
"title": "Backend Engineer (Node.js)",
"description": "<p>Build scalable backend services...</p>",
"skills": ["Node.js", "Express", "MongoDB", "AWS"],
"experienceLevel": "Senior",
"location": "Istanbul",
"status": "Active",
"createdAt": "2024-03-25T10:00:00Z",
"updatedAt": "2024-03-25T10:00:00Z"
}
]
```
- **Mock Candidate Data (for `TalentResultsList.js`):**
```json
[
{
"id": "cand_abc",
"name": "Mehmet Kaya",
"headline": "Software Engineer specializing in Python and Django.",
"primarySkill": "Python",
"experienceYears": 5,
"location": "Ankara, Turkey",
"profileUrl": "/candidates/cand_abc"
},
{
"id": "cand_def",
"name": "Zeynep Demir",
"headline": "Experienced UI/UX Designer with a portfolio of successful web applications.",
"primarySkill": "UI/UX Design",
"experienceYears": 7,
"location": "Izmir, Turkey",
"profileUrl": "/candidates/cand_def"
},
{
"id": "cand_ghi",
"name": "Ali Veli",
"headline": "Junior Frontend Developer eager to learn and contribute. Proficient in basic HTML, CSS, JS.",
"primarySkill": "JavaScript",
"experienceYears": 1,
"location": "Remote (Turkey)",
"profileUrl": "/candidates/cand_ghi"
}
]
```
- **Mock Detailed Candidate Profile Data (for `CandidateProfilePage.js`):** (See Data Model section above for structure)
- **Mock Application Data (for `ApplicationTrackingPage.js`):**
```json
[
{
"id": "app_111",
"jobId": "job_abc",
"candidateId": "cand_def",
"companyId": "comp_123",
"status": "Interviewing",
"appliedAt": "2024-04-01T09:00:00Z",
"notes": "Scheduled for technical interview next week."
},
{
"id": "app_222",
"jobId": "job_ghi",
"candidateId": "cand_abc",
"companyId": "comp_456",
"status": "Applied",
"appliedAt": "2024-04-02T15:00:00Z",
"notes": ""
}
]
```
- **Mock Resource Data:**
```json
{
"visaInfo": [
{
"title": "Understanding H-1B Visas for Tech Talent",
"content": "Overview of the H-1B visa process, eligibility criteria...",
"link": "/resources/h1b-guide"
},
{
"title": "Turkish Work Permits for Foreigners",
"content": "Information on obtaining work permits in Turkey...",
"link": "/resources/turkish-work-permits"
}
],
"faqs": [
{
"question": "What is the typical timeline for hiring?",
"answer": "Timelines can vary, but generally..."
}
]
}
```
DEPLOYMENT NOTES:
- **Environment Variables:** Use `.env` files for API endpoints (`REACT_APP_API_URL`), authentication keys, etc. Ensure sensitive variables are not hardcoded.
- **Build Command:** Use `npm run build` or `yarn build`. Ensure the build output is configured for static hosting.
- **Performance Optimization:** Code-split routes and components where necessary. Optimize images. Use React.lazy() and Suspense for dynamic imports. Implement memoization (useMemo, useCallback) judiciously.
- **HTTPS:** Ensure the application is served over HTTPS in production.
- **CORS:** Configure backend API (if separate) to handle Cross-Origin Resource Sharing correctly for requests from the frontend domain.
- **Error Reporting:** Integrate a service like Sentry for monitoring production errors.
- **SEO:** Implement basic SEO meta tags for the landing page, though as an SPA primarily for logged-in users, this is less critical than for a public-facing marketing site.