fsdcats 0.0.0-stage → 1.0.0

package/practicals/p4-pinia-form/server.js

@@ -0,0 +1,35 @@
+const express = require('express');
+const mongoose = require('mongoose');
+const cors = require('cors');
+
+const app = express();
+app.use(cors());
+app.use(express.json());
+
+// MongoDB Application Schema
+const Application = mongoose.model('Application', new mongoose.Schema({
+  personal: Object,
+  education: Object,
+  experience: Object,
+  createdAt: { type: Date, default: Date.now }
+}));
+
+// POST /api/applications
+app.post('/api/applications', async (req, res) => {
+  try {
+    const doc = await Application.create(req.body);
+    res.status(201).json(doc);
+  } catch (err) {
+    res.status(400).json({ error: err.message });
+  }
+});
+
+// GET /api/applications
+app.get('/api/applications', async (req, res) => {
+  const docs = await Application.find().sort({ createdAt: -1 });
+  res.json(docs);
+});
+
+mongoose.connect(process.env.MONGO_URI || 'mongodb://localhost:27017/job_app_db')
+  .then(() => app.listen(5000, () => console.log('Server running on port 5000')))
+  .catch(err => console.error(err));

package/practicals/p4-pinia-form/store.js

@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+
+export const useApplicationStore = defineStore('application', {
+  state: () => ({
+    currentStep: 1,
+    personal: { name: '', email: '', phone: '' },
+    education: { degree: '', college: '', year: '' },
+    experience: { company: '', role: '' },
+    submitted: false
+  }),
+  actions: {
+    goNext() {
+      if (this.currentStep < 4) this.currentStep++
+    },
+    goBack() {
+      if (this.currentStep > 1) this.currentStep--
+    },
+    async submitApplication() {
+      const payload = {
+        personal: this.personal,
+        education: this.education,
+        experience: this.experience
+      }
+      const res = await fetch('http://localhost:5000/api/applications', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      })
+      if (res.ok) this.submitted = true
+    },
+    resetForm() {
+      this.currentStep = 1
+      this.personal = { name: '', email: '', phone: '' }
+      this.education = { degree: '', college: '', year: '' }
+      this.experience = { company: '', role: '' }
+      this.submitted = false
+    }
+  }
+})

package/practicals/p5-nuxt-routing/app.vue

@@ -0,0 +1,6 @@
+<!-- app.vue: Wraps the active NuxtLayout and NuxtPage -->
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

package/practicals/p5-nuxt-routing/layouts/default.vue

@@ -0,0 +1,21 @@
+<!-- app/layouts/default.vue: Shared Layout with persistent header & footer -->
+<template>
+  <div style="font-family: sans-serif; padding: 20px;">
+    <header style="background: #f3f4f6; padding: 12px; margin-bottom: 20px;">
+      <nav>
+        <NuxtLink to="/" style="margin-right: 15px; font-weight: bold;">Home</NuxtLink>
+        <NuxtLink to="/items" style="margin-right: 15px; font-weight: bold;">Book Catalogue</NuxtLink>
+        <NuxtLink to="/about" style="font-weight: bold;">About</NuxtLink>
+      </nav>
+    </header>
+
+    <main>
+      <!-- Page content is automatically rendered inside this slot -->
+      <slot />
+    </main>
+
+    <footer style="margin-top: 40px; padding-top: 10px; border-top: 1px solid #ddd; color: #666;">
+      <p>&copy; 2026 My Nuxt App</p>
+    </footer>
+  </div>
+</template>

package/practicals/p5-nuxt-routing/layouts/minimal.vue

@@ -0,0 +1,9 @@
+<!-- app/layouts/minimal.vue: Custom headerless layout -->
+<template>
+  <div style="border: 2px dashed #ef4444; padding: 25px; text-align: center; font-family: sans-serif; max-width: 400px; margin: 30px auto;">
+    <h3>[Minimal Headerless Layout]</h3>
+    <slot />
+    <hr style="margin: 20px 0;" />
+    <NuxtLink to="/">← Return Home</NuxtLink>
+  </div>
+</template>

package/practicals/p5-nuxt-routing/pages/about.vue

@@ -0,0 +1,14 @@
+<!-- app/pages/about.vue: Route: /about (uses minimal layout) -->
+<script setup>
+// Switch this page to minimal layout instead of default
+definePageMeta({
+  layout: 'minimal'
+})
+</script>
+
+<template>
+  <div>
+    <h2>About Us</h2>
+    <p>This page uses <code>definePageMeta({ layout: 'minimal' })</code>.</p>
+  </div>
+</template>

package/practicals/p5-nuxt-routing/pages/index.vue

@@ -0,0 +1,8 @@
+<!-- app/pages/index.vue: Root landing page (Route: /) -->
+<template>
+  <div>
+    <h1>Welcome to Book Catalogue</h1>
+    <p>This is the home page using default layout.</p>
+    <NuxtLink to="/items" style="color: #2563eb; font-weight: bold;">View Books →</NuxtLink>
+  </div>
+</template>

package/practicals/p5-nuxt-routing/pages/items/[id].vue

@@ -0,0 +1,32 @@
+<!-- app/pages/items/[id].vue: Dynamic Wildcard Route: /items/:id -->
+<script setup>
+const route = useRoute()
+
+const books = [
+  { id: 1, title: 'The Hobbit', author: 'J.R.R. Tolkien', desc: 'A fantasy quest across Middle-earth.' },
+  { id: 2, title: '1984', author: 'George Orwell', desc: 'A dystopian vision of totalitarian rule.' },
+  { id: 3, title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', desc: 'The American jazz age critique.' }
+]
+
+// Extract the id from route parameters
+const bookId = parseInt(route.params.id)
+const book = books.find(b => b.id === bookId)
+</script>
+
+<template>
+  <div>
+    <div v-if="!book">
+      <h2>Book Not Found</h2>
+      <p>No book exists with ID: {{ route.params.id }}</p>
+      <NuxtLink to="/items">Back to Catalogue</NuxtLink>
+    </div>
+
+    <div v-else>
+      <h2>{{ book.title }}</h2>
+      <h4>Author: {{ book.author }}</h4>
+      <p>{{ book.desc }}</p>
+      <hr style="margin: 15px 0;" />
+      <NuxtLink to="/items">← Back to Catalogue</NuxtLink>
+    </div>
+  </div>
+</template>

package/practicals/p5-nuxt-routing/pages/items/index.vue

@@ -0,0 +1,22 @@
+<!-- app/pages/items/index.vue: Route: /items -->
+<script setup>
+const books = [
+  { id: 1, title: 'The Hobbit', author: 'J.R.R. Tolkien' },
+  { id: 2, title: '1984', author: 'George Orwell' },
+  { id: 3, title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }
+]
+</script>
+
+<template>
+  <div>
+    <h2>Book Catalogue</h2>
+    <ul>
+      <li v-for="book in books" :key="book.id" style="margin-bottom: 8px;">
+        <!-- Dynamic link to /items/[id] -->
+        <NuxtLink :to="`/items/${book.id}`">
+          <strong>{{ book.title }}</strong> by {{ book.author }}
+        </NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>