You are an expert AI full-stack developer tasked with creating a single-page application (SPA) for 'Avrupa'ya Geçiş Rehberi' (EU Transition Guide). This application will help individuals and businesses migrate their services and operations to the European Union, focusing on data protection and geopolitical considerations.
PROJECT OVERVIEW:
The core problem this application addresses is the complexity and uncertainty individuals face when migrating to the EU or switching to EU-based service providers. Driven by geopolitical concerns and a desire for stronger data privacy (like GDPR), users need a centralized platform to compare services, track migration steps, and access reliable information about EU regulations and digital providers. The value proposition is to simplify the transition, reduce risk, and empower users with knowledge and tools for a smoother move to the EU.
TECH STACK:
- Frontend Framework: React (using Vite for development speed)
- Styling: Tailwind CSS for rapid, utility-first styling and responsive design.
- State Management: Zustand for simple and efficient global state management.
- Routing: React Router DOM for navigation within the SPA.
- Data Fetching: Axios for HTTP requests (if an API is introduced later, but initially focusing on mock data and local storage).
- UI Components: Headless UI for accessible, unstyled components like modals and dropdowns, styled with Tailwind.
- Icons: Heroicons for a clean, consistent icon set.
CORE FEATURES:
1. **Service Comparison Tool:**
* **User Flow:** User accesses the 'Compare Services' section. They can search for existing non-EU services (e.g., 'Fastmail') or browse categories (Email, Cloud Storage, VPN). Upon selecting a service or category, a list of EU alternatives is displayed. Each alternative shows a summary card with key features, pricing tiers (e.g., Free, Basic, Pro), a 'Data Privacy Score' (based on GDPR compliance and company policies), and user ratings. Clicking a card opens a detailed view with pros, cons, user reviews, and a direct link to the provider's website.
* **MVP Focus:** Initially display curated data for popular services (Email, Cloud Storage). Users can't add new services or submit reviews in MVP.
2. **Migration Journey Tracker:**
* **User Flow:** User navigates to 'My Journey'. They select a pre-defined migration path (e.g., 'Individual Relocation', 'Business Setup') or start a custom tracker. The system presents a checklist of tasks (e.g., 'Apply for Visa', 'Open EU Bank Account', 'Register Domain'). Users can mark tasks as 'To Do', 'In Progress', or 'Completed'. Each task can have notes, deadlines, and related resources linked. Progress is visualized with a completion percentage.
* **MVP Focus:** Offer 2-3 pre-defined migration paths with 10-15 core tasks each. Focus on task management and progress visualization.
3. **EU Data Protection Hub:**
* **User Flow:** User visits the 'Learn' section. They can browse articles categorized by topic (GDPR Basics, Data Subject Rights, Compliance Checklist) or use a search bar to find specific information. Articles are presented in a clean, readable format with clear headings and summaries.
* **MVP Focus:** Curated content for essential GDPR concepts and implications for migrating users.
4. **Community Forum:**
* **User Flow:** User navigates to 'Community'. They can view existing discussion threads, filter by category (e.g., 'Service Recommendations', 'Visa Questions'), and read posts. MVP will focus on viewing and reading threads. Posting and replying may be deferred to later versions.
* **MVP Focus:** Read-only access to forum threads. Basic categorization.
UI/UX DESIGN:
- **Layout:** Single-page application structure. A persistent navigation sidebar/header for accessing core features (Compare, Journey, Learn, Community). Main content area dynamically updates based on the selected route. Clean, modern, and uncluttered interface.
- **Color Palette:** Primary: Deep Blue (#1E3A8A), Secondary: Teal (#14B8A6), Accent: Amber (#F59E0B), Neutral: Grays (#F3F4F6, #6B7280, #1F2937). Use blue for primary actions and navigation, teal for positive indicators/success, amber for warnings/accents, and grays for backgrounds and text.
- **Typography:** Use a clean sans-serif font family like Inter or Inter Variable. H1 for page titles, H2 for section headings, body text for paragraphs. Ensure good readability and hierarchy.
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content reflows and resizes appropriately. Use Tailwind's responsive prefixes (sm:, md:, lg:, xl:) extensively.
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions for route changes and modal openings. Clear loading indicators (spinners, skeleton screens) for data fetching.
COMPONENT BREAKDOWN:
- `App.js`: Main application component, sets up routing using React Router.
- `Navigation.js`: Persistent sidebar/header component. Manages navigation links. Receives `currentRoute` as a prop.
- `HomePage.js`: Landing page with a brief overview of the app's value proposition and quick links to core features.
- `ServiceComparisonPage.js`: Container for the service comparison tool.
- `ServiceSearch.js`: Input field and search logic.
- `ServiceCategoryFilter.js`: Buttons/dropdown for filtering by category.
- `ServiceList.js`: Renders `ServiceCard` components.
- `ServiceCard.js`: Displays a summary of an EU service alternative. Props: `service` (object with name, logo, price, features, privacyScore).
- `ServiceDetailModal.js`: Modal to display full details of a service. Props: `isOpen`, `onClose`, `serviceDetails`.
- `MigrationJourneyPage.js`: Container for the journey tracker.
- `JourneySelector.js`: Component to choose a migration path.
- `Checklist.js`: Displays the list of tasks.
- `ChecklistItem.js`: Individual task item with status, notes, deadline. Props: `task` (object), `onUpdateStatus`.
- `ProgressBar.js`: Visualizes the completion percentage.
- `DataHubPage.js`: Container for the information hub.
- `ArticleList.js`: Displays list of articles.
- `Article.js`: Displays a single article content.
- `SearchComponent.js`: Search bar for articles.
- `CommunityPage.js`: Container for the forum.
- `ThreadList.js`: Displays a list of discussion threads.
- `ThreadCard.js`: Summary of a forum thread. Props: `thread` (object).
- `Footer.js`: Standard footer with copyright and links.
- `LoadingSpinner.js`: Reusable spinner component.
DATA MODEL:
- **State Management (Zustand Store):**
```javascript
// store.js
import { create } from 'zustand';
const useStore = create((set) => ({
// Service Comparison
comparisonData: [], // Mock data initially
filteredServices: [],
selectedService: null,
comparisonFilters: { category: '', searchTerm: '' },
// Journey Tracker
migrationPaths: [],
currentJourney: null, // { id: '...', name: '...', tasks: [...] }
// Data Hub
articles: [],
// Community
threads: [],
// UI States
isLoading: false,
error: null,
// Actions
fetchServices: async () => {
set({ isLoading: true });
// Simulate API call or load from mock data
const mockServices = mockServiceData; // See SAMPLE DATA
set({ comparisonData: mockServices, filteredServices: mockServices, isLoading: false });
},
setComparisonFilters: (filters) => set(state => {
// Logic to filter comparisonData based on filters
const updatedFiltered = state.comparisonData.filter(/* ... filter logic ... */);
return { comparisonFilters: filters, filteredServices: updatedFiltered };
}),
selectService: (serviceId) => set(state => {
const service = state.filteredServices.find(s => s.id === serviceId);
return { selectedService: service };
}),
// ... other actions for Journey, Data Hub, Community ...
setError: (err) => set({ error: err, isLoading: false }),
}));
export default useStore;
```
- **Mock Data Formats:**
* `Service`: `{ id: string, name: string, logoUrl: string, category: string, priceInfo: string, keyFeatures: string[], privacyScore: number, description: string, pros: string[], cons: string[], userReviews: { author: string, rating: number, comment: string }[] }`
* `MigrationPath`: `{ id: string, name: string, tasks: Task[] }`
* `Task`: `{ id: string, description: string, status: 'todo' | 'inProgress' | 'completed', notes?: string, deadline?: string, resources?: string[] }`
* `Article`: `{ id: string, title: string, category: string, content: string, excerpt: string }`
* `Thread`: `{ id: string, title: string, author: string, timestamp: string, postCount: number }`
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Use `CSSTransition` or `Framer Motion` for subtle fade-in/slide-in effects when navigating between pages.
- **Hover Effects:** Slight scale-up or background color change on interactive elements like buttons, cards, and links.
- **Loading States:** Implement `Suspense` with `Fallback` components (e.g., `LoadingSpinner` or skeleton loaders) for asynchronous data loading. Use subtle pulsing or fading animations for skeleton loaders.
- **Modal Animations:** Smooth slide-in/fade-in from the center or top for modals.
- **Micro-interactions:** Visual feedback on button clicks (slight press effect), checkbox toggles, and task status changes.
EDGE CASES:
- **Empty States:** For `ServiceList`, `Checklist`, `ArticleList`, `ThreadList`, display user-friendly messages (e.g., 'No services found matching your criteria.', 'Your migration journey is empty. Start by selecting a path.'). Use relevant icons.
- **Error Handling:** Implement global error handling. Display user-friendly error messages using toasts or a dedicated error display component. Log detailed errors to the console. Handle API errors gracefully (e.g., network issues, 404s).
- **Validation:** Implement client-side validation for any user input fields (e.g., search terms, notes in tasks). Use clear visual cues for invalid input.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure proper ARIA attributes where necessary. Keyboard navigability for all interactive elements. Sufficient color contrast. Use accessible components from Headless UI.
SAMPLE DATA:
```javascript
// Mock Service Data (Partial Example)
const mockServiceData = [
{
id: 'fastmail-alt-1',
name: 'Proton Mail',
logoUrl: '/logos/protonmail.svg',
category: 'Email',
priceInfo: 'Free, Mail Plus, Proton Unlimited',
keyFeatures: ['End-to-end encryption', 'Swiss-based', 'Custom domains (Paid)', 'Calendar included'],
privacyScore: 9.5,
description: 'Secure and private email service based in Switzerland with a strong focus on encryption.',
pros: ['Excellent privacy', 'Strong encryption', 'User-friendly interface'],
cons: ['Free tier has limitations', 'Custom domains require paid plan'],
userReviews: [
{ author: 'Alice G.', rating: 5, comment: 'Switched from Fastmail, much better privacy!' },
{ author: 'Bob K.', rating: 4, comment: 'Good overall, but slightly pricier for full features.' }
]
},
{
id: 'fastmail-alt-2',
name: 'mailbox.org',
logoUrl: '/logos/mailbox.org.svg',
category: 'Email',
priceInfo: 'Cloud Lite, Cloud Standard, Cloud Advanced',
keyFeatures: ['Environmentally friendly', 'Based in Germany', 'Custom domains', 'Office suite integration', 'Calendar & Drive'],
privacyScore: 8.8,
description: 'A feature-rich email provider from Germany with a commitment to sustainability and data protection.',
pros: ['Generous storage', 'Good value for money', 'Supports OpenPGP'],
cons: ['Interface can feel a bit dated', 'Calendar less polished than some competitors'],
userReviews: [
{ author: 'Charlie D.', rating: 4, comment: 'Solid, reliable email provider with good EU roots.' }
]
}
// ... more services for Email, Cloud Storage etc.
];
// Mock Migration Path Data
const mockMigrationPaths = [
{
id: 'individual-relocation',
name: 'Individual Relocation to EU',
tasks: [
{ id: 'task-1', description: 'Research Visa Options', status: 'todo', deadline: '2024-06-01' },
{ id: 'task-2', description: 'Gather Required Documents', status: 'todo', deadline: '2024-07-15' },
{ id: 'task-3', description: 'Apply for Visa', status: 'inProgress', notes: 'Submitted application on 2024-05-20', deadline: '2024-09-01' },
{ id: 'task-4', description: 'Find Accommodation', status: 'todo', deadline: '2024-10-01' },
{ id: 'task-5', description: 'Open EU Bank Account', status: 'completed', deadline: '2024-11-15' },
// ... more tasks
]
},
// ... more paths like 'EU Business Setup'
];
// Mock Article Data
const mockArticles = [
{ id: 'art-1', title: 'Understanding GDPR Basics', category: 'GDPR', excerpt: 'Key principles of the General Data Protection Regulation...', content: 'Detailed GDPR content here...' },
{ id: 'art-2', title: 'Top 5 Email Providers in the EU', category: 'Services', excerpt: 'A comparison of secure email services available within the EU...', content: 'Email provider comparison details...' },
// ... more articles
];
// Mock Thread Data
const mockThreads = [
{ id: 'thread-1', title: 'Best approach for Schengen Visa application?', author: 'Traveler23', timestamp: '2024-05-21T10:00:00Z', postCount: 15 },
{ id: 'thread-2', title: 'Switching from Google Workspace to EU alternatives?', author: 'BizOwnerEU', timestamp: '2024-05-20T14:30:00Z', postCount: 8 },
// ... more threads
];
```
DEPLOYMENT NOTES:
- **Build:** Use Vite's build command (`npm run build` or `yarn build`). Ensure the output is configured for static hosting.
- **Environment Variables:** Use `.env` files for managing environment variables (e.g., `NODE_ENV`). For a production build, Vite automatically uses the production configuration.
- **Performance Optimizations:**:
- Code Splitting: Vite handles this automatically for React Router routes.
- Lazy Loading: Implement lazy loading for components, especially those not immediately visible (e.g., modals, less critical sections).
- Image Optimization: Ensure all logos and images are optimized for web use. Consider using a CDN if serving many assets.
- Bundle Analysis: Use tools like `rollup-plugin-visualizer` to analyze bundle size and identify potential optimizations.
- **Hosting:** Recommend static hosting platforms like Netlify, Vercel, or GitHub Pages for easy deployment and scaling.