Smart To DO App - Task Manager Vue.js - Typescript - Tailwind
og体育首页ONE - Unlimited Downloads for $12.40/mo
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