PROJECT OVERVIEW:
The application, tentatively named 'Boş Zaman' (meaning 'Free Time' in Turkish), aims to address the growing anxiety surrounding job displacement due to Artificial Intelligence and automation. It provides a proactive platform for individuals to redefine their purpose, meaningfully utilize their free time, and develop strategies to adapt to the evolving work landscape. The core value proposition lies in empowering users to transform potential threats into opportunities for personal growth, creativity, and a more fulfilling life, drawing inspiration from concepts like Paul Lafargue's 'The Right to Idleness'.
TECH STACK:
- Frontend Framework: React (using Vite for fast development)
- Styling: Tailwind CSS for rapid, utility-first styling and responsive design.
- State Management: Zustand for efficient global state management.
- Routing: React Router DOM for client-side navigation.
- UI Components: Radix UI for accessible and unstyled UI primitives, combined with custom Tailwind-styled components.
- Icons: Lucide React for a consistent and customizable icon set.
- Animations: Framer Motion for expressive animations and transitions.
- Local Storage: Simple persistence for user preferences and session data.
- Potential Future API: Integration with an external AI service for advanced skill gap analysis or personalized content generation (out of MVP scope).
CORE FEATURES:
1. **Personal Purpose Redefinition Module:**
* **User Flow:** Upon first login, users are guided through a series of reflective questions. These questions prompt them to consider their values, passions, skills, and long-term aspirations beyond traditional employment. The module helps users articulate a new sense of purpose in a world where 'work' might be redefined.
* **Functionality:** Interactive questionnaires, journaling prompts, guided visualization exercises. The system stores user input and generates a personalized 'Purpose Statement'.
2. **Free Time Activity Recommendation Engine:**
* **User Flow:** Users can input their available free time (e.g., hours per week), current interests (selected from a predefined list or custom tags), and desired activity types (e.g., learning, creative, relaxation, social). The engine then suggests relevant activities.
* **Functionality:** A recommendation algorithm based on user profile, interest tags, and activity metadata. Activities are categorized and tagged for effective filtering and suggestion. Users can save, dismiss, or mark activities as completed.
3. **AI Impact Analysis & Skill Development Roadmap:**
* **User Flow:** Users select their current profession or industry from a list. The system provides an estimated impact level of AI on that field and suggests relevant skills to acquire or enhance. Users can then add these skills to their personal development plan.
* **Functionality:** A curated database linking professions to potential AI impact and corresponding skill development areas (e.g., critical thinking, creativity, emotional intelligence, specific tech skills). Generates a visual roadmap for skill acquisition.
4. **Community & Inspiration Hub:**
* **User Flow:** Users can browse inspirational stories from others, share their own 'free time' projects or discoveries, and participate in discussions related to adapting to the future of work. They can follow other users and like/comment on posts.
* **Functionality:** A feed-based system displaying user-generated content, categorized discussions, and user profiles. Features include posting text/image content, liking, commenting, and basic user following.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) with a clean, intuitive navigation. A persistent sidebar or top navigation bar for main sections (Purpose, Activities, Skills, Community). Content areas are well-spaced with clear headings and visual hierarchy.
- **Color Palette:** A calming and inspiring palette. Primary: Deep Teal (`#008080`) or a muted Blue (`#4682B4`). Secondary: Warm accent color like Coral (`#FF7F50`) or Gold (`#FFD700`) for calls-to-action and highlights. Neutrals: Off-white (`#F8F8F8`), Light Gray (`#E0E0E0`), Dark Gray (`#333333`) for text and backgrounds.
- **Typography:** A sans-serif font family like 'Inter' or 'Lato' for readability. Clear hierarchy using font weights and sizes (e.g., H1 for page titles, H2 for section titles, Body text for content).
- **Responsive Design:** Mobile-first approach. Tailwind CSS's responsive modifiers (`sm:`, `md:`, `lg:`) will be used extensively. Navigation adapts to smaller screens (e.g., hamburger menu). Grids and flexbox ensure content reflows gracefully.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure sufficient color contrast. Implement ARIA attributes where necessary. Keyboard navigability for all interactive elements.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing.
- `Layout.jsx`: Wrapper for consistent header, sidebar/navbar, and footer.
- `HomePage.jsx`: Dashboard displaying a summary of user's purpose, suggested activities, and skill progress.
- `PurposeModule.jsx`: Contains components for guided questions, purpose statement display, and journaling.
- `Questionnaire.jsx`: Renders questions, handles user input.
- `PurposeStatement.jsx`: Displays the generated purpose statement.
- `JournalEntry.jsx`: Input field for journal entries.
- `ActivityRecommender.jsx`: Interface for setting preferences and displaying recommended activities.
- `ActivityFilter.jsx`: Controls for time, interests, activity type.
- `ActivityCard.jsx`: Displays individual activity suggestion.
- `AIImpactAnalyzer.jsx`: Section for profession selection and skill roadmap display.
- `ProfessionSelector.jsx`: Dropdown or search for professions.
- `ImpactIndicator.jsx`: Visual representation of AI impact.
- `SkillRoadmap.jsx`: Displays learning path and suggested skills.
- `CommunityHub.jsx`: Main component for the social feed.
- `PostForm.jsx`: Component for creating new posts.
- `PostCard.jsx`: Displays a single community post.
- `CommentSection.jsx`: Displays and handles comments for a post.
- `Header.jsx`, `Sidebar.jsx`, `Footer.jsx`: Common layout components.
- `Button.jsx`, `Input.jsx`, `Card.jsx`: Reusable UI primitives styled with Tailwind.
DATA MODEL:
- **UserState:** `{ userId: string, purposeStatement: string | null, interests: string[], savedActivities: Activity[], skillRoadmap: Skill[], ... }`
- **Activity:** `{ id: string, name: string, description: string, category: string, tags: string[], estimatedTime: string, suggestedFor: string[] }`
- **Profession:** `{ id: string, name: string, aiImpactLevel: 'low' | 'medium' | 'high', recommendedSkills: Skill[] }`
- **Skill:** `{ id: string, name: string, description: string }`
- **CommunityPost:** `{ postId: string, authorId: string, content: string, imageUrl?: string, timestamp: Date, likes: number, comments: Comment[] }`
- **Comment:** `{ commentId: string, authorId: string, content: string, timestamp: Date }`
*State Management (Zustand):* Global state will store user authentication status, purpose statement, selected interests, saved roadmap items, and community feed data. Local component state will handle form inputs, UI states (like loading spinners, modal visibility).
*Local Storage:* Used for persisting user preferences like theme (light/dark), recent searches, and potentially caching some non-sensitive data for faster loading.
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out transitions between major sections using Framer Motion (`AnimatePresence`).
- **Hover Effects:** Buttons and interactive cards will have slight scale changes or background color shifts on hover.
- **Loading States:** Skeleton loaders or spinners will be used for asynchronous data fetching (e.g., community feed, activity recommendations). Buttons will show loading states during submission.
- **Micro-interactions:** Animated icons (e.g., like button), smooth expansion/collapse of comment sections, subtle feedback on form submissions.
- **Card Animations:** Activities and community posts will appear with a slight stagger effect as they load into lists.
EDGE CASES:
- **Empty States:** All sections (Purpose, Activities, Skills, Community) will have clear, friendly empty state messages and calls-to-action when no data is available (e.g., 'Start defining your purpose!', 'No activities recommended yet. Add your interests!').
- **Error Handling:** Graceful handling of network errors during data fetching, displaying user-friendly error messages. Input validation on all forms (e.g., purpose statement length, valid interest tags).
- **No Data Scenarios:** The recommendation engine should provide sensible defaults or instructions if insufficient data is available to generate recommendations.
- **Accessibility:** ARIA labels for interactive elements, focus management, keyboard navigation.
SAMPLE DATA:
1. **UserProfile (Mock):**
```json
{
"userId": "user123",
"purposeStatement": "To foster creativity and lifelong learning in myself and others, adapting proactively to technological change.",
"interests": ["philosophy", "creative writing", "AI ethics", "mindfulness"],
"savedActivities": ["activity_002", "activity_005"],
"skillRoadmap": [{"skillId": "skill_001", "status": "in_progress"}, {"skillId": "skill_003", "status": "planned"}]
}
```
2. **Activity (Mock):
```json
{
"id": "activity_001",
"name": "Learn Basic Calligraphy",
"description": "Explore the art of beautiful handwriting. A relaxing and creative outlet.",
"category": "Creative",
"tags": ["art", "craft", "mindfulness", "new skill"],
"estimatedTime": "2-4 hours/week",
"suggestedFor": ["creative", "relaxation"]
}
```
3. **Activity (Mock):
```json
{
"id": "activity_002",
"name": "Deep Dive into Stoicism",
"description": "Read primary texts and modern interpretations of Stoic philosophy.",
"category": "Learning",
"tags": ["philosophy", "history", "critical thinking"],
"estimatedTime": "3-5 hours/week",
"suggestedFor": ["philosophy", "intellectual"]
}
```
4. **ProfessionImpact (Mock):
```json
{
"professionId": "prof_001",
"name": "Content Writer",
"aiImpactLevel": "medium",
"recommendedSkills": ["skill_001", "skill_004", "skill_005"]
}
```
5. **Skill (Mock):
```json
{
"id": "skill_001",
"name": "Advanced Prompt Engineering",
"description": "Mastering the art of crafting effective prompts for AI language models."
}
```
6. **Skill (Mock):
```json
{
"id": "skill_002",
"name": "AI Ethics and Governance",
"description": "Understanding the ethical implications and regulatory frameworks surrounding AI."
}
```
7. **CommunityPost (Mock):
```json
{
"postId": "post_abc",
"authorId": "user456",
"content": "Just finished a weekend project applying calligraphy to digital art! So rewarding. #creative #hobby",
"imageUrl": "/path/to/image.jpg",
"timestamp": "2024-07-28T10:30:00Z",
"likes": 15,
"comments": [{"commentId": "cmt_001", "authorId": "user789", "content": "Looks amazing!", "timestamp": "2024-07-28T10:35:00Z"}]
}
```
DEPLOYMENT NOTES:
- **Build:** Use `vite build` for optimized production build. Analyze bundle size and optimize imports.
- **Environment Variables:** Use `.env` files for API keys (if any), backend URLs, etc. Prefix variables with `VITE_` for Vite to inject them.
- **Performance:** Implement code splitting with React.lazy and Suspense. Optimize images. Use memoization (React.memo, useMemo, useCallback) where appropriate.
- **Hosting:** Deploy to platforms like Vercel, Netlify, or similar static hosting providers for optimal performance and scalability.
- **HTTPS:** Ensure HTTPS is enabled on the deployment environment.