Final Projects and Real-World Applications

Stack: Vue 3 + Pinia + Vue Router + Axios + TailwindCSS

Pages/Routes:
├── / → HomeView (Hero, featured products, categories)
├── /products → ProductListView (grid, filter, sort, search)
├── /products/:id → ProductDetailView (images, reviews, add to cart)
├── /cart → CartView (items, quantities, coupon, totals)
├── /checkout → CheckoutView (address, payment form)
├── /orders → OrderHistoryView (list of past orders)
└── /account → AccountView (profile, addresses)

Stores (Pinia):
├── useCartStore (items, total, count, add, remove, clear)
├── useProductStore (products, filters, pagination, search)
├── useAuthStore (user, token, login, logout)
└── useWishlistStore (saved items)

Key Features:
✅ Filter by category, price range, rating
✅ Sort by price, name, popularity
✅ Cart with quantity management
✅ Optimistic add-to-cart animation
✅ Persistent cart (localStorage)
✅ Product image gallery with zoom
✅ Review ratings display
✅ Responsive (mobile-first)

<!-- Core: ProductCard.vue -->
<script setup>
import { useCartStore } from &#039;@/stores/cart'
import { useWishlistStore } from &#039;@/stores/wishlist'

const cart = useCartStore()
const wishlist = useWishlistStore()
const props = defineProps({ product: Object })

const added = ref(false)
function addToCart() {
  cart.addItem(props.product)
  added.value = true
  setTimeout(() => added.value = false, 1500)
}
</script>

