guest@gubanov:~$ cat ./projects/taskmanager/README.md

Task Manager

Task manager on Nuxt 4 — dashboard, smart list and a drag-and-drop Kanban board.

A solo project: design, frontend and REST API in one Nuxt codebase. Light and dark themes, a layout that works from desktop to phones, optimistic updates and toasts.

role01
Design, frontend, API
year02
2026
team03
Solo
type04
Web app
localhost:3000/
Dashboard — progress ring, status counters, quick add, deadlines
fig.00Dashboard — progress ring, status counters, quick add, deadlines
[01]guest@gubanov:~$ cat overview.md01 / 05

Overview

// context

A compact task manager that shows how I put a Vue app together end to end: Nuxt 4 with file-based routing and SSR, a typed REST API on Nitro, a Pinia store and a design system written from scratch.

Three screens cover the whole flow: the dashboard answers “what needs attention today”, the list helps to find and sort, and the Kanban board moves work between statuses — drag & drop on desktop, swipes on phones.

The API keeps data in memory: the project is about the interface and the client–server flow, so after a restart the demo tasks come back.

[02]guest@gubanov:~$ cat ./work.log02 / 05

Features

Solo project: design, frontend and API.

  1. 01

    Dashboard: greeting with a progress ring, status counters, quick add, upcoming deadlines with overdue highlighting, priority split, recent activity and a tag cloud.

  2. 02

    Task list: search by title, description and tags, filters by status and priority, sorting and a status switch right on the card.

  3. 03

    Kanban: three columns with drag & drop. On touch screens the columns swipe and tasks move with arrow buttons.

  4. 04

    Create and edit in a modal: status, priority, due date, tags. A new task's draft autosaves to localStorage; on phones the modal opens as a bottom sheet.

  5. 05

    Toasts for every operation and optimistic updates: a status change applies instantly and rolls back if the request fails.

  6. 06

    Light and dark themes follow the system; animations respect prefers-reduced-motion.

[03]guest@gubanov:~$ open ./screens03 / 05

Screens

Click a screenshot to open it full screen; arrow keys switch between them.

fig.01The same dashboard in the dark theme
fig.02Task list — search, filters by status and priority, sorting
fig.03Kanban — drag & drop between columns
fig.04Edit modal — status, priority, due date, tags
fig.05Dashboard with a bottom tab bar
fig.06Task list
fig.07Kanban: columns swipe, tasks move with arrows
fig.08New task as a bottom sheet
[04]guest@gubanov:~$ cat ./notes/architecture.md04 / 05

Under the hood

▸ note01

One codebase

Nuxt 4 pages with file-based routing and SSR plus REST routes /api/tasks (GET, POST, PUT, DELETE) on Nitro — no separate backend to deploy.

▸ note02

Shared types

types/task.ts is imported by both the client and the server, so the API contract is checked by TypeScript in strict mode.

▸ note03

Optimistic store

Pinia keeps counters and completion in getters. Updates apply instantly and roll back from a snapshot if the request fails; after the first load pages refresh silently.

▸ note04

No UI kit

Design tokens on CSS variables, a dark theme via prefers-color-scheme, color-mix() for tints, scoped styles and inline Lucide-style SVG icons — the interface is hand-made.

[05]guest@gubanov:~$ cat package.json05 / 05

Stack