Smart To DO App - Task Manager Vue.js - Typescript - Tailwind

Share:
Add to Collection

Created: Dec 31, 2024

Updated: Dec 31, 2024

ID: 474476

og体育首页ONE - Unlimited Downloads for $12.40/mo

Free access to 480k+ items | 35% off exclusive items Join to Get this Item with  35% OFF

About Smart ToDo application

This is a modern and practical tool to manage your tasks.

You can create task, manage, prioritize them and monitor their progress on your reporting dashboard moreover tracking tasks on calendar.It is full responsive and checked on desktop, tablet and smartphone. there is tagging system for having better categorized tasks. It's a good and easy to use template to customize and create your own project.

It implemented with Vue.js version 3, composition-api, Typescript and Tailwind as UI framework.

These are some key features:

  • Reporting Dashboard: in this part you can monitor your task with some charts and report such as: Overall Progress, Pending Tasks, Overdue Tasks, Total Tasks, Task Status Overview, Task Priority Distribution, Upcoming Deadlines, Tasks Over Time. I used Chart.js for this part and if you want you can develope your own custom report.
  • calendar:see tasks on calendar and see how many task in three mode monthlyT weakly and daily. I used Vue-cal and it's really easy to use and customize so you can change this component however you want.
  • Task Management:Create, edit, delete, and organize tasks effortlessly.
  • Filter and Sort:Filter tasks by status and priority, and sort them from low to high priority and vice versa.
  • View Card Modes:Switch between card view and table with pagination view for better task visualization.
  • Dark Mode Support:Fully functional dark mode for comfortable viewing in low-light conditions.
  • Responsive Design:Optimized for both desktop and mobile devices.

Also you can modify codes and components if you have a good understanding about Tech Stack:

  • Framework:Vue.js 3 (Composition API)
  • TypeScript:For type-safe development
  • UI Framework (Styling):Tailwind CSS
  • Chart Library:Chart.js
  • State Management:Pinia
  • Build Tool: Vite

Usage Guide

Add a New Task

  • Click the Add Task button (+) on Task list page.
  • Fill in form the task details (title, description, deadline, etc.)
  • Click Save to add the task to the list.

Filter Tasks

Use the filters at the top to narrow tasks by status or priority.

Sort Tasks

Click the Sort button to toggle between ascending and descending order.

Switch Views

Use the Switch View button to toggle between card and table layouts.

Edit or Delete a Task

Click the edit or delete icons in the bottom of task card on the table action part.

Folder Structure

The project follows a standard structure for a Vue.js application:

components/ sub folders:

1.Layout/ : components like Header, Footer.

2.Dashboard/ : Dashboard component such as charts and reports (Task Status Overview, Task Priority Distribution, Tasks Over Time, Upcoming Deadlines, Overall Progress, Pending Tasks, Overdue Tasks, Total Tasks)

3.Task/ : Reusable components like TaskCard, TaskFilters, TaskList, TaskTable.

4.UI/ : Reusable components like Button, Input, Modal.

store/ Pinia store for managing global state: appStore.ts for global data like open and close mobile menu - taskStore.ts and tagStore.ts

router/ you can define your route here

- /: Dashboard page

- /tasks: Task management page

- /calendar: Calendar view for tasks

pages/ define your pages component

Instructions

1. Installation

Follow these steps to set up the application:

  • Install Node.js (v16 or higher).
  • Extract the downloaded template package.
  • Navigate to the template folder and run:

npm install

  • To start the development server, run:

npm run dev

  • Open your browser and visit http://localhost:5173

2. Editing the Template

To edit the template:

  • Open the project folder in your favorite code editor (VS code).
  • Edit components in the src/components/ directory for customization.
  • To change global styles, update the files in src/styles/.
  • To modify routing, edit the files in src/router/.

3. Updating the Template

To update the template with new features:

  • Add new components to the src/components/ directory.
  • Define additional state or actions in src/store/taskStore.ts.
  • Test all changes locally using:

npm run dev

  • Build the updated version for production:

npm run build

Support

  • If you have any issues, feel free to contact.

0 Reviews for this product

0 Comments for this product

About Author

Achievements

General software requirements:

Code editing tool ZIP unarchiver