PCIC: Skill for Cursor

Add a New Feature Module

Checklist

Copy this and track progress:

Feature: [name]
- [ ] 1. Backend model
- [ ] 2. Backend controller
- [ ] 3. Backend routes
- [ ] 4. Mount routes in server/src/index.js
- [ ] 5. Frontend React Query hook
- [ ] 6. Frontend components
- [ ] 7. Frontend page
- [ ] 8. Add route in client/src/App.jsx
- [ ] 9. Add sidebar nav item in App.jsx (if top-level page)

Step 1: Backend Model

Create server/src/models/FeatureName.js:

import mongoose from "mongoose";

const featureSchema = new mongoose.Schema(
  {
    // fields here
  },
  { timestamps: true }
);

export default mongoose.model("FeatureName", featureSchema);

Step 2: Backend Controller

Create server/src/controllers/featureController.js with named exports:

import Feature from "../models/Feature.js";

export const getAll = async (req, res) => {
  try {
    const items = await Feature.find().sort({ createdAt: -1 });
    res.json(items);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

Step 3: Backend Routes

Create server/src/routes/feature.js:

import { Router } from "express";
import { getAll, create } from "../controllers/featureController.js";
import auth from "../middleware/auth.js";
import roleGuard from "../middleware/roleGuard.js";

const router = Router();
router.get("/", auth, getAll);
router.post("/", auth, roleGuard("president", "pm"), create);
export default router;

Step 4: Mount in server/src/index.js

import featureRoutes from "./routes/feature.js";
app.use("/api/feature", featureRoutes);

Step 5: Frontend Hook

Create client/src/hooks/useFeature.js:

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import api from "@/api/axios";

export function useFeatures() {
  return useQuery({
    queryKey: ["features"],
    queryFn: async () => { const { data } = await api.get("/feature"); return data; },
  });
}

export function useCreateFeature() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async (payload) => { const { data } = await api.post("/feature", payload); return data; },
    onSuccess: () => qc.invalidateQueries({ queryKey: ["features"] }),
  });
}