An open API service indexing awesome lists of open source software.

https://github.com/rajatmitra97/advanced-task-manager

A Vue.js task manager app to organize tasks with ease. Features include adding/editing tasks, categories, due dates, priorities, filtering, sorting, searching, and a progress dashboard. Supports task export/import and local storage for persistence. Built with Bootstrap for a clean look.
https://github.com/rajatmitra97/advanced-task-manager

bootstrap html-css-javascript vuejs

Last synced: 2 months ago
JSON representation

A Vue.js task manager app to organize tasks with ease. Features include adding/editing tasks, categories, due dates, priorities, filtering, sorting, searching, and a progress dashboard. Supports task export/import and local storage for persistence. Built with Bootstrap for a clean look.

Awesome Lists containing this project

README

          

# Task Manager

This is a Vue.js-based task manager app built to help organize your tasks efficiently. It’s packed with features to make task management straightforward and flexible, with a clean, modern interface powered by Bootstrap.

## ![Task Manager Screenshot](images/screenshot.png)

## Features

- **Add and Manage Tasks**: Create tasks with titles, categories, due dates, and priority levels (low, medium, high).
- **Edit and Delete**: Update task details or remove tasks as needed.
- **Filter and Search**: View all, completed, or pending tasks, and search by title for quick access.
- **Sort Tasks**: Organize tasks by title, due date, or priority to stay on top of what matters.
- **Categories**: Group tasks into custom categories like "Work" or "Personal" and manage them easily.
- **Task Summary**: Get a quick overview with total, completed, and pending task counts, plus a progress bar.
- **Export/Import Tasks**: Save tasks to a JSON file or load them back to keep your data portable.
- **Local Storage**: Tasks persist across browser sessions, so you don’t lose your work.

## Getting Started

### Prerequisites

- Node.js and npm installed.
- Vue CLI for development (`npm install -g @vue/cli`).

### Setup

1. Clone the repo:

```bash
git clone
cd task-manager
```

2. Install dependencies:

```bash
npm install
```

3. Start the development server:

```bash
npm run serve
```

4. Open `http://localhost:8080` in your browser to see the app.

### Project Structure

- `public/index.html`: Entry point for the app.
- `src/main.js`: Initializes Vue and Bootstrap.
- `src/App.vue`: Core component managing state and layout.
- `src/components/`: Includes `AddTask`, `TaskFilter`, `TaskList`, `TaskSummary`, `CategoryManager`, and `Settings` for modular functionality.

## Why I Built This

I wanted to create a practical tool that demonstrates Vue.js capabilities while keeping user experience in mind. This project showcases component-based design, state management, and useful features like task persistence and file handling, making it a solid example of modern web development.

## Future Ideas

- Add reminders for due dates.
- Support for task notes or subtasks.
- Integrate a backend for cloud storage.

Feel free to explore the code, try out the app, or suggest improvements!