PROJECT OVERVIEW:
The application, tentatively named 'Proje Kalkanı: Kişisel Proje Yönetimi' (Project Shield: Personal Project Management), is a SaaS platform designed to empower individual developers, engineers, and designers to manage their personal projects with the same discipline and rigor applied to enterprise-level software development. The core problem it addresses is the disconnect between the structured, scalable engineering practices used in professional work and the often ad-hoc, less organized approach taken with personal side projects. The value proposition is to provide a centralized, intelligent platform that helps users organize, track, scale, and potentially monetize their personal endeavors, thereby fostering continuous learning, skill development, and career growth beyond their primary employment. It aims to bridge the gap between the 'skyscraper' and the 'shed' mentioned in the user problem, applying architectural principles to personal creations.
TECH STACK:
- Frontend Framework: React.js (using Create React App or Vite for setup)
- Styling: Tailwind CSS for rapid UI development and consistent styling.
- State Management: Zustand for efficient global state management.
- Routing: React Router DOM for client-side navigation.
- Local Storage: For persisting user data and settings offline (as a fallback or for offline-first experience).
- Potential API: For future scalability (e.g., user authentication, cloud sync), a simple RESTful API using Node.js/Express or a BaaS like Firebase could be considered, but MVP focuses on local storage.
- Icons: Heroicons or similar SVG icon library.
- Utilities: date-fns for date manipulation.
CORE FEATURES:
1. **Project Dashboard:**
* **User Flow:** Upon logging in (or opening the app if no auth yet), the user sees a dashboard displaying all their personal projects. Each project is represented by a card showing its title, a brief description, status (e.g., Planning, In Progress, On Hold, Completed), priority, and last updated date. A prominent 'Create New Project' button is available. Users can click on a project card to navigate to its detailed view.
* **Functionality:** List projects, filter/sort by status, priority, or date. View a summary of each project.
2. **Project Detail View:**
* **User Flow:** Clicking a project card leads to a dedicated page for that project. This page displays the full project details, including its description, goals, and a list of associated tasks. Users can edit project details, add new tasks, and update task statuses directly from this view.
* **Functionality:** View/edit project title, description, status, priority. Add, edit, delete tasks within the project.
3. **Task Management:**
* **User Flow:** Within a project's detail view, users can add new tasks. Each task can have a title, description, due date, priority, and status (e.g., To Do, In Progress, Done). Tasks are displayed in a list or kanban-style view. Users can drag and drop tasks to change status or reorder them. Clicking a task opens a modal for detailed editing.
* **Functionality:** Create, read, update, delete (CRUD) tasks. Assign due dates and priorities. Track task status.
4. **Resource Tracking (Simplified):**
* **User Flow:** On the Project Detail View or a dedicated 'Resources' tab, users can log estimated time spent, potential costs incurred (e.g., for hosting, software licenses), and other relevant resources. This provides a basic overview of the investment in the project.
* **Functionality:** Input fields for time (hours/days) and cost (currency). Display aggregate resource usage per project.
5. **Knowledge Base/Notes:**
* **User Flow:** A dedicated section within each project (or a global notes area) allows users to store relevant information, ideas, links, or documentation snippets. A rich text editor enables formatted notes.
* **Functionality:** CRUD operations for notes. Basic rich text formatting (bold, italics, lists, links). Search functionality for notes.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) structure. A persistent sidebar for navigation between the main Dashboard, Project Creation, and potentially Settings. The main content area dynamically updates based on the selected view. Responsive design is crucial, adapting seamlessly from desktop to tablet and mobile screens.
- **Color Palette:** Primary: A deep, calming blue (e.g., `#1e3a8a` - slate-800) for backgrounds and primary actions. Secondary: A vibrant accent color (e.g., `#3b82f6` - blue-500) for interactive elements like buttons and links. Neutral: Shades of gray (e.g., `#f3f4f6` - gray-100 for light backgrounds, `#6b7280` - gray-500 for text, `#1f2937` - gray-900 for dark text). Alert/Warning: A subtle orange or red for notifications.
- **Typography:** Clean, modern sans-serif font like Inter or Roboto. Headings should be distinct (e.g., `font-bold text-2xl` or `text-xl`). Body text should be highly readable (e.g., `text-base` or `text-lg`).
- **Responsive Rules:** Mobile-first approach. Utilize Tailwind's responsive modifiers (`sm:`, `md:`, `lg:`) extensively. Ensure touch targets are adequately sized on mobile. Sidebar collapses into a hamburger menu on smaller screens.
COMPONENT BREAKDOWN:
- `App.js`: Main application component, sets up routing and global layout.
- `Layout.js`: Contains the persistent sidebar and main content area structure.
- `Sidebar.js`: Navigation links (Dashboard, New Project, Settings). Handles collapsing/expanding on mobile.
- `DashboardPage.js`: Fetches and displays the list of projects. Contains `ProjectCard.js` and `CreateProjectButton.js`.
- `ProjectCard.js`: Displays summary info for a single project. Takes `project` object as prop. Handles click event to navigate to `ProjectDetailPage`.
- `CreateProjectButton.js`: Button to trigger project creation modal or navigate to creation form.
- `ProjectDetailPage.js`: Displays full project details and tasks. Contains `ProjectForm.js`, `TaskList.js`, `AddTaskButton.js`, `ResourceTracker.js`, `KnowledgeBase.js`.
- `ProjectForm.js`: Modal or form component for creating/editing project details. Takes `initialData` and `onSubmit` props.
- `TaskList.js`: Displays the list of tasks for a project. Uses `TaskItem.js` and potentially `KanbanBoard.js`.
- `TaskItem.js`: Displays a single task. Takes `task` object and `onUpdate` prop. Handles drag-and-drop logic if using Kanban.
- `AddTaskButton.js`: Button to trigger task creation modal.
- `TaskForm.js`: Modal or form component for creating/editing task details. Takes `initialData`, `onSubmit`, `dueDate`, `priority` props.
- `ResourceTracker.js`: Component to display and input resource data (time, cost). Takes `projectResources` and `onUpdate` props.
- `KnowledgeBase.js`: Component for managing notes/docs. Includes a rich text editor. Takes `notes` and `onSave` props.
- `Button.js`: Reusable button component with primary/secondary variants.
- `Input.js`: Reusable text input component.
- `Textarea.js`: Reusable textarea component (potentially with rich text capabilities).
- `Select.js`: Reusable select dropdown component.
- `Modal.js`: Generic modal component.
DATA MODEL:
- **Projects:**
```json
{
"id": "uuid-string",
"title": "string",
"description": "string",
"status": "Planning" | "In Progress" | "On Hold" | "Completed",
"priority": "Low" | "Medium" | "High",
"createdAt": "Date string (ISO 8601)",
"updatedAt": "Date string (ISO 8601)",
"tasks": ["task_id_1", "task_id_2", ...]
}
```
- **Tasks:**
```json
{
"id": "uuid-string",
"projectId": "project_id_string",
"title": "string",
"description": "string",
"status": "To Do" | "In Progress" | "Done",
"priority": "Low" | "Medium" | "High",
"dueDate": "Date string (ISO 8601)" | null,
"createdAt": "Date string (ISO 8601)"
}
```
- **Resources:** (Stored within Project object or as a separate structure)
```json
{
"projectId": "project_id_string",
"estimatedHours": number,
"actualHours": number,
"estimatedCost": number,
"actualCost": number
}
```
- **Notes:** (Stored within Project object or as a separate structure)
```json
{
"projectId": "project_id_string",
"title": "string",
"content": "string (rich text format)",
"createdAt": "Date string (ISO 8601)"
}
```
- **State Management (Zustand Store):**
```javascript
// Example store structure
import create from 'zustand';
const useStore = create((set) => ({
projects: [],
tasks: {},
notes: {},
resources: {},
addProject: (projectData) => set(state => ({ projects: [...state.projects, {...projectData, id: generateUUID(), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), tasks: []}] }))
// ... other actions for tasks, notes, resources, updating, deleting
loadInitialData: (data) => set({ projects: data.projects, tasks: data.tasks, ... })
}));
export default useStore;
```
- **Local Storage:** Data will be serialized (e.g., `JSON.stringify`) and saved under keys like `'projeKalkanı_projects'`, `'projeKalkanı_tasks'`. On app load, attempt to load data from local storage.
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out transitions between main sections (Dashboard, Project Detail) using libraries like `Framer Motion` or CSS transitions.
- **Button Hovers:** Slight background color change or scale effect on button hover states.
- **Task Drag and Drop:** Smooth visual feedback during drag operations in a Kanban view (if implemented). Ghosting effect on the dragged item.
- **Loading States:** Display skeleton loaders or spinners when fetching/saving data, especially if an API is introduced later. For local storage, loading might be near-instant but still provide visual feedback if processing is complex.
- **Micro-interactions:** Subtle animations on adding a task (e.g., item slides into the list), checking off a task (e.g., strikethrough animation), or saving changes (e.g., a brief confirmation checkmark).
- **Form Feedback:** Input validation errors should appear smoothly.
EDGE CASES:
- **Empty States:** The Dashboard should display a friendly message and a clear call-to-action (e.g., 'You have no projects yet. Create your first one!') when no projects exist. Task lists should have similar empty states.
- **Error Handling:** Gracefully handle potential errors during local storage operations (e.g., quota exceeded, read/write errors). Display user-friendly error messages. If API is used, implement robust error handling for network issues, server errors, etc.
- **Validation:** Client-side validation for all form inputs (project title, task title, due dates, numerical inputs for resources). Ensure required fields are filled. Use clear visual cues for validation errors.
- **Data Persistence:** Ensure data saved to local storage is correctly serialized and deserialized. Handle potential data corruption or outdated formats if the data structure evolves.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where necessary. Keyboard navigation should be fully supported. Sufficient color contrast ratios.
SAMPLE DATA:
1. **Project 1:**
```json
{
"id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"title": "Gelişmiş Not Alma Uygulaması",
"description": "Markdown desteği ve bulut senkronizasyonu olan bir not alma uygulaması.",
"status": "In Progress",
"priority": "High",
"createdAt": "2023-10-26T10:00:00Z",
"updatedAt": "2023-10-27T15:30:00Z",
"tasks": ["t1", "t2", "t3"]
}
```
2. **Project 2:**
```json
{
"id": "f0e9d8c7-b6a5-4321-fedc-ba0987654321",
"title": "Kişisel Blog Platformu",
"description": "Hızlı ve SEO dostu statik site üreten bir blog motoru.",
"status": "Planning",
"priority": "Medium",
"createdAt": "2023-10-20T09:00:00Z",
"updatedAt": "2023-10-20T09:00:00Z",
"tasks": []
}
```
3. **Task 1 (for Project 1):**
```json
{
"id": "t1",
"projectId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"title": "Kullanıcı Arayüzü Tasarımı",
"description": "Ana not giriş ekranı ve menü tasarımı.",
"status": "In Progress",
"priority": "High",
"dueDate": "2023-11-05T23:59:59Z",
"createdAt": "2023-10-26T11:00:00Z"
}
```
4. **Task 2 (for Project 1):**
```json
{
"id": "t2",
"projectId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"title": "Temel Veritabanı Yapısı Oluşturma",
"description": "Projeler ve notlar için LocalStorage yapısını tasarlama.",
"status": "To Do",
"priority": "Medium",
"dueDate": "2023-11-10T23:59:59Z",
"createdAt": "2023-10-26T12:00:00Z"
}
```
5. **Resource Entry (for Project 1):**
```json
{
"projectId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"estimatedHours": 80,
"actualHours": 25,
"estimatedCost": 50,
"actualCost": 15
}
```
6. **Note (for Project 1):**
```json
{
"projectId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"title": "Senkronizasyon Fikirleri",
"content": "<ul><li>Option 1: Firebase Realtime Database</li><li>Option 2: Custom WebSocket implementation</li><li>Consider offline first approach.</li></ul>",
"createdAt": "2023-10-27T14:00:00Z"
}
```
DEPLOYMENT NOTES:
- **Build Command:** Standard build command for the chosen framework (e.g., `npm run build` for CRA/Vite).
- **Environment Variables:** Use `.env` files for managing environment variables. For a simple MVP, these might not be critical beyond perhaps API endpoints if used. For production, ensure sensitive keys are handled securely (e.g., not exposed in client-side code).
- **Performance Optimizations:** Code splitting (handled automatically by most modern React setups). Image optimization (if applicable). Lazy loading components. Minifying assets. Consider using a CDN for static assets in production.
- **Hosting:** Static site hosting platforms like Vercel, Netlify, or GitHub Pages are ideal for a client-side focused application.