MultiVerse

A visual project management tool designed for freelancers and independent professionals who need instant awareness of what needs attention.

✨ Features

🎯 Zero-Click Awareness

• Visual health dashboard for all your projects
• Color-coded project cards based on attention received
• Smart auto-sorting keeps neglected projects visible

⏱️ Smart Time Tracking

• One-click work logging with customizable hours
• Daily time tracking with undo functionality
• Progress tracking against estimated hours
• Complete work session history

🎨 Modern Design

• Beautiful shadcn/ui component system
• Dark/Light mode with system preference detection
• Responsive design for desktop and mobile
• Eye-friendly color palette

🏷️ Flexible Organization

• Client vs Personal project separation
• Priority levels (Critical, High, Medium, Low)
• Custom tags for better categorization
• Context notes for easy project switching

🚀 Quick Start

Prerequisites

• Node.js 16.x or higher
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/hoootan/multiverse.git
cd multiverse

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:5173 to see your MultiVerse dashboard.

Building for Production

npm run build
npm run preview

📱 Usage

Creating Projects

1. Click "New Project" in the top-right corner
2. Fill in project details (title, type, priority, etc.)
3. Add tags and context notes to help you stay organized
4. Set deadlines and estimated hours for better tracking

Time Tracking

• Quick Log: Click "Worked Today (1h)" for instant 1-hour logging
• Custom Hours: Use the timer icon to log specific hours (0.5, 2, 4, etc.)
• Daily Overview: See total hours worked today on each project
• Undo: Remove today's work entries with one click

Project Health

Projects are automatically color-coded based on attention:

• 🔴 Critical: Not worked on in 7+ days
• 🟡 Warning: 3-7 days since last work
• 🟢 Healthy: Worked on in the last 1-2 days
• 🔵 Active: Currently being worked on

Filtering & Sorting

• Filter by All Projects, Client Work, or Personal
• Projects automatically sort by priority, type, and neglect level
• Stable sorting maintains predictable order

🛠️ Technology Stack

• Frontend: React 19 + TypeScript
• Styling: Tailwind CSS + shadcn/ui
• Build Tool: Vite
• Icons: Lucide React
• Storage: Browser localStorage
• State Management: React hooks

🎨 Design Philosophy

MultiVerse focuses on visual project awareness rather than complex task management:

• Immediate feedback over detailed planning
• Visual health indicators over numerical metrics
• One-click interactions over multi-step workflows
• Gentle guidance over rigid structure

Perfect for freelancers who need to see the big picture without getting lost in task minutiae.

📊 Project Structure

src/
├── components/           # Reusable UI components
│   ├── ui/              # shadcn/ui base components
│   ├── ProjectCard.tsx
│   ├── ProjectForm.tsx
│   ├── ThemeToggle.tsx
│   └── WorkLogDialog.tsx
├── hooks/               # Custom React hooks
│   └── use-theme.tsx    # Theme management
├── lib/                 # Utility libraries
│   └── utils.ts         # Component utilities
├── types.ts             # TypeScript definitions
├── App.tsx              # Main application
└── main.tsx            # Application entry point

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• shadcn/ui for the beautiful component system
• Lucide for the icon library
• Tailwind CSS for the styling framework

---

Built for freelancers who need simple, visual project awareness 🎯