fsdcats 0.0.0-stage → 1.0.0

package/lib/practicalsData.js

@@ -0,0 +1,762 @@
+const practicalsData = {
+  '1': {
+    id: '1',
+    fileName: 'practical-1.txt',
+    title: 'Practical 1: Vue Directives (v-if/else, v-show, v-for, v-on, v-model)',
+    setupSteps: `1. Run:
+   npm create vue@latest my-vue-p1
+
+2. Terminal Prompts:
+   Select No to all options (TypeScript, Router, Pinia, Vitest, ESLint, Prettier).
+
+3. cd my-vue-p1
+   npm install
+
+4. npm run dev
+   (App runs on http://localhost:5173)
+
+5. Files to create/update:
+   - Create src/users.json
+   - Replace src/App.vue with the code below.`,
+    components: [
+      {
+        name: 'users.json',
+        path: 'src/users.json',
+        code: `[
+  { "username": "admin", "role": "Admin", "permissions": ["Create", "Edit", "Delete"] },
+  { "username": "editor", "role": "Editor", "permissions": ["Create", "Edit"] },
+  { "username": "viewer", "role": "Viewer", "permissions": ["Read Only"] }
+]`
+      },
+      {
+        name: 'App.vue',
+        path: 'src/App.vue',
+        code: `<script setup>
+import { ref } from 'vue'
+import users from './users.json'
+
+const username = ref('')
+const password = ref('')
+const currentUser = ref(null)
+const error = ref(false)
+
+function handleLogin() {
+  const found = users.find(u => u.username === username.value && password.value === '123')
+  if (found) {
+    currentUser.value = found
+    error.value = false
+    username.value = ''
+    password.value = ''
+  } else {
+    error.value = true
+  }
+}
+
+function handleLogout() {
+  currentUser.value = null
+}
+</script>
+
+<template>
+  <div style="font-family: sans-serif; max-width: 400px; margin: 30px auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
+    <!-- 1. v-if / v-else: Toggle between Login and Dashboard -->
+    <div v-if="!currentUser">
+      <h2>System Login</h2>
+      <!-- 2. v-model: Two-way input binding -->
+      <p><input v-model="username" placeholder="Username (admin/editor/viewer)" style="width: 100%; padding: 8px;" /></p>
+      <p><input v-model="password" type="password" placeholder="Password (123)" style="width: 100%; padding: 8px;" /></p>
+      
+      <!-- 3. v-show: Conditional visibility without DOM removal -->
+      <p v-show="error" style="color: red;">Invalid credentials! (Use password: 123)</p>
+      
+      <!-- 4. v-on (@): Event listening -->
+      <button @click="handleLogin" style="padding: 8px 16px; background: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer;">
+        Login
+      </button>
+    </div>
+
+    <div v-else>
+      <h2>Welcome, {{ currentUser.username }}</h2>
+      <p>Role: <strong>{{ currentUser.role }}</strong></p>
+      <button @click="handleLogout" style="padding: 6px 12px; cursor: pointer;">Logout</button>
+
+      <h3>Allowed Permissions:</h3>
+      <ul>
+        <!-- 5. v-for: List iteration with key binding -->
+        <li v-for="(perm, index) in currentUser.permissions" :key="index">
+          ✅ {{ perm }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>`
+      }
+    ]
+  },
+
+  '2': {
+    id: '2',
+    fileName: 'practical-2.txt',
+    title: 'Practical 2: Data Binding (Props and Emits)',
+    setupSteps: `1. Run:
+   npm create vue@latest my-vue-p2
+
+2. Terminal Prompts:
+   Select No to all options.
+
+3. cd my-vue-p2
+   npm install
+
+4. npm run dev
+
+5. Files to create/update:
+   - Create src/DriverCard.vue (Child component)
+   - Replace src/App.vue with the code below (Parent component).`,
+    components: [
+      {
+        name: 'DriverCard.vue',
+        path: 'src/DriverCard.vue',
+        code: `<script setup>
+// 1. defineProps: Receives data from parent
+defineProps({
+  name: { type: String, required: true },
+  id: { type: Number, required: true }
+})
+
+// 2. defineEmits: Declares event to notify parent
+const emit = defineEmits(['remove'])
+</script>
+
+<template>
+  <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px; margin: 8px 0; background: #f3f4f6; border-radius: 6px;">
+    <span>🏎️ {{ name }} <small>(ID: {{ id }})</small></span>
+    <!-- Emits 'remove' event passing driver ID -->
+    <button @click="emit('remove', id)" style="background: #ef4444; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer;">
+      Remove
+    </button>
+  </div>
+</template>`
+      },
+      {
+        name: 'App.vue',
+        path: 'src/App.vue',
+        code: `<script setup>
+import { ref } from 'vue'
+import DriverCard from './DriverCard.vue'
+
+const newDriverName = ref('')
+const drivers = ref([
+  { id: 1, name: 'Lewis Hamilton' },
+  { id: 2, name: 'Charles Leclerc' },
+  { id: 3, name: 'Max Verstappen' }
+])
+
+// Function called when child emits 'remove'
+function removeDriver(id) {
+  drivers.value = drivers.value.filter(d => d.id !== id)
+}
+
+function addDriver() {
+  if (!newDriverName.value.trim()) return
+  drivers.value.push({
+    id: Date.now(),
+    name: newDriverName.value.trim()
+  })
+  newDriverName.value = ''
+}
+</script>
+
+<template>
+  <div style="font-family: sans-serif; max-width: 450px; margin: 30px auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
+    <h2>Driver Dashboard (Props & Emits)</h2>
+
+    <!-- Add driver form -->
+    <div style="display: flex; gap: 8px; margin-bottom: 16px;">
+      <input v-model="newDriverName" placeholder="Enter driver name" style="flex: 1; padding: 8px;" />
+      <button @click="addDriver" style="padding: 8px 14px; background: #10b981; color: white; border: none; border-radius: 4px; cursor: pointer;">
+        Add
+      </button>
+    </div>
+
+    <!-- 
+      - Data Binding DOWN via PROPS: :name and :id
+      - Event Binding UP via EMIT: @remove 
+    -->
+    <DriverCard
+      v-for="driver in drivers"
+      :key="driver.id"
+      :id="driver.id"
+      :name="driver.name"
+      @remove="removeDriver"
+    />
+
+    <p v-if="drivers.length === 0" style="color: #666; font-style: italic;">No drivers in the roster.</p>
+  </div>
+</template>`
+      }
+    ]
+  },
+
+  '3': {
+    id: '3',
+    fileName: 'practical-3.txt',
+    title: 'Practical 3: Document Upload & Preview System (Vue 3 + Express + Multer)',
+    setupSteps: `Backend Setup:
+1. mkdir backend && cd backend
+2. npm init -y
+3. npm install express multer cors
+4. Create server.js and paste the server.js code below.
+5. node server.js
+   (Runs on http://localhost:5000)
+
+Frontend Setup:
+1. In a new terminal:
+   npm create vue@latest frontend
+   (Select No to all options)
+2. cd frontend && npm install
+3. npm run dev
+   (Runs on http://localhost:5173)
+4. Replace frontend/src/App.vue with the App.vue code below.`,
+    components: [
+      {
+        name: 'server.js (Backend)',
+        path: 'backend/server.js',
+        code: `const express = require('express');
+const multer = require('multer');
+const cors = require('cors');
+const path = require('path');
+const fs = require('fs');
+
+const app = express();
+app.use(cors());
+app.use(express.json());
+
+// Ensure uploads directory exists
+const uploadDir = path.join(__dirname, 'uploads');
+if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir);
+
+// Serve uploaded files statically for preview/download
+app.use('/uploads', express.static(uploadDir));
+
+// Multer Storage Configuration
+const storage = multer.diskStorage({
+  destination: (req, file, cb) => cb(null, 'uploads/'),
+  filename: (req, file, cb) => cb(null, \`\${Date.now()}-\${file.originalname}\`)
+});
+const upload = multer({ storage });
+
+let documents = [];
+
+// 1. Upload Route
+app.post('/api/documents/upload', upload.single('file'), (req, res) => {
+  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
+  const newDoc = {
+    id: Date.now(),
+    originalName: req.file.originalname,
+    filename: req.file.filename,
+    size: req.file.size,
+    mimeType: req.file.mimetype
+  };
+  documents.unshift(newDoc);
+  res.status(201).json(newDoc);
+});
+
+// 2. Fetch All Documents Route
+app.get('/api/documents', (req, res) => {
+  res.json(documents);
+});
+
+// 3. Delete Document Route
+app.delete('/api/documents/:id', (req, res) => {
+  const id = Number(req.params.id);
+  const doc = documents.find(d => d.id === id);
+  if (!doc) return res.status(404).json({ error: 'File not found' });
+
+  // Delete file from disk
+  const filePath = path.join(uploadDir, doc.filename);
+  if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
+
+  documents = documents.filter(d => d.id !== id);
+  res.json({ message: 'Deleted successfully' });
+});
+
+app.listen(5000, () => console.log('Backend running on http://localhost:5000'));`
+      },
+      {
+        name: 'App.vue (Frontend)',
+        path: 'frontend/src/App.vue',
+        code: `<script setup>
+import { ref, onMounted } from 'vue'
+
+const selectedFile = ref(null)
+const documents = ref([])
+const loading = ref(false)
+
+async function fetchDocuments() {
+  const res = await fetch('http://localhost:5000/api/documents')
+  documents.value = await res.json()
+}
+
+function handleFileSelect(e) {
+  selectedFile.value = e.target.files[0]
+}
+
+async function handleUpload() {
+  if (!selectedFile.value) return
+  loading.value = true
+
+  const formData = new FormData()
+  formData.append('file', selectedFile.value)
+
+  await fetch('http://localhost:5000/api/documents/upload', {
+    method: 'POST',
+    body: formData
+  })
+
+  selectedFile.value = null
+  document.getElementById('fileInput').value = ''
+  loading.value = false
+  await fetchDocuments()
+}
+
+async function handleDelete(id) {
+  await fetch(\`http://localhost:5000/api/documents/\${id}\`, { method: 'DELETE' })
+  await fetchDocuments()
+}
+
+onMounted(fetchDocuments)
+</script>
+
+<template>
+  <div style="font-family: sans-serif; max-width: 500px; margin: 30px auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
+    <h2>Document Upload & Preview</h2>
+
+    <!-- File input & upload button -->
+    <div style="margin-bottom: 20px;">
+      <input id="fileInput" type="file" @change="handleFileSelect" />
+      <button :disabled="!selectedFile || loading" @click="handleUpload" style="padding: 6px 12px; margin-left: 8px;">
+        {{ loading ? 'Uploading...' : 'Upload' }}
+      </button>
+    </div>
+
+    <!-- Document List & Preview Link -->
+    <h3>Uploaded Documents ({{ documents.length }})</h3>
+    <ul style="padding-left: 20px;">
+      <li v-for="doc in documents" :key="doc.id" style="margin-bottom: 10px;">
+        <a :href="\`http://localhost:5000/uploads/\${doc.filename}\`" target="_blank" style="color: #2563eb; font-weight: bold;">
+          {{ doc.originalName }}
+        </a>
+        <small style="color: #666; margin-left: 8px;">({{ (doc.size / 1024).toFixed(1) }} KB)</small>
+        <button @click="handleDelete(doc.id)" style="margin-left: 10px; color: red;">Delete</button>
+      </li>
+    </ul>
+  </div>
+</template>`
+      }
+    ]
+  },
+
+  '4': {
+    id: '4',
+    fileName: 'practical-4.txt',
+    title: 'Practical 4: Localized State Management (Pinia Multi-Step Form)',
+    setupSteps: `Frontend Setup:
+1. npm create vue@latest frontend
+   (Select YES to Pinia, No to everything else)
+2. cd frontend && npm install
+3. npm run dev
+4. Create src/store.js and replace src/App.vue with the code below.
+
+Backend Setup (MongoDB):
+1. mkdir backend && cd backend
+2. npm init -y
+3. npm install express mongoose cors
+4. Create server.js and paste the server.js code below.
+5. node server.js`,
+    components: [
+      {
+        name: 'store.js (Pinia Store)',
+        path: 'frontend/src/store.js',
+        code: `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
+    }
+  }
+})`
+      },
+      {
+        name: 'App.vue (Frontend)',
+        path: 'frontend/src/App.vue',
+        code: `<script setup>
+import { useApplicationStore } from './store.js'
+const store = useApplicationStore()
+</script>
+
+<template>
+  <div style="font-family: sans-serif; max-width: 450px; margin: 30px auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
+    <h2>Job Application Form</h2>
+    <p><strong>Step {{ store.currentStep }} of 4</strong></p>
+
+    <!-- Step 1: Personal Details -->
+    <div v-if="store.currentStep === 1">
+      <h3>Step 1: Personal Details</h3>
+      <p><input v-model="store.personal.name" placeholder="Full Name" style="width: 100%; padding: 8px;" /></p>
+      <p><input v-model="store.personal.email" placeholder="Email" style="width: 100%; padding: 8px;" /></p>
+      <p><input v-model="store.personal.phone" placeholder="Phone" style="width: 100%; padding: 8px;" /></p>
+    </div>
+
+    <!-- Step 2: Education -->
+    <div v-else-if="store.currentStep === 2">
+      <h3>Step 2: Education</h3>
+      <p><input v-model="store.education.degree" placeholder="Degree (e.g. BSc CS)" style="width: 100%; padding: 8px;" /></p>
+      <p><input v-model="store.education.college" placeholder="College Name" style="width: 100%; padding: 8px;" /></p>
+      <p><input v-model="store.education.year" placeholder="Passing Year" style="width: 100%; padding: 8px;" /></p>
+    </div>
+
+    <!-- Step 3: Experience -->
+    <div v-else-if="store.currentStep === 3">
+      <h3>Step 3: Work Experience</h3>
+      <p><input v-model="store.experience.company" placeholder="Company Name" style="width: 100%; padding: 8px;" /></p>
+      <p><input v-model="store.experience.role" placeholder="Designation / Role" style="width: 100%; padding: 8px;" /></p>
+    </div>
+
+    <!-- Step 4: Review & Submit -->
+    <div v-else-if="store.currentStep === 4">
+      <h3>Step 4: Review Details</h3>
+      <p><strong>Name:</strong> {{ store.personal.name }} | {{ store.personal.email }}</p>
+      <p><strong>Degree:</strong> {{ store.education.degree }} ({{ store.education.college }})</p>
+      <p><strong>Experience:</strong> {{ store.experience.company }} - {{ store.experience.role }}</p>
+      
+      <button @click="store.submitApplication" style="padding: 10px 20px; background: #16a34a; color: white; border: none; cursor: pointer;">
+        Submit Application
+      </button>
+      <p v-if="store.submitted" style="color: green; font-weight: bold;">✅ Submitted Successfully!</p>
+    </div>
+
+    <!-- Navigation Buttons -->
+    <div style="margin-top: 20px; display: flex; justify-content: space-between;">
+      <button :disabled="store.currentStep === 1" @click="store.goBack">Back</button>
+      <button v-if="store.currentStep < 4" @click="store.goNext">Next</button>
+      <button v-if="store.submitted" @click="store.resetForm">Start Over</button>
+    </div>
+  </div>
+</template>`
+      },
+      {
+        name: 'server.js (Backend)',
+        path: 'backend/server.js',
+        code: `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));`
+      }
+    ]
+  },
+
+  '5': {
+    id: '5',
+    fileName: 'practical-5.txt',
+    title: 'Practical 5: Routing in Nuxt and Shared Layouts',
+    setupSteps: `1. Run:
+   npx nuxi@latest init nuxt-lab
+
+2. Prompts:
+   - Template: minimal
+   - Package manager: npm
+   - Git repository: No
+   - Install dependencies: Yes
+
+3. cd nuxt-lab && npm run dev
+   (Runs on http://localhost:3000)
+
+4. Create the following files inside app/ (or root):
+   - app/app.vue
+   - app/layouts/default.vue
+   - app/layouts/minimal.vue
+   - app/pages/index.vue
+   - app/pages/about.vue
+   - app/pages/items/index.vue
+   - app/pages/items/[id].vue`,
+    components: [
+      {
+        name: 'app.vue',
+        path: 'app/app.vue',
+        code: `<!-- app.vue: Wraps the active NuxtLayout and NuxtPage -->
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>`
+      },
+      {
+        name: 'default.vue (Shared Layout)',
+        path: 'app/layouts/default.vue',
+        code: `<!-- 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>`
+      },
+      {
+        name: 'minimal.vue (Minimal Layout)',
+        path: 'app/layouts/minimal.vue',
+        code: `<!-- 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>`
+      },
+      {
+        name: 'index.vue (Home Page)',
+        path: 'app/pages/index.vue',
+        code: `<!-- 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>`
+      },
+      {
+        name: 'about.vue (About Page)',
+        path: 'app/pages/about.vue',
+        code: `<!-- 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>`
+      },
+      {
+        name: 'items/index.vue (List Page)',
+        path: 'app/pages/items/index.vue',
+        code: `<!-- 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>`
+      },
+      {
+        name: 'items/[id].vue (Dynamic Detail Page)',
+        path: 'app/pages/items/[id].vue',
+        code: `<!-- 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 parameter from route
+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>`
+      }
+    ]
+  },
+
+  'crud': {
+    id: 'crud',
+    fileName: 'practical-crud.txt',
+    title: 'Practical CRUD: Express + Mongoose REST API',
+    setupSteps: `1. mkdir crud-backend && cd crud-backend
+2. npm init -y
+3. npm install express mongoose
+4. Create server.js and paste the server.js code below.
+5. node server.js
+   (Runs on http://localhost:5000)`,
+    components: [
+      {
+        name: 'server.js',
+        path: 'server.js',
+        code: `const express = require('express');
+const mongoose = require('mongoose');
+
+const app = express();
+app.use(express.json());
+
+// 1. Database Connection
+mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/crud_db')
+  .then(() => console.log('✓ MongoDB Connected'))
+  .catch(err => console.error('MongoDB Error:', err));
+
+// 2. Mongoose Model
+const Item = mongoose.model('Item', new mongoose.Schema({
+  name: { type: String, required: true },
+  description: String
+}, { timestamps: true }));
+
+// 3. CREATE: POST /api/items
+app.post('/api/items', async (req, res) => {
+  try {
+    const item = await Item.create(req.body);
+    res.status(201).json(item);
+  } catch (err) {
+    res.status(400).json({ error: err.message });
+  }
+});
+
+// 4. READ ALL: GET /api/items
+app.get('/api/items', async (req, res) => {
+  const items = await Item.find().sort({ createdAt: -1 });
+  res.json(items);
+});
+
+// 5. READ ONE: GET /api/items/:id
+app.get('/api/items/:id', async (req, res) => {
+  const item = await Item.findById(req.params.id);
+  if (!item) return res.status(404).json({ message: 'Item not found' });
+  res.json(item);
+});
+
+// 6. UPDATE: PUT /api/items/:id
+app.put('/api/items/:id', async (req, res) => {
+  const item = await Item.findByIdAndUpdate(req.params.id, req.body, { new: true });
+  if (!item) return res.status(404).json({ message: 'Item not found' });
+  res.json(item);
+});
+
+// 7. DELETE: DELETE /api/items/:id
+app.delete('/api/items/:id', async (req, res) => {
+  const item = await Item.findByIdAndDelete(req.params.id);
+  if (!item) return res.status(404).json({ message: 'Item not found' });
+  res.json({ message: 'Item deleted successfully' });
+});
+
+app.listen(5000, () => console.log('✓ Server running on http://localhost:5000'));`
+      }
+    ]
+  }
+};
+
+module.exports = practicalsData;