TaskApp — Frontend
A task manager for planning, prioritizing and tracking work: due dates with reminders, rich-text notes, images, vital tasks, dark mode and a mobile layout.
Live: https://prodessional-task-app-front.vercel.app — press Try the demo to get your own sample account, no sign-up needed.
Backend: Habibov97/Professional-TaskApp-Back · API docs
| Dashboard | My tasks (dark mode) |
|---|
| |
Features
- Tasks: create, edit, delete, priority and status, optional due date and image
- Rich-text descriptions: bold, italic, lists, headings, quotes and code blocks that keep their spacing
- Due dates: overdue / today / tomorrow badges and a notification bell for tasks that need attention
- Vital tasks: pin important tasks to their own list
- Filters and sorting: by status, priority and due date; sort by newest, due date or priority
- Search across titles and descriptions
- Dashboard: to-do list, completion rings per status, recently completed tasks
- Account: profile, password and profile photo
- Task categories: admins manage statuses and priorities; everyone else sees them read-only
- Demo accounts: one click creates a private account with sample data (deleted after 24 hours)
- Dark mode, responsive layout with a mobile drawer, loading and empty states
Tech stack
- Next.js 16 (App Router, Server Components, Server Actions,
proxy.ts)
- React 19, TypeScript
- Tailwind CSS 4, shadcn/ui on Radix primitives
- Tiptap editor, Zod validation, date-fns, Sonner toasts, next-themes
How it works
flowchart LR
Browser -- "pages, Server Actions" --> Next["Next.js (Vercel)"]
Next -- "REST + Bearer token" --> API["NestJS API (Render)"]
API --> DB[(PostgreSQL)]
API --> Storage[(Supabase Storage)]
Browser -- "task images" --> Storage
- The browser never talks to the API directly. Pages are Server Components and every change goes through a Server Action, which calls the API with the user's token.
- Auth: the access and refresh tokens live in
httpOnly cookies. src/proxy.ts refreshes an expired access token before the page renders, so sessions survive without client-side token handling.
- Data loading goes through cached helpers in
src/lib/api.ts, so a page and its layout share one request per resource.
- Descriptions are stored as HTML. The API sanitizes them on save and the frontend sanitizes them again before rendering.
- The free backend host sleeps when idle; the login page wakes it up in the background and explains the wait if it takes long.
Project structure
src/
app/ routes: (auth) login/register, dashboard/*, api/wake
actions/ Server Actions (auth, tasks, categories, account)
components/ UI; components/ui holds the shadcn primitives
lib/ API helpers, rich-text helpers, filters, config
constants/ status/priority colors, due-date rules
validations/ Zod schemas shared by forms and actions
proxy.ts token refresh for /dashboard routes
Running locally
Requires Node.js 20+ and pnpm, plus the backend running.
pnpm install
echo "API_URL=http://localhost:3001/api" > .env.local
pnpm dev
Open http://localhost:3000.
| Variable | Description |
|---|
API_URL | Backend base URL including /api. NEXT_PUBLIC_API_URL is accepted as a fallback. |
Other scripts: pnpm build, pnpm start, pnpm lint.
