Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hari7261/tasktool-reactjs
https://github.com/hari7261/tasktool-reactjs
css github project react reactjs task-manager task-scheduler tasks
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/hari7261/tasktool-reactjs
- Owner: hari7261
- Created: 2024-10-16T17:06:11.000Z (28 days ago)
- Default Branch: main
- Last Pushed: 2024-10-16T19:44:08.000Z (28 days ago)
- Last Synced: 2024-10-18T16:56:08.468Z (26 days ago)
- Topics: css, github, project, react, reactjs, task-manager, task-scheduler, tasks
- Language: JavaScript
- Homepage: https://tasktool-react.vercel.app/
- Size: 238 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Task Tool React
Welcome to **Task Tool React**! 🎉 This is a powerful and intuitive task management application built with React.js. Whether you're a student, a professional, or just someone who likes to stay organized, this app is designed to help you manage your tasks effectively and efficiently.
## 🌟 Features
- **Add Tasks**: Quickly add new tasks with descriptions, priorities, and deadlines.
- **Edit Tasks**: Modify existing tasks with ease.
- **Delete Tasks**: Remove tasks that are no longer relevant.
- **Mark Tasks as Done**: Keep track of completed tasks.
- **Filter by Priority**: Sort tasks by priority levels (Top, Middle, Low).
- **Responsive Design**: Works seamlessly on desktops and mobile devices.
## 🎨 Technologies Used
| Technology | Description |
|------------|-------------|
|  **React** | A JavaScript library for building user interfaces. |
|  **Material-UI** | A popular React UI framework that provides pre-designed components. |
|  **JavaScript** | The programming language used to build the application. |
|  **HTML5** | The markup language for creating web pages. |
|  **CSS3** | The style sheet language used for styling the web pages. |
|  **Vercel** | The platform used for deployment. |
## 🛠 Installation
### Prerequisites
Before you begin, ensure you have met the following requirements:
- **Node.js**: You need to have Node.js installed on your machine. [Download it here](https://nodejs.org/).
### Steps to Run the Application Locally
1. **Clone the Repository**:
```bash
git clone https://github.com/hari7261/TaskTool-Reactjs.git
cd task-tool-react
```
2. **Install Dependencies**:
```bash
npm install
```
3. **Run the Application**:
```bash
npm start
```
4. **Open Your Browser**:
Navigate to `http://localhost:3000` to see the app in action! 🎈
## 🎥 Demo
Check out the live demo of Task Tool React [here](https://tasktool-react-ghijbq78b-hari7261s-projects.vercel.app).
## 📖 Usage
Once the application is running, you can use the following features:
1. **Adding a Task**:
- Fill out the task name, description, select a priority, and set a deadline.
- Click **Add Task** to save.
2. **Editing a Task**:
- Click the **Edit** icon next to the task you want to modify.
- Update the details and click **Update Task**.
3. **Deleting a Task**:
- Click the **Delete** icon next to the task you want to remove.
- Confirm the deletion if prompted.
4. **Marking a Task as Done**:
- Click the **Done** icon next to the task to mark it as completed.
## 📊 Upcoming Tasks and Completed Tasks
The application organizes tasks into two sections for easy management:
| **Upcoming Tasks** | **Completed Tasks** |
|---------------------|---------------------|
| View tasks that are yet to be completed. | View tasks that have been marked as done. |
## 📦 Future Enhancements
Here are some features that may be implemented in future updates:
- **User Authentication**: Allow users to create accounts and save their tasks.
- **Dark Mode**: Add a toggle for a dark theme.
- **Task Categories**: Introduce categorization for better organization.
- **Task Notifications**: Remind users of approaching deadlines.
## ⚙️ Contributing
Contributions are welcome! If you'd like to contribute, please follow these steps:
1. **Fork the Repository**.
2. **Create a Feature Branch**:
```bash
git checkout -b feature/YourFeatureName
```
3. **Make Your Changes**.
4. **Commit Your Changes**:
```bash
git commit -m "Add your message here"
```
5. **Push to the Branch**:
```bash
git push origin feature/YourFeatureName
```
6. **Open a Pull Request**.
## 📜 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## 🎉 Acknowledgments
- Thanks to [Material-UI](https://mui.com/) for providing great UI components.
- Thanks to [React](https://reactjs.org/) for making front-end development easier.
---