A modern, fullstack task management application built with Vue.js (Nuxt 4) frontend and Java Spring Boot backend, featuring JWT authentication, PostgreSQL database, and a beautiful, responsive UI.

┌─────────────┐         ┌─────────────┐         ┌─────────────┐
│   Frontend  │ ──────> │   Backend   │ ──────> │  PostgreSQL │
│  (Nuxt 4)   │  REST   │ (Spring Boot)│  JPA   │  Database   │
└─────────────┘         └─────────────┘         └─────────────┘

1. Login Request: User submits credentials (admin/admin123) to /api/auth/login
2. Token Generation: Backend validates credentials and generates JWT token
3. Token Storage: Frontend stores token in cookies
4. Authenticated Requests: Frontend includes token in Authorization: Bearer <token> header
5. Token Validation: Backend validates token on each protected request

1. Create: POST /api/tasks with task data → Returns created task
2. Read: GET /api/tasks → Returns list of all tasks
3. Read One: GET /api/tasks/{id} → Returns specific task
4. Update: PUT /api/tasks/{id} with updated data → Returns updated task
5. Delete: DELETE /api/tasks/{id} → Deletes task

src/main/java/com/aidece/backendfullstacktest/
├── config/
│   └── SecurityConfig.java          # Spring Security configuration
├── controller/
│   ├── AuthController.java          # Authentication endpoints
│   └── TaskController.java          # Task CRUD endpoints
├── dto/
│   ├── LoginRequestDTO.java         # Login request DTO
│   ├── LoginResponseDTO.java        # Login response DTO
│   ├── TaskRequestDTO.java          # Task request DTO
│   └── TaskResponseDTO.java         # Task response DTO
├── exception/
│   └── GlobalExceptionHandler.java  # Global exception handling
├── model/entity/
│   └── Task.java                    # Task entity with JPA annotations
├── repository/
│   └── TaskRepository.java          # JPA repository interface
├── security/
│   └── JwtAuthenticationFilter.java  # JWT authentication filter
├── service/
│   ├── AuthService.java             # Authentication service
│   └── TaskService.java             # Task business logic
└── util/
    └── JwtUtil.java                 # JWT token utilities

Design Choices:

• Layered Architecture: Separation of concerns (Controller → Service → Repository)
• DTO Pattern: Separate request/response objects from entities
• JWT Filter: Stateless authentication using JWT tokens
• Global Exception Handler: Centralized error handling
• Validation: Bean validation on DTOs

app/
├── components/
│   ├── Header.vue                   # Global header component
│   ├── Footer.vue                   # Global footer component
│   └── ui/                          # Reusable UI components (shadcn-nuxt)
│       ├── alert/                   # Alert components
│       ├── badge/                   # Badge components
│       ├── button/                  # Button components
│       ├── card/                    # Card components
│       ├── input/                   # Input components
│       ├── select/                   # Select components
│       └── table/                   # Table components
├── composables/
│   └── useAuth.ts                   # Authentication composable
├── layouts/
│   └── default.vue                  # Default layout with header/footer
├── lib/
│   └── utils.ts                     # Utility functions
├── middleware/
│   └── auth.ts                      # Route protection middleware
├── pages/
│   ├── index.vue                    # Homepage with features
│   ├── login.vue                    # Login page
│   └── tasks/
│       ├── index.vue                # Task list page (card/table views)
│       ├── new.vue                   # Create task page
│       └── [id].vue                 # Edit task page
├── services/
│   └── api.ts                       # API service module
└── app.vue                          # Root component

Design Choices:

• Component-Based Architecture: Reusable Header and Footer components
• Layout System: Default layout for consistent page structure
• UI Component Library: shadcn-nuxt for modern, accessible components
• Composables: Reusable authentication logic
• Middleware: Route protection before navigation
• Service Layer: Centralized API calls with proper error handling
• File-based Routing: Nuxt automatic routing
• TypeScript: Type safety throughout
• Responsive Design: Mobile-first approach with Tailwind CSS

• Java 21 or higher
• Maven 3.6+
• Node.js 18+ and npm
• PostgreSQL 12+
• Git

Note: Make sure both backend and frontend servers are running simultaneously for the application to work properly.

1. Install PostgreSQL (if not already installed)

2. Create Database:

   CREATE DATABASE taskmanagement;

3. The application will automatically create tables using JPA ddl-auto=update

   Alternatively, you can run the provided schema:

   psql -U postgres -d taskmanagement -f backendfullstacktest/src/main/resources/schema.sql

1. Navigate to backend directory:

   cd backendfullstacktest

2. Configure database (if needed): Edit src/main/resources/application.properties:

   spring.datasource.url=jdbc:postgresql://localhost:5432/taskmanagement
   spring.datasource.username=your_username
   spring.datasource.password=your_password

3. Build and run:

   ./mvnw spring-boot:run

   Or on Windows:

   mvnw.cmd spring-boot:run

4. Backend will be available at: http://localhost:8081

1. Navigate to frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Configure API URL (if backend is on different port): Create .env file:

   API_BASE_URL=http://localhost:8081

4. Run development server:

   npm run dev

5. Frontend will be available at: http://localhost:3000

Terminal 1 - Backend:

cd backendfullstacktest
./mvnw spring-boot:run

Terminal 2 - Frontend:

cd frontend
npm install
npm run dev

