Vue.js + Laravel Fullstack Live Coding Tasks

These are very similar to real interview assignments for junior/middle/senior fullstack developers.

Task 1 — Todo CRUD App

Requirements

Build:

• Vue frontend
• Laravel API backend

Features:

• Create task
• List tasks
• Edit task
• Delete task
• Mark completed

Backend Requirements

Create API routes:

GET    /api/tasks
POST   /api/tasks
PUT    /api/tasks/{id}
DELETE /api/tasks/{id}

Use:

• Laravel validation
• Eloquent
• API Resources

Frontend Requirements

Vue page with:

• Input field
• Task list
• Checkbox
• Delete button

Expected skills:

• Axios/fetch
• Reactive state
• CRUD operations
• Component structure

Task 2 — Authentication System

Requirements

Create login/register system using:

• Laravel Sanctum
• Vue frontend

Features:

• Register
• Login
• Logout
• Protected dashboard

Interviewer checks:

• Password hashing
• Token/session handling
• Route protection
• Auth middleware
• Secure API requests

Task 3 — Product Search with Debounce

Requirements

Create:

• Search input
• API endpoint
• Debounced requests

Backend

Laravel endpoint:

GET /api/products?search=iphone

Frontend

Vue:

watch(search, debounce(fetchProducts, 500))

Interviewer checks:

• Performance
• Debounce usage
• Query optimization
• Clean architecture

Task 4 — Pagination

Backend

Laravel:

Product::paginate(10);

Frontend

Build:

• Next/Prev buttons
• Loading state

Interviewer checks:

• API understanding
• State handling
• UX quality

Task 5 — File Upload

Requirements

Upload image:

• Vue frontend
• Laravel backend

Backend

$request->file('image')->store('uploads');

Frontend

Use:

<input type="file" />

Interviewer checks:

• FormData
• Validation
• File storage
• Security

Task 6 — Realtime Chat (Advanced)

Using:

• Laravel WebSockets
• Pusher/socket
• Vue frontend

Features:

• Send message
• Receive instantly
• Online users

Interviewer checks:

• Broadcasting
• Events
• Realtime thinking

Task 7 — Role-Based Access System

Roles:

• Admin
• User

Requirements:

• Admin can delete users
• User cannot

Interviewer checks:

• Authorization
• Policies/Gates
• Middleware

Task 8 — Dashboard Statistics

Create dashboard:

• Total users
• Total sales
• Orders today

Backend

Optimized queries.

Frontend

Charts using:

• Chart.js
• ApexCharts

Task 9 — Build Mini E-Commerce API

Features

• Products
• Categories
• Cart
• Orders

Interviewer checks:

• Database design
• API structure
• Relationships
• Clean code

Task 10 — Infinite Scroll

Frontend:

• Auto-load more data while scrolling

Backend:

Product::cursorPaginate(20);

Task 11 — Fix Bugs Task

Interviewer gives broken code.

Example:

watch(user, () => {
  fetchData()
})

Problem: Infinite API calls.

Expected: Debug and optimize.

Task 12 — Refactor Bad Code

Given:

• Large messy component

Need:

• Split into composables/components/services

Task 13 — API Caching

Optimize slow endpoint.

Laravel:

Cache::remember('products', 60, fn() => Product::all());

Task 14 — Build Notification System

Requirements:

• Toast notifications
• Success/error handling
• Global notification store

Libraries:

• Vue Toastification
• Notyf

Task 15 — Multi-Step Form

Features:

• Validation
• Step navigation
• Final submission

Senior-Level Live Coding Tasks

16. Build reusable data table

Features:

• Sorting
• Pagination
• Search
• Reusable columns

17. Design scalable folder structure

Explain:

• Stores
• Services
• Composables
• Modules

18. Optimize slow Vue page

Fix:

• Unnecessary renders
• Large bundle
• API waterfall

19. Design API architecture

Explain:

• Controllers
• Services
• Repositories
• DTOs

20. Build offline-first functionality

Features:

• Cache API responses
• Retry requests
• Local persistence

Common Interviewer Follow-Up Questions

After coding, they often ask:

Why did you choose this structure?

Need:

• Scalability
• Maintainability
• Reusability

How would this scale to 100k users?

Talk about:

• Redis
• Queue
• CDN
• Pagination
• Caching
• DB indexing

How would you improve performance?

Frontend:

• Lazy loading
• Virtual lists
• Memoization

Backend:

• Eager loading
• Caching
• Query optimization

Common Mistakes During Live Coding

Frontend

• No loading state
• No error handling
• Massive component files
• Direct API calls everywhere

Backend

• Validation missing
• N+1 queries
• Business logic inside controller
• No authorization

What Interviewers Actually Evaluate

Not only code.

They check:

• Communication
• Problem-solving
• Architecture thinking
• Debugging
• Naming
• Cleanliness
• Edge cases

Extremely Common Fullstack Interview Task

This appears VERY often:

"Build small CRUD with authentication"

Usually includes:

• Laravel API
• Vue frontend
• Login
• CRUD
• Validation
• Pagination
• Search
• Deploy locally