mongoose-cta 1.0.0

package/install.js

@@ -0,0 +1,29 @@
+
+const fs = require('fs');
+const path = require('path');
+
+const targetDir = process.env.INIT_CWD || process.cwd();
+const templateDir = path.join(__dirname, 'template');
+
+function copyRecursiveSync(src, dest) {
+  const exists = fs.existsSync(src);
+  const stats = exists && fs.statSync(src);
+  const isDirectory = exists && stats.isDirectory();
+  if (isDirectory) {
+    if (!fs.existsSync(dest)) fs.mkdirSync(dest);
+    fs.readdirSync(src).forEach((childItemName) => {
+      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName));
+    });
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+}
+
+console.log('Dropping ticketing app files into ' + targetDir);
+try {
+  copyRecursiveSync(templateDir, targetDir);
+  console.log('App scaffolded successfully!');
+} catch (e) {
+  console.error('Error copying files:', e);
+}
+  

package/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "mongoose-cta",
+  "version": "1.0.0",
+  "description": "Scaffolds a full MERN ticketing application.",
+  "main": "install.js",
+  "scripts": {
+    "postinstall": "node install.js"
+  },
+  "dependencies": {}
+}

package/template/backend/models/Ticket.js

@@ -0,0 +1,10 @@
+const mongoose = require('mongoose');
+const TicketSchema = new mongoose.Schema({
+  title: String,
+  description: String,
+  createdBy: String,
+  priority: { type: String, default: 'Low' },
+  status: { type: String, default: 'Open' },
+  createdAt: { type: Date, default: Date.now }
+});
+module.exports = mongoose.model('Ticket', TicketSchema);

package/template/backend/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "mongoose": "^7.0.3"
+  }
+}

package/template/backend/routes/TicketRoutes.js

@@ -0,0 +1,38 @@
+const express = require('express');
+const Ticket = require('../models/Ticket');
+const router = express.Router();
+
+router.post('/', async (req, res) => {
+  try {
+    const ticket = new Ticket(req.body);
+    await ticket.save();
+    res.status(201).json(ticket);
+  } catch (err) {
+    res.status(400).json({ error: err.message });
+  }
+});
+
+router.get('/', async (req, res) => {
+  const tickets = await Ticket.find();
+  res.json(tickets);
+});
+
+router.patch('/:id', async (req, res) => {
+  try {
+    const updated = await Ticket.findByIdAndUpdate(req.params.id, req.body, { new: true });
+    res.json(updated);
+  } catch (err) {
+    res.status(400).json({ error: err.message });
+  }
+});
+
+router.delete('/:id', async (req, res) => {
+  try {
+    await Ticket.findByIdAndDelete(req.params.id);
+    res.json({ message: 'Deleted' });
+  } catch (err) {
+    res.status(400).json({ error: err.message });
+  }
+});
+
+module.exports = router;

package/template/backend/server.js

@@ -0,0 +1,19 @@
+const express = require('express');
+const mongoose = require('mongoose');
+const cors = require('cors');
+const app = express();
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// Connect to MongoDB
+mongoose.connect('mongodb://127.0.0.1:27017/ticketDB')
+  .then(() => console.log('MongoDB Connected...'))
+  .catch(err => console.log(err));
+
+// Use the route
+const ticketRoute = require('./routes/TicketRoutes');
+app.use('/api/tickets', ticketRoute);
+
+app.listen(5000, () => console.log('Server is running on port 5000'));

package/template/frontend/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "axios": "^1.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/template/frontend/public/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Ticketing App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

package/template/frontend/src/App.js

@@ -0,0 +1,14 @@
+import React from "react"; 
+import TicketForm from "./components/TicketForm"; 
+import TicketList from "./components/TicketList"; 
+
+function App() { 
+  return (
+    <div className="App" style={{ padding: '20px' }}> 
+      <TicketForm /> 
+      <TicketList /> 
+    </div>
+  ); 
+} 
+
+export default App;

package/template/frontend/src/components/TicketForm.css

