TaskmasterPro is a visually stunning web application that transforms scattered tasks into an organized, interactive, and voice-enabled productivity hub.
- 🎯 About
- ✨ Features
- 🛠️ Tech Stack
- 📋 Prerequisites
- ⚙️ Installation
- 🔐 Environment Variables
- 🚀 Usage
- 📁 Project Structure
- 🤝 Contributing
- 📄 License
Are you tired of juggling scattered notes, forgotten deadlines, and an overwhelming mental to-do list? Traditional task managers often feel clunky or uninspiring, leading to a lack of engagement and ultimately, missed productivity opportunities. The constant struggle to keep track of commitments can be a significant drain on focus and efficiency, leaving you feeling disorganized and behind.
TaskmasterPro tackles these challenges head-on by providing an intuitive and engaging platform for organizing your productivity. It offers a visually stunning Nuebrutal UI 🎨, making task management an enjoyable experience. With innovative features like voice-to-text input 🎤 for rapid task creation and weekly progress charts 📊 to visualize your achievements, TaskmasterPro ensures your tasks are not just managed, but mastered. It's designed to bring clarity and control back to your daily workflow.
- ⚙️ Comprehensive Task Management — Add, complete, delete, and prioritize tasks with a streamlined interface.
- 🎤 Voice-to-Text Input — Rapidly create tasks using natural language voice commands, enhancing efficiency.
- 📊 Weekly Progress Tracking — Visualize your productivity with interactive pie and bar charts powered by Recharts.
- 🎨 Nuebrutal UI Design — Experience a distinctive, modern, and visually striking user interface built with Tailwind CSS.
- 🚀 Fluid Animations — Enjoy a smooth and engaging user experience with subtle, performance-optimized animations from Framer Motion.
- 🏷️ Task Categorization & Filtering — Organize your tasks effectively by assigning categories and filtering them for focused work.
🎨 Frontend
| Technology | Purpose |
|---|---|
| React | UI library for building interactive user interfaces |
| TypeScript | Statically typed superset of JavaScript for enhanced code quality |
| Tailwind CSS | Utility-first CSS framework for rapid, custom UI development |
| Vite | Next-generation frontend tooling for fast development |
| Zustand | Lightweight, fast, and scalable state management solution |
| Recharts | Composable charting library for displaying weekly progress |
| Radix UI | Unstyled, accessible UI components for building design systems |
| date-fns | Modern JavaScript utility library for date parsing and formatting |
| framer-motion | Production-ready motion library for fluid animations |
| react-speech-recognition | React hook for voice-to-text capabilities |
⚠️ Make sure you have all of these installed before starting.
- Node.js 18+ — Download · Check:
node --version - npm — Comes with Node.js · Check:
npm --version - git — Download · Check:
git --version
git clone https://github.com/het2576/TaskmasterPro.git
cd TaskmasterPronpm installcp .env.example .env.local💡 Open
.env.localand fill in your values. See Environment Variables below.
Create a .env.local file in the project root:
# No environment variables required🔒 Never commit your
.env.localfile. It's already in.gitignore.
To start the development server:
npm run devOpen http://localhost:3000 in your browser.
Once the TaskmasterPro application is running in your browser, you can immediately start managing tasks. A key feature is the voice-to-text input for rapid task creation:
- Activate Voice Input: Look for the 🎙️ microphone icon (typically near the task input field) and click it to enable listening.
- Speak Your Task: Clearly state your task. For example, you might say: "Add task: Call client about project status by tomorrow."
- Observe: TaskmasterPro will transcribe your speech and automatically create a new task with the specified details.
- Prioritize: You can also use voice commands to manage existing tasks, such as: "Prioritize: Finish documentation" to quickly mark a task as high priority.
This allows for incredibly fast and hands-free task entry, keeping your workflow fluid.
TaskmasterPro/
├── public/ # Static assets (e.g., index.html, favicon)
├── src/ # Main application source code
│ ├── assets/ # Images, icons, and other static media
│ ├── components/ # Reusable UI components (e.g., buttons, cards, dialogs)
│ ├── hooks/ # Custom React hooks for shared logic
│ ├── lib/ # Utility functions, helpers, and configuration
│ ├── store/ # Zustand state management definitions
│ ├── views/ # Main application pages/screens
│ ├── App.tsx # Root component of the application
│ ├── main.tsx # Entry point for React rendering
│ └── index.css # Global styles and Tailwind CSS imports
├── .env.example # Environment variables template
├── package.json # Dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite build tool configuration
└── README.md # This file
The project follows a component-based architecture within the src/ directory, organizing code into logical domains like components/, hooks/, and store/. This structure promotes modularity, reusability, and maintainability, making it easy to locate and manage different parts of the application.
Contributions make this project better. Here's how to get involved:
Before creating a bug report:
- ✅ Check the existing issues
- ✅ Collect your environment details (OS, Node version, browser)
- ✅ Reproduce the bug consistently
Feature suggestions are tracked as GitHub issues.
- 🍴 Fork the repository
- 🌿 Create a feature branch:
git checkout -b feat/amazing-feature - 💾 Commit your changes:
git commit -m 'feat: add amazing feature' - 📤 Push to the branch:
git push origin feat/amazing-feature - 🔁 Open a Pull Request
Commit convention: We use Conventional Commits
feat:— new featurefix:— bug fixdocs:— documentation onlyrefactor:— code change, no feature or fixtest:— add or update tests
This project is licensed under the MIT License.
You're free to use, modify, and distribute this project for any purpose. See the LICENSE file for full details.
Built with ❤️ by het2576
If this project helped you, consider giving it a ⭐