Then visit http://localhost:3000 in your browser.

• Username: admin
• Password: admin123

• POST /api/auth/login - Login and get JWT token

• GET /api/tasks - Get all tasks
• GET /api/tasks/{id} - Get task by ID
• POST /api/tasks - Create new task
• PUT /api/tasks/{id} - Update task
• DELETE /api/tasks/{id} - Delete task

For authenticated requests, include:

Authorization: Bearer <your_jwt_token>

• Modern, Clean Interface: Gradient backgrounds, smooth transitions, and hover effects
• Responsive Design: Fully responsive across all device sizes
• Dark Mode Ready: Built with CSS variables for easy theme switching
• Accessible Components: WCAG-compliant UI components
• Loading States: Visual feedback for async operations
• Empty States: Helpful messages when no data is available

• Homepage: Feature showcase with hero section and call-to-action
• Login Page: Clean authentication form with demo credentials
• Tasks List:
  • Card view with hover effects
  • Table view with pagination
  • Search and filter functionality
  • Sort by date, title, or status
• Create/Edit Task: Intuitive forms with validation feedback

• Header: Sticky navigation with logo and auth-aware menu
• Footer: Multi-column footer with links and information
• Task Cards: Interactive cards with status badges and actions
• Forms: Validated forms with error messages and loading states

• id (Long): Auto-generated primary key
• title (String, Required): Task title
• description (String, Optional): Task description
• status (Enum, Required): Task status
  • TODO - To Do
  • IN_PROGRESS - In Progress
  • DONE - Done
• createdAt (LocalDateTime): Auto-generated creation timestamp
• updatedAt (LocalDateTime): Auto-updated modification timestamp

• Bean Validation (@NotBlank, @NotNull) on DTOs
• Custom error messages returned in structured format
• Global exception handler catches validation errors

• Required field validation on forms
• Real-time error display for user feedback
• Form submission prevention when validation fails

You can test the API using curl or Postman:

Login:

curl -X POST http://localhost:8081/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"username":"admin","password":"admin123"}'

Get Tasks (with token):

curl -X GET http://localhost:8081/api/tasks \
  -H "Authorization: Bearer <your_token>"

• Java 21
• Spring Boot 3.5.7
• Spring Security - Authentication & Authorization
• Spring Data JPA - Database access
• PostgreSQL - Database
• JJWT 0.12.3 - JWT token handling
• Bean Validation - Input validation

• Vue.js 3.5.24 - Progressive JavaScript framework
• Nuxt 4.2.1 - Vue.js meta-framework
• TypeScript - Type safety
• Composition API - Modern Vue patterns
• Tailwind CSS - Utility-first CSS framework
• shadcn-nuxt - High-quality UI component library
• Reka UI - Headless UI primitives
• VueUse - Collection of Vue composition utilities

# Database
DB_USERNAME=postgres
DB_PASSWORD=postgres

# JWT
JWT_SECRET=mySecretKeyForJWTTokenGenerationThatShouldBeAtLeast256BitsLong
JWT_EXPIRATION=86400000

API_BASE_URL=http://localhost:8081

1. Database Connection Error:

   • Verify PostgreSQL is running
   • Check database credentials in application.properties
   • Ensure database taskmanagement exists

2. Port Already in Use:

   • Change server.port in application.properties

3. JWT Token Invalid:

   • Check JWT secret matches between token generation and validation
   • Verify token hasn't expired

1. API Connection Error:

   • Verify backend is running on port 8081
   • Check CORS configuration
   • Verify API_BASE_URL in .env or nuxt.config.ts

2. Authentication Issues:

   • Clear cookies and login again
   • Check token expiration

3. Layout Not Showing:

   • Ensure app.vue includes <NuxtLayout> wrapper
   • Check that pages have layout: 'default' in definePageMeta

4. TypeScript Errors:

   • Run npm install to ensure all dependencies are installed
   • Verify TypeScript is in devDependencies

• ✅ JWT Authentication - Secure token-based authentication
• ✅ Task CRUD Operations - Create, read, update, and delete tasks
• ✅ Task Status Management - Track tasks with TODO, IN_PROGRESS, DONE statuses
• ✅ Search & Filter - Find tasks quickly with search and status filters
• ✅ Multiple Views - Switch between card and table views
• ✅ Sorting - Sort tasks by date, title, or status
• ✅ Responsive Design - Works seamlessly on desktop, tablet, and mobile
• ✅ Modern UI - Beautiful, clean interface with smooth animations
• ✅ Real-time Validation - Form validation with helpful error messages
• ✅ Loading States - Visual feedback for all async operations

• Spring Boot Documentation
• Nuxt Documentation
• JWT.io - JWT token decoder
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Re-usable components built with Radix UI and Tailwind CSS

1. Start PostgreSQL (if not running as a service)
2. Start Backend: Navigate to backendfullstacktest/ and run ./mvnw spring-boot:run
3. Start Frontend: Navigate to frontend/ and run npm run dev
4. Access Application: Open http://localhost:3000 in your browser
5. Login: Use credentials admin / admin123

The application features:

• Modern homepage with feature showcase
• Clean login interface
• Intuitive task management interface
• Card and table view options
• Search and filter capabilities
• Responsive design for all devices

Senior Fullstack Engineer

This project is for educational/demonstration purposes.