Resource & Project Planner

A modern, local-first web application for managing team resources, scheduling projects, and visualizing capacity. Built with React, TypeScript, and Tailwind CSS.

Features

👥 Resource Management

• Team Directory: Manage your team members with detailed profiles.
• Skill Tracking: Tag resources with specific skills (e.g., React, Design, Backend).
• Capacity Planning: Define working days and daily hour limits for each team member.
• Availability Constraints: Set maximum concurrent project limits per resource.

📁 Project Portfolio

• Project Card View: visual overview of all active and upcoming projects.
• Requirements Engine: Define granular resource requirements per project (e.g., "Need a Senior Dev for 40 hours" or "Frontend Dev for 5 days").
• Prioritization: Set project priorities (High, Medium, Low) to influence the auto-scheduler.

🧠 Intelligent Auto-Scheduling

• One-Click Planning: Automatically generates a resource allocation plan based on priorities, skills, and availability.
• Conflict Resolution: Identifies and visualizes gaps where requirements cannot be met.
• Optimization Rules:
  • Respects daily working hours and weekends.
  • Enforces maximum concurrent project limits.
  • Prioritizes high-value projects.
  • Matches best-fit resources based on roles and skills.

📊 Visualization & Analytics

• Timeline View: A clear, day-by-day view of who is working on what.
• Allocation Heatmap: Visual indicators for over/under-utilization.
• Gap Analysis: dedicated panel highlighting unfulfilled requirements and the reasons (e.g., "No Capacity", "No Skill Match").

💾 Local-First Architecture

• Data Persistence: All data is stored locally in your browser using IndexedDB.
• Privacy Focused: No data is sent to external servers.
• Import/Export: Easily backup your data or share scenarios via JSON export.

Tech Stack

• Framework: React 19 + Vite
• Language: TypeScript
• Styling: Tailwind CSS v4
• State Management: Zustand
• Database: IDB (IndexedDB wrapper)
• UI Components: Radix UI primitives, Lucide Icons, Framer Motion
• Utilities: date-fns, clsx, tailwind-merge

Getting Started

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build for production:

   npm run build

Development Notes

This project uses a custom component library located in src/components/ui, built with class-variance-authority for flexible styling. The scheduling logic is isolated in src/engine/scheduler.ts for easy testing and extension.