<template>
  <div class="product-card group">
    <div class="relative overflow-hidden rounded-xl">
      <img :src="product.image" :alt="product.name" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300" />
      <button @click="wishlist.toggle(product.id)" class="absolute top-3 right-3 p-2 bg-white rounded-full shadow">
        {{ wishlist.has(product.id) ? &#039;❤️' : '🤍' }}
      </button>
      <div v-if="product.discount" class="absolute top-3 left-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
        -{{ product.discount }}%
      </div>
    </div>
    <div class="p-4">
      <p class="text-xs text-indigo-600 font-semibold">{{ product.category }}</p>
      <h3 class="font-bold text-gray-900 mt-1 line-clamp-2">{{ product.name }}</h3>
      <div class="flex items-center gap-1 mt-1">
        <span class="text-yellow-400 text-sm">★</span>
        <span class="text-sm text-gray-600">{{ product.rating }} ({{ product.reviews }})</span>
      </div>
      <div class="flex items-center justify-between mt-3">
        <div>
          <span class="text-xl font-black text-gray-900">${{ product.price }}</span>
          <span v-if="product.originalPrice" class="text-sm text-gray-400 line-through ml-2">${{ product.originalPrice }}</span>
        </div>
        <button
          @click="addToCart"
          :class="[&#039;px-4 py-2 rounded-lg text-sm font-semibold transition-all', added ? 'bg-green-500 text-white' : 'bg-indigo-600 text-white hover:bg-indigo-700']"
        >
          {{ added ? &#039;✓ Added!' : '+ Cart' }}
        </button>
      </div>
    </div>
  </div>
</template>

Stack: Vue 3 + Pinia + Firebase Firestore + TailwindCSS

Features:
✅ User authentication (Google/Email)
✅ Multiple chat rooms
✅ Real-time message delivery
✅ Online user presence
✅ Message read receipts
✅ Emoji reactions
✅ File/image sharing
✅ Typing indicators
✅ Message search
✅ Mobile-responsive

<!-- ChatRoom.vue core -->
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from &#039;vue'
import { collection, query, orderBy, onSnapshot, addDoc, serverTimestamp } from &#039;firebase/firestore'
import { db, auth } from &#039;@/firebase/config'

const props = defineProps({ roomId: String })
const messages = ref([])
const newMessage = ref(&#039;')
const messagesEnd = ref(null)

let unsubscribe = null

onMounted(() => {
  const q = query(
    collection(db, `rooms/${props.roomId}/messages`),
    orderBy(&#039;createdAt', 'asc')
  )
  unsubscribe = onSnapshot(q, async (snap) => {
    messages.value = snap.docs.map(d => ({ id: d.id, ...d.data() }))
    await nextTick()
    messagesEnd.value?.scrollIntoView({ behavior: &#039;smooth' })
  })
})

onUnmounted(() => unsubscribe?.())

async function sendMessage() {
  if (!newMessage.value.trim()) return
  const text = newMessage.value.trim()
  newMessage.value = &#039;'
  await addDoc(collection(db, `rooms/${props.roomId}/messages`), {
    text,
    uid: auth.currentUser.uid,
    displayName: auth.currentUser.displayName,
    photoURL: auth.currentUser.photoURL,
    createdAt: serverTimestamp()
  })
}
</script>

<template>
  <div class="flex flex-col h-full">
    <div class="flex-1 overflow-y-auto p-4 space-y-3">
      <div v-for="msg in messages" :key="msg.id"
        :class="[&#039;flex gap-3', msg.uid === auth.currentUser?.uid ? 'flex-row-reverse' : '']">
        <img :src="msg.photoURL" class="w-8 h-8 rounded-full flex-shrink-0" />
        <div :class="[&#039;max-w-xs px-4 py-2 rounded-2xl text-sm',
          msg.uid === auth.currentUser?.uid
            ? &#039;bg-indigo-600 text-white rounded-tr-sm'
            : &#039;bg-gray-100 text-gray-900 rounded-tl-sm']">
          {{ msg.text }}
        </div>
      </div>
      <div ref="messagesEnd"></div>
    </div>
    <div class="p-4 border-t flex gap-3">
      <input v-model="newMessage" @keyup.enter="sendMessage"
        class="flex-1 px-4 py-2 border rounded-xl outline-none focus:border-indigo-500"
        placeholder="Type a message..." />
      <button @click="sendMessage" class="px-5 py-2 bg-indigo-600 text-white font-semibold rounded-xl hover:bg-indigo-700 transition-colors">
        Send
      </button>
    </div>
  </div>
</template>

Stack: Vue 3 + Pinia + Vue Router + Axios + TailwindCSS + Chart.js

Pages:
├── /dashboard → Stats overview, charts, recent activity
├── /users → User management table with CRUD
├── /orders → Order management with status updates
├── /products → Product inventory management
├── /analytics → Sales charts, user growth
└── /settings → App configuration

Components:
├── SidebarNav (collapsible, active states)
├── StatsCard (number, trend, icon)
├── DataTable (sort, filter, pagination, bulk actions)
├── LineChart (revenue over time)
├── DonutChart (category breakdown)
├── ActivityFeed (recent actions)
└── NotificationDropdown

Stack: Vue 3 + Pinia + Vue Router + Firebase

Features:
✅ User profiles with avatars and bios
✅ Post feed with infinite scroll
✅ Like, comment, share
✅ Follow/unfollow users
✅ Stories (24hr expiry)
✅ Notifications
✅ Direct messaging
✅ Explore/discover page
✅ Hashtag search
✅ Image upload with preview

Stack: Vue 3 + Pinia + Vue Router + Axios

Features:
✅ Rich text editor (Quill or TipTap)
✅ Markdown preview
✅ Category/tag management
✅ Comment system with threading
✅ SEO-friendly slugs
✅ Featured image upload
✅ Author profile pages
✅ Related posts
✅ Reading time calculator
✅ Social share buttons

<!-- BlogPost.vue -->
<script setup>
import { computed } from &#039;vue'
const props = defineProps({ post: Object })

const readingTime = computed(() => {
  const wordsPerMinute = 200
  const words = props.post.content.split(/\s+/).length
  return Math.ceil(words / wordsPerMinute)
})

const shareUrl = computed(() => `${window.location.origin}/blog/${props.post.slug}`)
</script>

<template>
  <article class="max-w-3xl mx-auto px-6 py-12">
    <div class="mb-8">
      <div class="flex gap-2 mb-4">
        <span v-for="tag in post.tags" :key="tag" class="px-3 py-1 bg-indigo-50 text-indigo-600 rounded-full text-sm font-medium">
          {{ tag }}
        </span>
      </div>
      <h1 class="text-4xl font-black text-gray-900 leading-tight mb-4">{{ post.title }}</h1>
      <div class="flex items-center gap-4 text-sm text-gray-500">
        <img :src="post.author.avatar" class="w-9 h-9 rounded-full" />
        <div>
          <p class="font-semibold text-gray-900">{{ post.author.name }}</p>
          <p>{{ post.publishedAt }} · {{ readingTime }} min read</p>
        </div>
      </div>
    </div>
    <img :src="post.featuredImage" class="w-full h-72 object-cover rounded-2xl mb-8" />
    <div class="prose prose-lg max-w-none" v-html="post.content"></div>
  </article>
</template>

Stack: Vue 3 + Pinia + Vue Router + TailwindCSS

Features:
✅ Kanban board (drag and drop)
✅ Task creation with priority, labels, assignees
✅ Due dates with calendar view
✅ Sprint/milestone planning
✅ Team collaboration
✅ Activity log per task
✅ File attachments
✅ Time tracking
✅ Progress reports
✅ Notifications

<!-- KanbanBoard.vue -->
<script setup>
import { ref } from &#039;vue'
import { useTaskStore } from &#039;@/stores/tasks'

const taskStore = useTaskStore()
const columns = ref([&#039;To Do', 'In Progress', 'Review', 'Done'])

function onDragStart(e, task) {
  e.dataTransfer.setData(&#039;taskId', task.id)
}

function onDrop(e, column) {
  const taskId = e.dataTransfer.getData(&#039;taskId')
  taskStore.moveTask(taskId, column)
}

function onDragOver(e) {
  e.preventDefault()
}
</script>

<template>
  <div class="flex gap-4 overflow-x-auto p-6 h-full">
    <div v-for="col in columns" :key="col"
      @drop="onDrop($event, col)"
      @dragover="onDragOver"
      class="flex-shrink-0 w-72 bg-gray-50 rounded-xl p-4">
      <div class="flex items-center justify-between mb-4">
        <h3 class="font-bold text-gray-700">{{ col }}</h3>
        <span class="bg-gray-200 text-gray-600 text-xs font-bold px-2 py-0.5 rounded-full">
          {{ taskStore.tasksByColumn(col).length }}
        </span>
      </div>
      <div class="space-y-3">
        <div
          v-for="task in taskStore.tasksByColumn(col)"
          :key="task.id"
          draggable="true"
          @dragstart="onDragStart($event, task)"
          class="bg-white p-4 rounded-xl shadow-sm cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
        >
          <div class="flex gap-2 mb-2">
            <span :class="[&#039;text-xs font-bold px-2 py-0.5 rounded', {
              &#039;bg-red-100 text-red-600': task.priority === 'high',
              &#039;bg-yellow-100 text-yellow-600': task.priority === 'medium',
              &#039;bg-green-100 text-green-600': task.priority === 'low'
            }]">{{ task.priority }}</span>
          </div>
          <p class="font-semibold text-gray-900 text-sm">{{ task.title }}</p>
          <p class="text-xs text-gray-500 mt-1 line-clamp-2">{{ task.description }}</p>
          <div class="flex items-center justify-between mt-3">
            <span class="text-xs text-gray-400">📅 {{ task.dueDate }}</span>
            <div class="flex -space-x-1">
              <img v-for="member in task.assignees.slice(0,3)" :key="member.id"
                :src="member.avatar" class="w-6 h-6 rounded-full border-2 border-white" />
            </div>
          </div>
        </div>
      </div>
      <button class="mt-3 w-full py-2 text-sm text-gray-500 hover:bg-gray-100 rounded-lg transition-colors">
        + Add Task
      </button>
    </div>
  </div>
</template>