You are an AI assistant tasked with building a single-page React application called 'Yalnızlık Pusulası' (Loneliness Compass). This app is designed to help individuals navigate the challenges of newfound loneliness, providing tools for connection, activity discovery, and personal growth.
## 1. PROJECT OVERVIEW
**Problem:** Many individuals, particularly after significant life changes (breakups, divorce, moving, loss), find themselves unexpectedly alone and struggle with the emotional and practical aspects of solitude. They experience difficulty in finding social connections, filling their time meaningfully, and managing feelings of isolation and panic. Existing solutions are often generic or fail to provide a structured, supportive environment.
**Solution:** 'Yalnızlık Pusulası' offers a holistic digital companion. It provides tools to track emotional well-being, discover personalized activities, connect with a supportive community of peers, and engage in guided self-care practices. The core value proposition is to empower users to transform loneliness from a debilitating state into an opportunity for self-discovery and personal growth.
**Goal:** To create a user-friendly, single-page React application (SPA) that serves as a safe haven and a proactive tool for individuals experiencing loneliness.
## 2. TECH STACK
* **Frontend Framework:** React (using Create React App for simplicity or Vite for performance)
* **Styling:** Tailwind CSS (for rapid UI development and utility-first styling)
* **State Management:** Zustand (lightweight and performant, suitable for SPA)
* **Routing:** React Router DOM (for navigation within the SPA)
* **Forms:** React Hook Form (for efficient form handling and validation)
* **Icons:** React Icons (for a variety of icon options)
* **Date/Time:** date-fns (lightweight date utility library)
* **Optional (for animations):** Framer Motion (for engaging UI animations)
## 3. CORE FEATURES & USER FLOWS
**a. Mood & Loneliness Tracker:**
* **User Flow:** Upon login/app launch, the user is presented with a simple interface to log their current mood (e.g., Happy, Neutral, Sad, Anxious, Content) and rate their level of loneliness on a scale (1-5). A timestamp is automatically recorded. Users can view a history of their entries visualized through a simple graph or calendar view.
* **Details:** This feature helps users become aware of patterns and triggers. The interface should be quick and unobtrusive.
**b. Personalized Activity Recommender:**
* **User Flow:** Users can optionally input interests (e.g., Reading, Learning, Creative Arts, Outdoors, Socializing, Fitness). The app suggests activities based on these interests and the user's current mood/loneliness level. For example, if feeling low and interested in 'Creative Arts', it might suggest 'Try a 10-minute watercolor tutorial' or 'Write a short poem'. If feeling social and lonely, it might suggest 'Join a local book club' or 'Find a nearby board game meetup'. Suggestions will include direct links to relevant resources (e.g., YouTube tutorials, meetup sites, online courses) or prompts for offline activities.
* **Details:** The recommender should offer a mix of solo and social activities, short-term and long-term engagement options.
**c. Community Connect (Forum/Groups):**
* **User Flow:** Users can browse different forum categories (e.g., 'Sharing Daily Wins', 'Coping Strategies', 'Hobby Corner', 'Seeking Friends'). They can create new posts, comment on existing ones, and potentially join small, moderated chat groups based on shared interests or location (optional for MVP).
* **Details:** This needs to feel safe and supportive. Basic moderation tools and user reporting are essential. Anonymity options could be considered.
**d. Mindful Moments (Guided Exercises):**
* **User Flow:** Users can access a library of short, guided audio or text-based exercises. Categories might include 'Breathing Exercises for Anxiety', '5-Minute Meditation for Calm', 'Gratitude Practice', 'Mindful Walking Prompt'. Each session is designed to be brief (5-15 minutes).
* **Details:** Content should be soothing and easy to follow. Minimalistic player interface.
**e. Progress & Achievements:**
* **User Flow:** The app automatically tracks streaks (e.g., consecutive days of mood logging, exercise completion). Users can manually add 'Wins' or 'Accomplishments' (e.g., 'Tried a new recipe', 'Reached out to an old friend'). This section serves as a personal journal of positive actions and progress.
* **Details:** Visual encouragement and positive reinforcement are key. A simple celebratory animation upon logging a win.
## 4. UI/UX DESIGN
* **Layout:** Single Page Application. Main navigation (e.g., Dashboard, Activities, Community, Mindful Moments, Profile/Progress) likely in a sidebar or top bar. Content area displays the selected section. Clean, uncluttered interface.
* **Color Palette:** Calming and optimistic. Primary colors: Soft blues (#A0C4FF), muted greens (#BDE0FE), gentle purples (#DDD5E8). Accent colors: A warm, encouraging tone like a soft coral (#FFD6A5) for calls to action. Neutral background: Off-white (#F8F9FA) or very light gray.
* **Typography:** Readable and friendly. Use a sans-serif font like 'Inter' or 'Nunito Sans'. Clear hierarchy with distinct sizes for headings, subheadings, and body text.
* **Responsive Design:** Mobile-first approach. The layout must adapt seamlessly to various screen sizes (smartphones, tablets, desktops). Use Tailwind's responsive modifiers (e.g., `md:`, `lg:`).
* **Onboarding:** A brief, welcoming onboarding flow explaining the app's purpose and guiding the user through initial setup (e.g., setting interests, first mood log).
## 5. DATA MODEL (Using Zustand)
```javascript
// Mock Data Structure Examples
// User Profile
interface UserProfile {
id: string;
name: string;
interests: string[];
joinedDate: string; // ISO date string
}
// Mood Log Entry
interface MoodLog {
id: string;
timestamp: string; // ISO date string
mood: 'Happy' | 'Neutral' | 'Sad' | 'Anxious' | 'Content';
lonelinessLevel: 1 | 2 | 3 | 4 | 5;
notes?: string;
}
// Activity Suggestion
interface Activity {
id: string;
title: string;
description: string;
category: 'Learning' | 'Creative' | 'Social' | 'Outdoor' | 'Fitness' | 'Self-Care';
estimatedTime: string; // e.g., '15 min', '1 hour', 'Flexible'
url?: string; // Link to external resource
type: 'Solo' | 'Social';
}
// Community Post
interface CommunityPost {
id: string;
authorId: string; // or anonymized ID
authorName: string; // or 'Anonymous User'
timestamp: string; // ISO date string
title: string;
content: string;
comments: Comment[];
}
interface Comment {
id: string;
authorId: string;
authorName: string;
timestamp: string; // ISO date string
content: string;
}
// Mindful Exercise
interface Exercise {
id: string;
title: string;
description: string;
durationMinutes: number;
type: 'Meditation' | 'Breathing' | 'Mindfulness' | 'Affirmation';
audioUrl?: string; // Optional
content: string; // Text content for display
}
// Achievement/Win
interface Win {
id: string;
timestamp: string; // ISO date string
description: string;
isManualEntry: boolean;
}
// Zustand Store Example
interface AppState {
user: UserProfile | null;
moodLogs: MoodLog[];
activities: Activity[];
communityPosts: CommunityPost[];
exercises: Exercise[];
wins: Win[];
addMoodLog: (log: Omit<MoodLog, 'id' | 'timestamp'>) => void;
addWin: (win: Omit<Win, 'id' | 'timestamp'>) => void;
// ... other actions
}
// Initial State Example
const initialState: AppState = {
user: null,
moodLogs: [],
activities: [],
communityPosts: [],
exercises: [],
wins: [],
addMoodLog: () => {}, // Implement actual logic
addWin: () => {}, // Implement actual logic
};
```
## 6. COMPONENT BREAKDOWN
* **`App.jsx`**: Main application component. Sets up routing and global layout.
* **`Navigation.jsx`**: Sidebar or top navigation component. Links to different sections.
* **`Dashboard.jsx`**: Main landing page after login. Shows summary widgets (e.g., today's mood, next recommended activity, recent community posts).
* `MoodTrackerWidget.jsx`: Displays current mood log status and provides a quick log button.
* `ActivityReel.jsx`: Shows a few suggested activities.
* `CommunityFeedPreview.jsx`: Shows latest posts from the community.
* **`MoodTracker.jsx`**: Full page for logging and viewing mood history.
* `MoodEntryForm.jsx`: Form to select mood, loneliness level, and add notes.
* `MoodHistoryChart.jsx`: Visualizes past mood logs (e.g., line chart).
* **`ActivityRecommender.jsx`**: Page displaying activity suggestions.
* `InterestSelector.jsx`: Component for users to select/update their interests.
* `ActivityCard.jsx`: Displays a single activity suggestion with details and an action button (e.g., 'Learn More', 'Try Now').
* **`Community.jsx`**: Forum page.
* `PostList.jsx`: Renders a list of `CommunityPostCard` components.
* `CommunityPostCard.jsx`: Displays a summary of a community post.
* `CreatePostForm.jsx`: Form for creating new posts.
* `PostDetailView.jsx`: Displays a single post and its comments.
* `CommentList.jsx`
* `CommentForm.jsx`
* **`MindfulMoments.jsx`**: Library of guided exercises.
* `ExerciseList.jsx`: Renders a list of `ExerciseCard` components.
* `ExerciseCard.jsx`: Displays an exercise summary.
* `ExercisePlayer.jsx`: Component to play audio or display text-based exercises.
* **`Progress.jsx`**: User's profile and achievements page.
* `WinLog.jsx`: Form to add a manual win.
* `AchievementList.jsx`: Displays earned achievements and streaks.
* **`Auth.jsx`**: Login/Signup components (if implementing backend auth).
* **`Modal.jsx`**: Generic modal component for popups (e.g., confirmations, quick logging).
* **`Button.jsx`**: Reusable button component.
* **`Input.jsx`**: Reusable input component.
## 7. ANIMATIONS & INTERACTIONS
* **Page Transitions:** Subtle fade-in/fade-out transitions between sections using `Framer Motion` or CSS transitions. Example: `motion.div` wrapping page content with `initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}`.
* **Hover Effects:** Gentle scaling or background color changes on interactive elements like buttons and cards.
* **Loading States:** Skeleton loaders or spinners for asynchronous data loading (e.g., fetching community posts).
* **Micro-interactions:** A subtle animation when logging mood (e.g., the selected emoji/icon pulses). A small celebratory animation when a 'Win' is logged.
* **Form Feedback:** Visual cues for input validation (e.g., red borders, subtle shake animation on error).
## 8. EDGE CASES & ACCESSIBILITY (a11y)
* **Empty States:** All lists (mood logs, activities, posts, wins) should have clear, encouraging messages when empty (e.g., 'Log your first mood to start seeing patterns!', 'Discover new activities to brighten your day!').
* **Error Handling:** Graceful error messages for network failures or unexpected data issues. Use `try...catch` blocks and display user-friendly error notifications.
* **Validation:** Client-side validation for all forms (mood log, new post, comments, profile interests) using `React Hook Form`. Clear error messages associated with each field.
* **Accessibility (a11y):**
* Semantic HTML: Use appropriate tags (`<nav>`, `<main>`, `<button>`, etc.).
* ARIA Attributes: Use where necessary, especially for custom interactive elements or dynamic content updates.
* Keyboard Navigation: Ensure all interactive elements are focusable and usable with a keyboard.
* Color Contrast: Ensure sufficient contrast between text and background colors, adhering to WCAG guidelines.
* Focus Management: Manage focus appropriately, especially within modals and forms.
## 9. SAMPLE DATA
```json
// activities.json (Example Data)
[
{
"id": "act_001",
"title": "5 Minute Guided Meditation for Calm",
"description": "A short, guided meditation to help find peace and calm in your day.",
"category": "Self-Care",
"estimatedTime": "5 min",
"type": "Solo",
"url": "/mindful-moments/meditation-001"
},
{
"id": "act_002",
"title": "Explore Local Parks",
"description": "Discover the green spaces in your area. Great for a mindful walk.",
"category": "Outdoor",
"estimatedTime": "1 hour",
"type": "Solo"
},
{
"id": "act_003",
"title": "Online Beginner's Drawing Course",
"description": "Learn the basics of drawing with this free online course from Skillshare.",
"category": "Creative",
"estimatedTime": "Flexible",
"type": "Solo",
"url": "https://www.skillshare.com/...?"
},
{
"id": "act_004",
"title": "Join a Local Book Club",
"description": "Connect with fellow readers in your community. Check Meetup or local libraries.",
"category": "Social",
"estimatedTime": "Weekly/Monthly",
"type": "Social",
"url": "https://www.meetup.com/"
},
{
"id": "act_005",
"title": "Learn a New Language - Duolingo",
"description": "Start learning Spanish, French, or any other language with bite-sized lessons.",
"category": "Learning",
"estimatedTime": "15 min/day",
"type": "Solo",
"url": "https://www.duolingo.com/"
}
]
// communityPosts.json (Example Data)
[
{
"id": "post_001",
"authorId": "user_123",
"authorName": "Alex P.",
"timestamp": "2023-10-27T10:30:00Z",
"title": "Finally tried cooking for myself!",
"content": "Made pork steaks last night. It felt a bit strange at first, but it turned out surprisingly well! Small win, but a win nonetheless.",
"comments": [
{
"id": "comment_001",
"authorId": "user_456",
"authorName": "Sam K.",
"timestamp": "2023-10-27T11:05:00Z",
"content": "That's awesome, Alex! What kind of steaks? I'm always looking for new recipes."
}
]
},
{
"id": "post_002",
"authorId": "user_789",
"authorName": "Anonymous User",
"timestamp": "2023-10-26T18:45:00Z",
"title": "Weekend loneliness is hitting hard.",
"content": "It's Sunday evening and the quiet is deafening. Any tips for making weekends feel less empty? My dog is great company, but...",
"comments": [
{
"id": "comment_002",
"authorId": "user_123",
"authorName": "Alex P.",
"timestamp": "2023-10-27T09:15:00Z",
"content": "I hear you. I've been trying to plan one small outing each day, even just a walk in a different park."
},
{
"id": "comment_003",
"authorId": "user_012",
"authorName": "Maria G.",
"timestamp": "2023-10-27T14:00:00Z",
"content": "Have you considered volunteering for a few hours on Saturday? It gives structure and purpose."
}
]
}
]
// moodLogs.json (Example for initial state)
[
{
"id": "log_001",
"timestamp": "2024-01-15T09:00:00Z",
"mood": "Neutral",
"lonelinessLevel": 3,
"notes": "Woke up feeling okay, but the quiet house is noticeable."
}
]
// exercises.json (Example Data)
[
{
"id": "ex_001",
"title": "Deep Breathing for Anxiety Relief",
"description": "Follow this simple breathing pattern to calm your nervous system.",
"durationMinutes": 5,
"type": "Breathing",
"content": "Inhale deeply through your nose for 4 seconds... Hold for 4 seconds... Exhale slowly through your mouth for 6 seconds... Repeat."
},
{
"id": "ex_002",
"title": "Morning Gratitude Practice",
"description": "Take a moment to reflect on things you are thankful for.",
"durationMinutes": 3,
"type": "Mindfulness",
"content": "Think of 3 things you are grateful for today. They can be big or small."
}
]
// wins.json (Example Data)
[
{
"id": "win_001",
"timestamp": "2024-01-15T18:00:00Z",
"description": "Tried a new recipe for dinner.",
"isManualEntry": true
},
{
"id": "win_002",
"timestamp": "2024-01-16T09:00:00Z",
"description": "Completed the 'Deep Breathing for Anxiety Relief' exercise.",
"isManualEntry": false // Assumed auto-tracked
}
]
```
## 10. DEPLOYMENT NOTES
* **Build Command:** Use `npm run build` or `yarn build`.
* **Environment Variables:** Use `.env` files for configuration (e.g., API keys if external services are integrated later). `REACT_APP_` prefix for CRA, or `VITE_` prefix for Vite.
* **Static Hosting:** The built application is a set of static files, suitable for hosting on platforms like Netlify, Vercel, GitHub Pages, or AWS S3.
* **Performance:** Code splitting (if app grows complex), image optimization, memoization (`React.memo`, `useMemo`, `useCallback`) for performance-critical components. Lazy loading components.
* **PWA Considerations:** For a better mobile experience, consider converting to a Progressive Web App (PWA) by adding a service worker for offline capabilities and a manifest file.