@@ -0,0 +1,50 @@
+.ticket-form { 
+  max-width: 400px; 
+  margin: auto; 
+  padding: 25px; 
+  background: white; 
+  border-radius: 12px; 
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
+  font-family: Arial, sans-serif; 
+} 
+.ticket-form h2 { 
+  text-align: center; 
+  margin-bottom: 20px; 
+} 
+.form-group { 
+  display: flex; 
+  flex-direction: column; 
+  margin-bottom: 15px; 
+} 
+.form-group label { 
+  margin-bottom: 6px; 
+  font-weight: bold; 
+  font-size: 14px; 
+} 
+.form-group input, 
+.form-group textarea, 
+.form-group select { 
+  padding: 8px 10px; 
+  font-size: 14px; 
+  border-radius: 6px; 
+  border: 1px solid #ccc; 
+  width: 100%; 
+  box-sizing: border-box; 
+} 
+.form-group textarea { 
+  resize: vertical; 
+  min-height: 80px; 
+} 
+.submit-btn { 
+  background-color: #007bff; 
+  color: white; 
+  font-size: 16px; 
+  border: none; 
+  padding: 10px; 
+  border-radius: 6px; 
+  cursor: pointer; 
+  width: 100%; 
+} 
+.submit-btn:hover { 
+  background-color: #0056b3; 
+}

package/template/frontend/src/components/TicketForm.js

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'; 
+import axios from 'axios'; 
+import './TicketForm.css'; 
+
+function TicketForm() { 
+  const [form, setForm] = useState({ 
+    title: '', 
+    description: '', 
+    priority: '', 
+    createdBy: '' 
+  }); 
+
+  const handleChange = (e) => { 
+    setForm({ ...form, [e.target.name]: e.target.value }); 
+  }; 
+
+  const handleSubmit = async (e) => { 
+    e.preventDefault(); 
+    try { 
+      await axios.post('http://localhost:5000/api/tickets', form); 
+      alert('Ticket created'); 
+      setForm({ title: '', description: '', priority: '', createdBy: '' }); 
+      window.dispatchEvent(new Event('ticketCreated')); 
+    } catch (error) { 
+      alert('Error creating ticket. Please try again'); 
+      console.error(error); 
+    } 
+  }; 
+
+  return ( 
+    <div className="ticket-form"> 
+      <h2>Ticket Tracker</h2> 
+      <form onSubmit={handleSubmit}> 
+        <div className='form-group'> 
+          <label htmlFor="title">Title:</label> 
+          <input type="text" id="title" name="title" value={form.title} onChange={handleChange} required /> 
+          
+          <label htmlFor="description">Description:</label> 
+          <textarea name="description" id="description" value={form.description} onChange={handleChange} required /> 
+          
+          <label htmlFor="priority">Priority:</label> 
+          <select name="priority" value={form.priority} onChange={handleChange} required> 
+            <option value="">Select</option> 
+            <option value="Low">Low</option> 
+            <option value="Medium">Medium</option> 
+            <option value="High">High</option> 
+          </select> 
+          
+          <label htmlFor="createdBy">Your Name:</label> 
+          <input type="text" name="createdBy" id="createdBy" value={form.createdBy} onChange={handleChange} required /> 
+          
+          <button type="submit" className="submit-btn">Create Ticket</button> 
+        </div> 
+      </form> 
+    </div> 
+  ); 
+} 
+export default TicketForm;

package/template/frontend/src/components/TicketList.css

@@ -0,0 +1,76 @@
+.ticket-list-container { 
+  max-width: 800px; 
+  margin: 40px auto; 
+  padding: 20px; 
+  font-family: Arial, sans-serif; 
+} 
+.ticket-list-container h2 { 
+  text-align: center; 
+  margin-bottom: 30px; 
+  color: #333; 
+} 
+.ticket-card { 
+  background-color: #fefefe; 
+  border: 1px solid #ddd; 
+  border-radius: 12px; 
+  padding: 20px; 
+  margin-bottom: 20px; 
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); 
+} 
+.ticket-card h3 { 
+  margin-top: 0; 
+  color: #007bff; 
+} 
+.ticket-card p { 
+  margin: 8px 0; 
+  color: #555; 
+} 
+.ticket-buttons { 
+  margin-top: 15px; 
+  display: flex; 
+  gap: 10px; 
+  flex-wrap: wrap; 
+} 
+.ticket-buttons button { 
+  padding: 10px 14px; 
+  border: none; 
+  border-radius: 8px; 
+  cursor: pointer; 
+  font-size: 14px; 
+  transition: background-color 0.2s ease; 
+} 
+.ticket-buttons button:hover { 
+  opacity: 0.9; 
+} 
+.ticket-buttons button:nth-child(1) { 
+  background-color: #ffc107; 
+  color: #000; 
+} 
+.ticket-buttons button:nth-child(2) { 
+  background-color: #28a745; 
+  color: white; 
+} 
+.ticket-buttons .delete-btn { 
+  background-color: #dc3545; 
+  color: white; 
+} 
+.status-badge { 
+  padding: 5px 10px; 
+  border-radius: 20px; 
+  font-size: 12px; 
+  font-weight: bold; 
+  display: inline-block; 
+  margin-left: 5px; 
+} 
+.status-open { 
+  background-color: #007bff; 
+  color: white; 
+} 
+.status-in-progress { 
+  background-color: #ffc107; 
+  color: #000; 
+} 
+.status-resolved { 
+  background-color: #28a745; 
+  color: white; 
+}

package/template/frontend/src/components/TicketList.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react'; 
+import axios from 'axios'; 
+import './TicketList.css'; 
+
+function TicketList() { 
+  const [tickets, setTickets] = useState([]); 
+
+  const fetchTickets = async () => { 
+    try { 
+      const res = await axios.get('http://localhost:5000/api/tickets'); 
+      setTickets(res.data); 
+    } catch (error) { 
+      console.error('Error fetching tickets:', error);
+    } 
+  };   
+
+  const updateStatus = async (id, newStatus) => { 
+    try { 
+      await axios.patch(`http://localhost:5000/api/tickets/${id}`, { status: newStatus }); 
+      setTickets(prevTickets => 
+        prevTickets.map(ticket => 
+          ticket._id === id ? { ...ticket, status: newStatus } : ticket 
+        ) 
+      ); 
+    } catch (error) { 
+      alert('Error updating ticket.'); 
+    } 
+  }; 
+
+  const deleteTicket = async (id) => { 
+    try { 
+      await axios.delete(`http://localhost:5000/api/tickets/${id}`); 
+      setTickets(prevTickets => prevTickets.filter(ticket => ticket._id !== id)); 
+    } catch (error) { 
+      alert('Error deleting ticket.'); 
+    } 
+  }; 
+
+  useEffect(() => { 
+    fetchTickets(); 
+    window.addEventListener('ticketCreated', fetchTickets);   
+    return () => window.removeEventListener('ticketCreated', fetchTickets); 
+  }, []); 
+
+  return ( 
+    <div className="ticket-list-container"> 
+      <h2>Tickets</h2>   
+      {tickets.length === 0 && <p>No tickets found.</p>} 
+      <div className="ticket-list">       
+        {tickets.map((ticket) => ( 
+          <div key={ticket._id} className="ticket-card"> 
+            <h3>{ticket.title}</h3> 
+            <p>Priority: {ticket.priority}</p> 
+            <p>Status: {ticket.status}</p>            
+            <div className="ticket-buttons"> 
+              <button onClick={() => updateStatus(ticket._id, 'In Progress')}> 
+                In Progress 
+              </button> 
+              <button onClick={() => updateStatus(ticket._id, 'Resolved')}> 
+                Resolved 
+              </button> 
+              <button className="delete-btn" onClick={() => deleteTicket(ticket._id)}> 
+                Delete 
+              </button> 
+            </div> 
+          </div> 
+        ))} 
+      </div> 
+    </div> 
+  ); 
+} 
+export default TicketList;

package/template/frontend/src/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);