fsdcats 1.0.0 → 1.0.1

package/README.md

@@ -1,63 +1,23 @@
-# Fullstack Practical Exam Cheatsheet (fsdcats)
+# fsdcats
 
-This package generates **clean text files (`.txt`)** containing the **step-by-step terminal setup instructions** and the **exact minimal component code** (separated by clean headers and gaps) for your Fullstack practical exam.
+Minimal exam code generator with automatic clipboard copy.
 
----
+## Usage
 
-## 📚 Scope Covered
-
-1. **Practical 1: Vue Directives** (`v-if`, `v-else`, `v-model`, `v-show`, `v-for`, `v-on`) ➔ `practical-1.txt`
-2. **Practical 2: Data Binding (Props and Emits)** (Parent-to-Child & Child-to-Parent) ➔ `practical-2.txt`
-3. **Practical 3: Document Upload & Preview (Vue 3 + Express + Multer)** ➔ `practical-3.txt`
-4. **Practical 4: Localized State Management (Pinia Multi-Step Form)** ➔ `practical-4.txt`
-5. **Practical 5: Routing in Nuxt and Shared Layouts** (`pages/`, `[id].vue`, `layouts/default.vue`) ➔ `practical-5.txt`
-6. **CRUD Operations: Express + Mongoose REST API** (Create, Read, Update, Delete) ➔ `practical-crud.txt`
-
----
-
-## ⚡ How to Use fsdcats
-
-Whenever you run the command for any practical, **a formatted `.txt` file is generated and automatically opened in your text editor**.
-
-### 1. Generate via npx (Zero Installation)
-```bash
-npx fsdcats 1       # Generates & opens practical-1.txt
-npx fsdcats 2       # Generates & opens practical-2.txt
-npx fsdcats 3       # Generates & opens practical-3.txt
-npx fsdcats 4       # Generates & opens practical-4.txt
-npx fsdcats 5       # Generates & opens practical-5.txt
-npx fsdcats crud    # Generates & opens practical-crud.txt
-npx fsdcats all     # Generates ALL practical text files at once!
-```
-
-### 2. Interactive Menu
-Just run:
 ```bash
-npx fsdcats
+npx fsdcats 1       # Vue Directives
+npx fsdcats 2       # Props & Emits
+npx fsdcats 3       # File Upload
+npx fsdcats 4       # Pinia Multi-Step Form
+npx fsdcats 5       # Nuxt Routing & Layouts
+npx fsdcats crud    # Mongoose CRUD API
+npx fsdcats all     # All practicals
 ```
-And select a number from `1` to `5`, `crud`, or `all`.
-
----
 
-## 📄 Structure of the Generated Text Files
+Running any command creates the `.txt` file and **automatically copies the entire text directly to your clipboard**.
 
-Each generated `.txt` file contains:
-1. **SECTION 1: STEP-BY-STEP PROJECT SETUP**
-   - Exact terminal commands (`npm create vue@latest ...`, `cd ...`, `npm install`, `npm run dev`).
-   - Every single prompt choice (e.g. selecting `No` for TypeScript, ESLint, Prettier to avoid exam errors).
-2. **SECTION 2: COMPONENT CODE FILES**
-   - Clearly separated by visible spacing/gaps.
-   - Component Name & target file path (e.g., `COMPONENT NAME: App.vue`, `TARGET PATH: src/App.vue`).
-   - Clean, minimal code ready to copy-paste.
+## Publish to npm
 
----
-
-## 🚀 How to Publish to npm
-
-In your terminal (inside `/Users/spare/Downloads/fullstack`), run:
 ```bash
-npm publish --access public --otp=YOUR_6_DIGIT_OTP
+npm publish --access public --otp=YOUR_OTP
 ```
-*(Replace `YOUR_6_DIGIT_OTP` with the active code from your authenticator app).*
-
-Once published, you or your friends can run `npx fsdcats 1` on **any computer in the world**!

package/all-practicals.txt

@@ -1,25 +1,19 @@
-PRACTICAL 1: VUE DIRECTIVES (V-IF/ELSE, V-SHOW, V-FOR, V-ON, V-MODEL)
-
-
-
-
 SETUP:
 
 1. Run:
    npm create vue@latest my-vue-p1
 
-2. Terminal Prompts:
-   Select No to all options (TypeScript, Router, Pinia, Vitest, ESLint, Prettier).
+2. Prompts:
+   Select No to all options.
 
 3. cd my-vue-p1
    npm install
 
 4. npm run dev
-   (App runs on http://localhost:5173)
 
-5. Files to create/update:
+5. Files:
    - Create src/users.json
-   - Replace src/App.vue with the code below.
+   - Replace src/App.vue with code below.
 
 
 
@@ -72,7 +66,7 @@ function handleLogout() {
 
 <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 -->
+    <!-- 1. v-if / v-else: Toggle between Login Screen and Dashboard -->
     <div v-if="!currentUser">
       <h2>System Login</h2>
       <!-- 2. v-model: Two-way input binding -->
@@ -114,17 +108,12 @@ function handleLogout() {
 
 
 
-PRACTICAL 2: DATA BINDING (PROPS AND EMITS)
-
-
-
-
 SETUP:
 
 1. Run:
    npm create vue@latest my-vue-p2
 
-2. Terminal Prompts:
+2. Prompts:
    Select No to all options.
 
 3. cd my-vue-p2
@@ -132,9 +121,9 @@ SETUP:
 
 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).
+5. Files:
+   - Create src/DriverCard.vue
+   - Replace src/App.vue with code below.
 
 
 
@@ -238,29 +227,24 @@ function addDriver() {
 
 
 
-PRACTICAL 3: DOCUMENT UPLOAD & PREVIEW SYSTEM (VUE 3 + EXPRESS + MULTER)
-
-
-
-
 SETUP:
 
-Backend Setup:
+Backend:
 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.
+4. Create server.js and paste code below.
 5. node server.js
    (Runs on http://localhost:5000)
 
-Frontend Setup:
-1. In a new terminal:
+Frontend:
+1. In another 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.
+4. Replace frontend/src/App.vue with code below.
 
 
 
@@ -269,7 +253,7 @@ Frontend Setup:
 COMPONENTS:
 
 
-COMPONENT: server.js (Backend)
+COMPONENT: server.js
 PATH: backend/server.js
 
 const express = require('express');
@@ -337,7 +321,7 @@ app.listen(5000, () => console.log('Backend running on http://localhost:5000'));
 
 
 
-COMPONENT: App.vue (Frontend)
+COMPONENT: App.vue
 PATH: frontend/src/App.vue
 
 <script setup>
@@ -418,25 +402,21 @@ onMounted(fetchDocuments)
 
 
 
-PRACTICAL 4: LOCALIZED STATE MANAGEMENT (PINIA MULTI-STEP FORM)
-
-
-
-
 SETUP:
 
-Frontend Setup:
+Frontend:
 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.
+4. Create src/store.js
+   Replace src/App.vue with code below.
 
-Backend Setup (MongoDB):
+Backend:
 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.
+4. Create server.js and paste code below.
 5. node server.js
 
 
@@ -446,7 +426,7 @@ Backend Setup (MongoDB):
 COMPONENTS:
 
 
-COMPONENT: store.js (Pinia Store)
+COMPONENT: store.js
 PATH: frontend/src/store.js
 
 import { defineStore } from 'pinia'
@@ -493,7 +473,7 @@ export const useApplicationStore = defineStore('application', {
 
 
 
-COMPONENT: App.vue (Frontend)
+COMPONENT: App.vue
 PATH: frontend/src/App.vue
 
 <script setup>
@@ -555,7 +535,7 @@ const store = useApplicationStore()
 
 
 
-COMPONENT: server.js (Backend)
+COMPONENT: server.js
 PATH: backend/server.js
 
 const express = require('express');
@@ -604,11 +584,6 @@ mongoose.connect(process.env.MONGO_URI || 'mongodb://localhost:27017/job_app_db'
 
 
 
-PRACTICAL 5: ROUTING IN NUXT AND SHARED LAYOUTS
-
-
-
-
 SETUP:
 
 1. Run:
@@ -623,7 +598,7 @@ SETUP:
 3. cd nuxt-lab && npm run dev
    (Runs on http://localhost:3000)
 
-4. Create the following files inside app/ (or root):
+4. Create files inside app/ (or root):
    - app/app.vue
    - app/layouts/default.vue
    - app/layouts/minimal.vue
@@ -653,7 +628,7 @@ PATH: app/app.vue
 
 
 
-COMPONENT: default.vue (Shared Layout)
+COMPONENT: default.vue
 PATH: app/layouts/default.vue
 
 <!-- app/layouts/default.vue: Shared Layout with persistent header & footer -->
@@ -682,7 +657,7 @@ PATH: app/layouts/default.vue
 
 
 
-COMPONENT: minimal.vue (Minimal Layout)
+COMPONENT: minimal.vue
 PATH: app/layouts/minimal.vue
 
 <!-- app/layouts/minimal.vue: Custom headerless layout -->
@@ -699,7 +674,7 @@ PATH: app/layouts/minimal.vue
 
 
 
-COMPONENT: index.vue (Home Page)
+COMPONENT: index.vue
 PATH: app/pages/index.vue
 
 <!-- app/pages/index.vue: Root landing page (Route: /) -->
@@ -715,7 +690,7 @@ PATH: app/pages/index.vue
 
 
 
-COMPONENT: about.vue (About Page)
+COMPONENT: about.vue
 PATH: app/pages/about.vue
 
 <!-- app/pages/about.vue: Route: /about (uses minimal layout) -->
@@ -737,7 +712,7 @@ definePageMeta({
 
 
 
-COMPONENT: items/index.vue (List Page)
+COMPONENT: items/index.vue
 PATH: app/pages/items/index.vue
 
 <!-- app/pages/items/index.vue: Route: /items -->
@@ -767,7 +742,7 @@ const books = [
 
 
 
-COMPONENT: items/[id].vue (Dynamic Detail Page)
+COMPONENT: items/[id].vue
 PATH: app/pages/items/[id].vue
 
 <!-- app/pages/items/[id].vue: Dynamic Wildcard Route: /items/:id -->
@@ -813,17 +788,12 @@ const book = books.find(b => b.id === bookId)
 
 
 
-PRACTICAL CRUD: EXPRESS + MONGOOSE REST API
-
-
-
-
 SETUP:
 
 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.
+4. Create server.js and paste code below.
 5. node server.js
    (Runs on http://localhost:5000)
 

package/bin/cli.js

@@ -1,14 +1,7 @@
 #!/usr/bin/env node
 
-const path = require('path');
 const readline = require('readline');
-const { practicalsData, generatePracticalFile, generateAllFiles } = require('../lib/generator');
-
-function printBanner() {
-  console.log('\n============================================================');
-  console.log('   FULLSTACK PRACTICAL EXAM CHEATSHEET GENERATOR (fsdcats)  ');
-  console.log('============================================================\n');
-}
+const { generatePracticalFile, generateAllFiles } = require('../lib/generator');
 
 const arg = process.argv[2];
 
@@ -16,66 +9,40 @@ if (arg) {
   const cleanArg = arg.toLowerCase().replace(/^p/, '');
 
   if (cleanArg === 'all') {
-    printBanner();
-    console.log('⏳ Generating text files for ALL practicals...');
     const results = generateAllFiles(process.cwd());
-    console.log(`\n🎉 Successfully generated ${results.length} files in current directory:\n`);
-    results.forEach(r => console.log(`  📄 ${r.fileName} -> ${r.outPath}`));
-    console.log('\nText files are ready and opened for viewing!\n');
+    console.log(`Generated & copied to clipboard (${results.length} files).`);
     process.exit(0);
   }
 
   const result = generatePracticalFile(cleanArg, process.cwd());
   if (result) {
-    printBanner();
-    console.log(`✅ Generated: ${result.fileName}`);
-    console.log(`📍 Path:      ${result.outPath}`);
-    console.log(`\nText file has been created and opened! You can copy-paste the steps and components.`);
+    console.log(`Copied to clipboard: ${result.fileName}`);
     process.exit(0);
   } else {
-    console.log(`\nUnknown practical: "${arg}". Use 1, 2, 3, 4, 5, crud, or all.\n`);
+    console.log(`Unknown practical: ${arg} (use 1, 2, 3, 4, 5, crud, or all)`);
+    process.exit(1);
   }
 }
 
-// Interactive menu if no argument given
-printBanner();
-console.log('Select a practical to generate its text file (Setup Steps + Component Code):\n');
-
-const keys = ['1', '2', '3', '4', '5', 'crud'];
-keys.forEach(k => {
-  console.log(`  [${k}] ${practicalsData[k].title} -> (${practicalsData[k].fileName})`);
-});
-console.log('  [all]  Generate text files for ALL practicals');
-console.log('  [q]    Quit\n');
-
 const rl = readline.createInterface({
   input: process.stdin,
   output: process.stdout
 });
 
-rl.question('Enter your choice (1-5, crud, all): ', (answer) => {
+rl.question('Select practical (1, 2, 3, 4, 5, crud, all): ', (answer) => {
   rl.close();
   const choice = answer.trim().toLowerCase().replace(/^p/, '');
 
-  if (choice === 'q') {
-    console.log('Goodbye!');
-    process.exit(0);
-  }
-
   if (choice === 'all') {
     const results = generateAllFiles(process.cwd());
-    console.log(`\n🎉 Successfully generated ${results.length} files:\n`);
-    results.forEach(r => console.log(`  📄 ${r.fileName}`));
-    console.log('\nText files created and opened!\n');
+    console.log(`Generated & copied to clipboard (${results.length} files).`);
     return;
   }
 
   const res = generatePracticalFile(choice, process.cwd());
   if (res) {
-    console.log(`\n✅ Generated: ${res.fileName}`);
-    console.log(`📍 Location:  ${res.outPath}`);
-    console.log('\nText file created and opened!\n');
+    console.log(`Copied to clipboard: ${res.fileName}`);
   } else {
-    console.log('\nInvalid selection. Run command again.\n');
+    console.log('Invalid selection.');
   }
 });

package/lib/generator.js

@@ -1,21 +1,15 @@
 const fs = require('fs');
 const path = require('path');
-const { exec } = require('child_process');
+const { exec, spawn } = require('child_process');
 const practicalsData = require('./practicalsData');
 
 function formatPracticalText(practical) {
   let output = '';
 
-  // Title
-  output += `${practical.title.toUpperCase()}\n`;
-  output += `\n\n\n\n`;
-
-  // Setup Section
   output += `SETUP:\n\n`;
   output += `${practical.setupSteps.trim()}\n`;
   output += `\n\n\n\n\n`;
 
-  // Components Section
   output += `COMPONENTS:\n\n\n`;
 
   practical.components.forEach((comp) => {
@@ -28,6 +22,27 @@ function formatPracticalText(practical) {
   return output;
 }
 
+function copyToClipboard(text) {
+  const platform = process.platform;
+  try {
+    let proc;
+    if (platform === 'darwin') {
+      proc = spawn('pbcopy');
+    } else if (platform === 'win32') {
+      proc = spawn('clip');
+    } else {
+      proc = spawn('xclip', ['-selection', 'clipboard']);
+    }
+
+    if (proc && proc.stdin) {
+      proc.stdin.write(text);
+      proc.stdin.end();
+    }
+  } catch (err) {
+    // Ignore clipboard errors if running in non-desktop/CI env
+  }
+}
+
 function openFile(filePath) {
   const platform = process.platform;
   let cmd = '';
@@ -53,6 +68,8 @@ function generatePracticalFile(idOrKey, targetDir = process.cwd()) {
   const content = formatPracticalText(practical);
   const outPath = path.join(targetDir, practical.fileName);
   fs.writeFileSync(outPath, content, 'utf8');
+
+  copyToClipboard(content);
   openFile(outPath);
 
   return {
@@ -68,15 +85,25 @@ function generateAllFiles(targetDir = process.cwd()) {
   let combinedText = '';
 
   for (const key of Object.keys(practicalsData)) {
-    const res = generatePracticalFile(key, targetDir);
-    if (res) {
-      generated.push(res);
-      combinedText += res.content + `\n\n\n\n\n\n`;
-    }
+    const practical = practicalsData[key];
+    const content = formatPracticalText(practical);
+    const outPath = path.join(targetDir, practical.fileName);
+    fs.writeFileSync(outPath, content, 'utf8');
+
+    generated.push({
+      fileName: practical.fileName,
+      outPath,
+      content,
+      title: practical.title
+    });
+
+    combinedText += content + `\n\n\n\n\n\n`;
   }
 
   const combinedPath = path.join(targetDir, 'all-practicals.txt');
   fs.writeFileSync(combinedPath, combinedText, 'utf8');
+
+  copyToClipboard(combinedText);
   openFile(combinedPath);
 
   generated.push({
@@ -91,6 +118,7 @@ function generateAllFiles(targetDir = process.cwd()) {
 module.exports = {
   practicalsData,
   formatPracticalText,
+  copyToClipboard,
   generatePracticalFile,
   generateAllFiles,
   openFile

package/lib/practicalsData.js

@@ -2,22 +2,21 @@ 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)',
+    title: 'Practical 1',
     setupSteps: `1. Run:
    npm create vue@latest my-vue-p1
 
-2. Terminal Prompts:
-   Select No to all options (TypeScript, Router, Pinia, Vitest, ESLint, Prettier).
+2. Prompts:
+   Select No to all options.
 
 3. cd my-vue-p1
    npm install
 
 4. npm run dev
-   (App runs on http://localhost:5173)
 
-5. Files to create/update:
+5. Files:
    - Create src/users.json
-   - Replace src/App.vue with the code below.`,
+   - Replace src/App.vue with code below.`,
     components: [
       {
         name: 'users.json',
@@ -59,7 +58,7 @@ function handleLogout() {
 
 <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 -->
+    <!-- 1. v-if / v-else: Toggle between Login Screen and Dashboard -->
     <div v-if="!currentUser">
       <h2>System Login</h2>
       <!-- 2. v-model: Two-way input binding -->
@@ -97,11 +96,11 @@ function handleLogout() {
   '2': {
     id: '2',
     fileName: 'practical-2.txt',
-    title: 'Practical 2: Data Binding (Props and Emits)',
+    title: 'Practical 2',
     setupSteps: `1. Run:
    npm create vue@latest my-vue-p2
 
-2. Terminal Prompts:
+2. Prompts:
    Select No to all options.
 
 3. cd my-vue-p2
@@ -109,9 +108,9 @@ function handleLogout() {
 
 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).`,
+5. Files:
+   - Create src/DriverCard.vue
+   - Replace src/App.vue with code below.`,
     components: [
       {
         name: 'DriverCard.vue',
@@ -200,26 +199,26 @@ function addDriver() {
   '3': {
     id: '3',
     fileName: 'practical-3.txt',
-    title: 'Practical 3: Document Upload & Preview System (Vue 3 + Express + Multer)',
-    setupSteps: `Backend Setup:
+    title: 'Practical 3',
+    setupSteps: `Backend:
 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.
+4. Create server.js and paste code below.
 5. node server.js
    (Runs on http://localhost:5000)
 
-Frontend Setup:
-1. In a new terminal:
+Frontend:
+1. In another 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.`,
+4. Replace frontend/src/App.vue with code below.`,
     components: [
       {
-        name: 'server.js (Backend)',
+        name: 'server.js',
         path: 'backend/server.js',
         code: `const express = require('express');
 const multer = require('multer');
@@ -283,7 +282,7 @@ app.delete('/api/documents/:id', (req, res) => {
 app.listen(5000, () => console.log('Backend running on http://localhost:5000'));`
       },
       {
-        name: 'App.vue (Frontend)',
+        name: 'App.vue',
         path: 'frontend/src/App.vue',
         code: `<script setup>
 import { ref, onMounted } from 'vue'
@@ -359,23 +358,24 @@ onMounted(fetchDocuments)
   '4': {
     id: '4',
     fileName: 'practical-4.txt',
-    title: 'Practical 4: Localized State Management (Pinia Multi-Step Form)',
-    setupSteps: `Frontend Setup:
+    title: 'Practical 4',
+    setupSteps: `Frontend:
 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.
+4. Create src/store.js
+   Replace src/App.vue with code below.
 
-Backend Setup (MongoDB):
+Backend:
 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.
+4. Create server.js and paste code below.
 5. node server.js`,
     components: [
       {
-        name: 'store.js (Pinia Store)',
+        name: 'store.js',
         path: 'frontend/src/store.js',
         code: `import { defineStore } from 'pinia'
 
@@ -418,7 +418,7 @@ export const useApplicationStore = defineStore('application', {
 })`
       },
       {
-        name: 'App.vue (Frontend)',
+        name: 'App.vue',
         path: 'frontend/src/App.vue',
         code: `<script setup>
 import { useApplicationStore } from './store.js'
@@ -476,7 +476,7 @@ const store = useApplicationStore()
 </template>`
       },
       {
-        name: 'server.js (Backend)',
+        name: 'server.js',
         path: 'backend/server.js',
         code: `const express = require('express');
 const mongoose = require('mongoose');
@@ -520,7 +520,7 @@ mongoose.connect(process.env.MONGO_URI || 'mongodb://localhost:27017/job_app_db'
   '5': {
     id: '5',
     fileName: 'practical-5.txt',
-    title: 'Practical 5: Routing in Nuxt and Shared Layouts',
+    title: 'Practical 5',
     setupSteps: `1. Run:
    npx nuxi@latest init nuxt-lab
 
@@ -533,7 +533,7 @@ mongoose.connect(process.env.MONGO_URI || 'mongodb://localhost:27017/job_app_db'
 3. cd nuxt-lab && npm run dev
    (Runs on http://localhost:3000)
 
-4. Create the following files inside app/ (or root):
+4. Create files inside app/ (or root):
    - app/app.vue
    - app/layouts/default.vue
    - app/layouts/minimal.vue
@@ -553,7 +553,7 @@ mongoose.connect(process.env.MONGO_URI || 'mongodb://localhost:27017/job_app_db'
 </template>`
       },
       {
-        name: 'default.vue (Shared Layout)',
+        name: 'default.vue',
         path: 'app/layouts/default.vue',
         code: `<!-- app/layouts/default.vue: Shared Layout with persistent header & footer -->
 <template>
@@ -578,7 +578,7 @@ mongoose.connect(process.env.MONGO_URI || 'mongodb://localhost:27017/job_app_db'
 </template>`
       },
       {
-        name: 'minimal.vue (Minimal Layout)',
+        name: 'minimal.vue',
         path: 'app/layouts/minimal.vue',
         code: `<!-- app/layouts/minimal.vue: Custom headerless layout -->
 <template>
@@ -591,7 +591,7 @@ mongoose.connect(process.env.MONGO_URI || 'mongodb://localhost:27017/job_app_db'
 </template>`
       },
       {
-        name: 'index.vue (Home Page)',
+        name: 'index.vue',
         path: 'app/pages/index.vue',
         code: `<!-- app/pages/index.vue: Root landing page (Route: /) -->
 <template>
@@ -603,7 +603,7 @@ mongoose.connect(process.env.MONGO_URI || 'mongodb://localhost:27017/job_app_db'
 </template>`
       },
       {
-        name: 'about.vue (About Page)',
+        name: 'about.vue',
         path: 'app/pages/about.vue',
         code: `<!-- app/pages/about.vue: Route: /about (uses minimal layout) -->
 <script setup>
@@ -621,7 +621,7 @@ definePageMeta({
 </template>`
       },
       {
-        name: 'items/index.vue (List Page)',
+        name: 'items/index.vue',
         path: 'app/pages/items/index.vue',
         code: `<!-- app/pages/items/index.vue: Route: /items -->
 <script setup>
@@ -647,7 +647,7 @@ const books = [
 </template>`
       },
       {
-        name: 'items/[id].vue (Dynamic Detail Page)',
+        name: 'items/[id].vue',
         path: 'app/pages/items/[id].vue',
         code: `<!-- app/pages/items/[id].vue: Dynamic Wildcard Route: /items/:id -->
 <script setup>
@@ -688,11 +688,11 @@ const book = books.find(b => b.id === bookId)
   'crud': {
     id: 'crud',
     fileName: 'practical-crud.txt',
-    title: 'Practical CRUD: Express + Mongoose REST API',
+    title: 'Practical CRUD',
     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.
+4. Create server.js and paste code below.
 5. node server.js
    (Runs on http://localhost:5000)`,
     components: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fsdcats",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Absolute minimal exam code and setup steps generator for Vue 3, Pinia, Nuxt, and Mongoose CRUD",
   "main": "index.js",
   "bin": {

package/practical-1.txt

@@ -1,25 +1,19 @@
-PRACTICAL 1: VUE DIRECTIVES (V-IF/ELSE, V-SHOW, V-FOR, V-ON, V-MODEL)
-
-
-
-
 SETUP:
 
 1. Run:
    npm create vue@latest my-vue-p1
 
-2. Terminal Prompts:
-   Select No to all options (TypeScript, Router, Pinia, Vitest, ESLint, Prettier).
+2. Prompts:
+   Select No to all options.
 
 3. cd my-vue-p1
    npm install
 
 4. npm run dev
-   (App runs on http://localhost:5173)
 
-5. Files to create/update:
+5. Files:
    - Create src/users.json
-   - Replace src/App.vue with the code below.
+   - Replace src/App.vue with code below.
 
 
 
@@ -72,7 +66,7 @@ function handleLogout() {
 
 <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 -->
+    <!-- 1. v-if / v-else: Toggle between Login Screen and Dashboard -->
     <div v-if="!currentUser">
       <h2>System Login</h2>
       <!-- 2. v-model: Two-way input binding -->

package/practical-2.txt

@@ -1,14 +1,9 @@
-PRACTICAL 2: DATA BINDING (PROPS AND EMITS)
-
-
-
-
 SETUP:
 
 1. Run:
    npm create vue@latest my-vue-p2
 
-2. Terminal Prompts:
+2. Prompts:
    Select No to all options.
 
 3. cd my-vue-p2
@@ -16,9 +11,9 @@ SETUP:
 
 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).
+5. Files:
+   - Create src/DriverCard.vue
+   - Replace src/App.vue with code below.
 
 
 

package/practical-3.txt

@@ -1,26 +1,21 @@
-PRACTICAL 3: DOCUMENT UPLOAD & PREVIEW SYSTEM (VUE 3 + EXPRESS + MULTER)
-
-
-
-
 SETUP:
 
-Backend Setup:
+Backend:
 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.
+4. Create server.js and paste code below.
 5. node server.js
    (Runs on http://localhost:5000)
 
-Frontend Setup:
-1. In a new terminal:
+Frontend:
+1. In another 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.
+4. Replace frontend/src/App.vue with code below.
 
 
 
@@ -29,7 +24,7 @@ Frontend Setup:
 COMPONENTS:
 
 
-COMPONENT: server.js (Backend)
+COMPONENT: server.js
 PATH: backend/server.js
 
 const express = require('express');
@@ -97,7 +92,7 @@ app.listen(5000, () => console.log('Backend running on http://localhost:5000'));
 
 
 
-COMPONENT: App.vue (Frontend)
+COMPONENT: App.vue
 PATH: frontend/src/App.vue
 
 <script setup>

package/practical-4.txt

@@ -1,22 +1,18 @@
-PRACTICAL 4: LOCALIZED STATE MANAGEMENT (PINIA MULTI-STEP FORM)
-
-
-
-
 SETUP:
 
-Frontend Setup:
+Frontend:
 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.
+4. Create src/store.js
+   Replace src/App.vue with code below.
 
-Backend Setup (MongoDB):
+Backend:
 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.
+4. Create server.js and paste code below.
 5. node server.js
 
 
@@ -26,7 +22,7 @@ Backend Setup (MongoDB):
 COMPONENTS:
 
 
-COMPONENT: store.js (Pinia Store)
+COMPONENT: store.js
 PATH: frontend/src/store.js
 
 import { defineStore } from 'pinia'
@@ -73,7 +69,7 @@ export const useApplicationStore = defineStore('application', {
 
 
 
-COMPONENT: App.vue (Frontend)
+COMPONENT: App.vue
 PATH: frontend/src/App.vue
 
 <script setup>
@@ -135,7 +131,7 @@ const store = useApplicationStore()
 
 
 
-COMPONENT: server.js (Backend)
+COMPONENT: server.js
 PATH: backend/server.js
 
 const express = require('express');

package/practical-5.txt

@@ -1,8 +1,3 @@
-PRACTICAL 5: ROUTING IN NUXT AND SHARED LAYOUTS
-
-
-
-
 SETUP:
 
 1. Run:
@@ -17,7 +12,7 @@ SETUP:
 3. cd nuxt-lab && npm run dev
    (Runs on http://localhost:3000)
 
-4. Create the following files inside app/ (or root):
+4. Create files inside app/ (or root):
    - app/app.vue
    - app/layouts/default.vue
    - app/layouts/minimal.vue
@@ -47,7 +42,7 @@ PATH: app/app.vue
 
 
 
-COMPONENT: default.vue (Shared Layout)
+COMPONENT: default.vue
 PATH: app/layouts/default.vue
 
 <!-- app/layouts/default.vue: Shared Layout with persistent header & footer -->
@@ -76,7 +71,7 @@ PATH: app/layouts/default.vue
 
 
 
-COMPONENT: minimal.vue (Minimal Layout)
+COMPONENT: minimal.vue
 PATH: app/layouts/minimal.vue
 
 <!-- app/layouts/minimal.vue: Custom headerless layout -->
@@ -93,7 +88,7 @@ PATH: app/layouts/minimal.vue
 
 
 
-COMPONENT: index.vue (Home Page)
+COMPONENT: index.vue
 PATH: app/pages/index.vue
 
 <!-- app/pages/index.vue: Root landing page (Route: /) -->
@@ -109,7 +104,7 @@ PATH: app/pages/index.vue
 
 
 
-COMPONENT: about.vue (About Page)
+COMPONENT: about.vue
 PATH: app/pages/about.vue
 
 <!-- app/pages/about.vue: Route: /about (uses minimal layout) -->
@@ -131,7 +126,7 @@ definePageMeta({
 
 
 
-COMPONENT: items/index.vue (List Page)
+COMPONENT: items/index.vue
 PATH: app/pages/items/index.vue
 
 <!-- app/pages/items/index.vue: Route: /items -->
@@ -161,7 +156,7 @@ const books = [
 
 
 
-COMPONENT: items/[id].vue (Dynamic Detail Page)
+COMPONENT: items/[id].vue
 PATH: app/pages/items/[id].vue
 
 <!-- app/pages/items/[id].vue: Dynamic Wildcard Route: /items/:id -->

package/practical-crud.txt

@@ -1,14 +1,9 @@
-PRACTICAL CRUD: EXPRESS + MONGOOSE REST API
-
-
-
-
 SETUP:
 
 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.
+4. Create server.js and paste code below.
 5. node server.js
    (Runs on http://localhost:5000)