Task Manager - Frontend

Modern dark-themed task management UI built with Nuxt 3 and Vue.js.

Features

📝 Create, view, and delete tasks
🏷️ Change task status (To Do → In Progress → Done)
📅 Optional due date with native datetime picker
📄 Paginated task list responsive grid
🌙 Modern dark theme (Slate color palette)
🔔 Toast notifications for user feedback
✅ Form validation
📱 Responsive design (mobile, tablet, desktop)

Tech Stack

Framework: Nuxt 3 (Vue.js 3)
UI Library: Nuxt UI (based on Headless UI)
Styling: Tailwind CSS
HTTP Client: Nuxt $fetch
State Management: Vue Composition API + Refs
TypeScript: Full type safety
Linting: ESLint + TypeScript

Quick Start

Prerequisites

Node.js 18+
npm or yarn

1. Install Dependencies

npm install

2. Configure API URL (Optional)

By default, the frontend connects to http://localhost:8080/api/v1.

To change this, set an environment variable:

# .env file or export in shell
NUXT_PUBLIC_API_BASE=http://localhost:8080/api/v1

Or edit nuxt.config.ts directly.

3. Run Development Server

# Development with hot reload
npm run dev

# Build and preview production
npm run build
npm run preview

The app will be available at http://localhost:3000 (or another port if 3000 is taken).

Project Structure

├── components/
│   ├── TaskCard.vue          # Single task display card
│   ├── TaskForm.vue          # Create/edit task form
│   └── TaskList.vue          # Task grid with pagination
├── composables/
│   └── useTaskApi.ts         # API function layer
├── layouts/
│   └── default.vue           # Default page layout
├── pages/
│   └── index.vue             # Main page (home)
├── types/
│   └── task.ts               # TypeScript interfaces
├── assets/
│   └── css/
│       └── main.css          # Global styles + dark theme
├── nuxt.config.ts            # Nuxt configuration
├── package.json
└── tsconfig.json

Configuration

Runtime Config

nuxt.config.ts exposes useRuntimeConfig().public.apiBase which can be set via:

Environment variable: NUXT_PUBLIC_API_BASE
Default in config: http://localhost:8080/api/v1

Theme

The app uses Nuxt UI's dark theme. To change colors, edit nuxt.config.ts:

ui: {
  colors: {
    primary: 'blue',   // Options: 'blue', 'green', 'purple', etc.
    gray: 'slate'      // Grayscale palette
  },
  dark: true
}

Component Overview

TaskCard.vue

Displays individual task with:

Title and description
Status badge with color coding
Due date and creation date
Action buttons: Change status (if not current), Delete

Props:

task: Task - Task object
deleting?: boolean - Show loading on delete button

Events:

delete(id: number)
updateStatus(id: number, status: TaskStatus)

TaskForm.vue

Form for creating/editing tasks with validation.

Props:

task?: Task - If provided, form enters edit mode

Events:

submit(data: CreateTaskRequest)
cancel

Fields:

Title (required)
Description (optional)
Status (required)
Due Date (optional, native datetime picker)

TaskList.vue

Displays paginated grid of task cards.

Features:

Auto-loads tasks on mount
Pagination controls with page numbers
Shows total count and current page
Handles loading and error states

Exposed:

refresh() - Reload tasks
totalElements - Total task count

API Integration

All API calls are in composables/useTaskApi.ts:

const { 
  fetchPaginatedTasks,  // (page: 0, size: 20) => PaginatedResponse<Task>
  fetchTask,           // (id: number) => Task
  createTask,          // (request: CreateTaskRequest) => Task
  updateTaskStatus,    // (id, status) => Task
  deleteTask           // (id: number) => void
} = useTaskApi()

All functions throw errors on failure - catch and display with $toast.

TypeScript Types

Defined in types/task.ts:

Task - Full task object
CreateTaskRequest - Create payload
UpdateTaskStatusRequest - Status update payload
TaskStatus - Enum: TO_DO, IN_PROGRESS, DONE
PaginatedResponse<T> - Generic paginated response

Styling

Dark Theme Colors

Primary grayscale (Slate):

Background: #0f172a (Slate 900)
Card: #1e293b (Slate 800)
Text: #f1f5f9 (Slate 100)
Muted: #94a3b8 (Slate 400)

Accent colors:

Primary/Blue: #3b82f6
Success/Green: Various greens
Danger/Red: #dc2626

Custom CSS

Global styles in assets/css/main.css. Tailwind classes used throughout components.

Building for Production

# Build
npm run build

# Output in .output/ directory
# - .output/public/ (static assets)
# - .output/server/ (server bundle)

Deploy the .output/public folder to any static hosting (Vercel, Netlify, etc.). The app is fully server-side rendered (SSR) by default.

Environment Variables

Variable	Description	Default
`NUXT_PUBLIC_API_BASE`	Backend API URL	`http://localhost:8080/api/v1`

Create a .env file in the frontend directory:

NUXT_PUBLIC_API_BASE=https://api.yourdomain.com/api/v1

Development Tips

Hot Reload

Changes to .vue files automatically hot reload
Nuxt DevTools available via Shift + Option + D (Mac) or Shift + Alt + D (Windows/Linux)

Debugging

Check browser DevTools Console for errors
Network tab to inspect API calls
Vue DevTools for component state
Nuxt DevTools for module/project info

Common Issues

"Failed to load tasks" error:

Ensure backend is running on localhost:8080
Check CORS configuration in backend
Verify NUXT_PUBLIC_API_BASE is correct

Date picker not closing:

Native picker closes on outside click
"Set" button can be used to explicitly close (if enabled)

Deploying

Vercel / Netlify

Simply connect your repository and deploy. The build command is npm run build.

Make sure to set NUXT_PUBLIC_API_BASE to your production backend URL in the hosting platform's environment variables.

Docker (optional)

Create a Dockerfile:

FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine
WORKDIR /app
COPY --from=build /app/.output ./.output
COPY package.json .
EXPOSE 3000
CMD ["node", ".output/server/index.mjs"]

Scripts

Script	Description
`npm run dev`	Start development server with hot reload
`npm run build`	Build for production
`npm run preview`	Preview production build locally
`npm run lint`	Run ESLint
`npm run lint:fix`	Fix linting errors

Contributing

Follow Vue.js and Nuxt 3 best practices
Use Composition API with <script setup>
Keep components small and focused
Add TypeScript types for all props/data
Test on both light and dark themes if adding new colors
Ensure API calls go through useTaskApi.ts (single source of truth)

License

Educational/Demonstration project.

Links

Backend Repository: ../backend (if monorepo) or separate backend repo
API Documentation: See backend/API.md
Nuxt UI Docs: https://ui.nuxt.com
Tailwind CSS: https://tailwindcss.com

Happy Building! 🚀

Name		Name	Last commit message	Last commit date
assets/css		assets/css
components		components
composables		composables
layouts		layouts
pages		pages
types		types
.gitignore		.gitignore
README.md		README.md
app.vue		app.vue
nuxt.config.ts		nuxt.config.ts
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation