leblackstock Moola-Matic---Cursor .cursorrules file for JavaScript

{
  "Project Structure": {
    "rootDirectory": "The project root is at C:\\Users\\outdo\\OneDrive\\Desktop\\Reseller Inventory\\Moola-Matic - Cursor\\moola-matic_react. All file paths should be relative to this directory."
  },
  "New Coder Guidance": {
    "approach": "Recognize that the coder is new to development. Provide clear explanations, best practices, and helpful advice with each response.",
    "explanations": "Offer detailed explanations for complex concepts or code snippets. Break down information into digestible parts.",
    "bestPractices": "Suggest and explain industry best practices, focusing on code readability, maintainability, and efficiency.",
    "resources": "Recommend relevant documentation, tutorials, or articles for further learning when appropriate.",
    "codeExamples": "Provide practical code examples to illustrate concepts or solutions.",
    "encouragement": "Offer encouragement and positive reinforcement for good coding practices or problem-solving approaches.",
    "terminology": "Explain technical terms or jargon that might be unfamiliar to a new coder.",
    "debugging": "Guide through debugging processes, explaining common debugging techniques and tools.",
    "askQuestions": "Don't hesitate to ask clarifying questions to ensure the coder's needs are fully understood and addressed."
  },
  "OpenAI API": {
    "instructions": "Follow OpenAI's official guidelines for API integration to manage API keys, error handling, and rate limits. Use version 4.61.0 and `@web` for the latest features. Only modify the selected AI models if specifically requested."
  },
  "Multer": {
    "fileRouting": "Set up routes to manage file uploads and ensure files are saved to an appropriate location with error handling."
  },
  "Helmet": {
    "security": "Use Helmet for securing Express apps by setting various HTTP headers. Follow usage guidelines for CSP (Content Security Policy). Ensure that all middleware configurations are updated to prevent conflicts when adding security policies."
  },
  "CORS": {
    "configuration": "Configure CORS to allow requests from specific origins as needed for your application. Differentiate between configurations for development and production environments."
  },
  "express-session": {
    "sessionManagement": "Implement secure session management with express-session, ensuring session cookies are properly configured. Use a store like `connect-mongo` or `redis` for production environments for persistent session management."
  },
  "dotenv": {
    "environmentConfig": "Use dotenv to manage environment variables securely. Ensure all sensitive information is not hardcoded. Add `.env` to `.gitignore` to avoid exposing sensitive information in version control.",
    "file": ".env"
  },
  "axios": {
    "httpRequests": "Use Axios for making HTTP requests. Manage requests and responses with proper error handling."
  },
  "React Router": {
    "navigation": "Implement navigation using React Router for defining routes, including nested and dynamic routing, as needed for your application. Use `React.lazy()` for code splitting to improve performance."
  },
  "Styled Components": {
    "CSSinJS": "Use Styled Components as the primary styling method for dynamic and scoped styling. Leverage its theme support and component-based styles. All styles should be saved in `src/components/compStyles.js`."
  },
  "App.css": {
    "styling": "Use `src/App.css` as the secondary styling method for global styles and shared utility classes."
  },
  "Bootstrap": {
    "stylingFramework": "Use Bootstrap as the tertiary styling method for responsive design and pre-styled components, adhering to its grid system and utility classes for consistency."
  },
  "FontAwesome": {
    "icons": "Use FontAwesome for icons, ensuring that icons are loaded efficiently and styled appropriately."
  },
  "Webpack": {
    "bundling": "Use Webpack to bundle JavaScript modules, specifying entry points and outputs as well as loaders for handling different types of files. Include optimization plugins such as `TerserPlugin` or `BundleAnalyzerPlugin` for production builds to reduce bundle size."
  },
  "ESLint": {
    "linting": "Configure ESLint for code quality, with rules that enforce React best practices."
  },
  "Jest": {
    "testing": "Write unit tests for all components using Jest, ensuring key functionalities are covered. Use mocking libraries such as `msw` or `nock` for testing components that make HTTP requests."
  },
  "Error Handling": {
    "guidelines": "Implement centralized error handling to ensure all errors are captured and managed properly. Log errors effectively and provide user-friendly messages where appropriate."
  },
  "Logging": {
    "bestPractices": "For backend logging, use structured logging with Winston. For frontend logging, use console methods.",
    "backendLogging": {
      "setup": "In the backend, import Winston and create a logger instance with transports for logging to both files and the console.",
      "codeExample": "const winston = require('winston');\n\nconst logger = winston.createLogger({\n  level: 'info',\n  format: winston.format.combine(\n    winston.format.timestamp(),\n    winston.format.json()\n  ),\n  transports: [\n    new winston.transports.Console(),\n    new winston.transports.File({ filename: 'logs/app.log' })\n  ]\n});\n\nlogger.info('Backend application has started');\nlogger.error('A backend error occurred');"
    },
    "frontendLogging": {
      "usage": "In the frontend, use console methods for logging. Use appropriate log levels (error, warn, info, debug) to control the level of detail.",
      "codeExample": "console.info('Frontend application has started');\nconsole.error('A frontend error occurred');"
    }
  },
  "Code Consistency": {
    "namingConventions": "Maintain consistent naming conventions across the project. Use `camelCase` for variables and functions, and `PascalCase` for classes and components. Use tools like `prettier` for automatic formatting to enforce code style."
  },
  "Prettier": {
    "usage": "Use Prettier for consistent code formatting across the project.",
    "configuration": {
      "file": ".prettierrc",
      "rules": {
        "semi": true,
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 100,
        "tabWidth": 2,
        "useTabs": false,
        "bracketSpacing": true,
        "arrowParens": "avoid",
        "endOfLine": "lf"
      }
    },
    "integration": "Integrate Prettier with your IDE and set up a pre-commit hook to ensure all committed code is formatted.",
    "example": "// .prettierrc\n{\n  \"semi\": true,\n  \"trailingComma\": \"es5\",\n  \"singleQuote\": true,\n  \"printWidth\": 100,\n  \"tabWidth\": 2,\n  \"useTabs\": false,\n  \"bracketSpacing\": true,\n  \"arrowParens\": \"avoid\",\n  \"endOfLine\": \"lf\"\n}"
  },
  "Code Reviews": {
    "bestPractices": "During code reviews, ensure adherence to project guidelines, code quality, and best practices. Provide constructive feedback to improve the quality and maintainability of the codebase."
  },
  "General Guidelines": {
    "itemID": "Do not set a default itemId or create an itemId preemptively, as it is used to track items. The itemID should only be created after 'New Item' is clicked in App.js.",
    "codeEditing": "Do not remove any code, comments, or logging not directly related to the code being edited unless explicitly instructed."
  },
  "JavaScript Usage": {
    "preference": "Use JavaScript (.js) for all components and files.",
    "componentCreation": "Create React components using .js files only.",
    "propTypes": "Use PropTypes for type checking in development.",
    "noTypeScript": "This project does not use TypeScript. Do not create .ts or .tsx files, do not add type annotations, and do not use TypeScript-specific features. Stick to standard JavaScript and use JSDoc comments for documentation when necessary."
  },
  "Toast Notifications": {
    "usage": "Use react-toastify for displaying toast notifications. Configure toasts to be consistent across the application. Use 'success' for successful operations, 'error' for failures, 'info' for general information, and 'warning' for potential issues. Keep messages concise and user-friendly. Position toasts in the top-right corner by default.",
    "configuration": "Configure toast options globally in the main App component. Set default duration to 3000ms for success/info and 5000ms for error/warning messages. Use autoClose feature for automatic dismissal.",
    "example": "toast.success('Item saved successfully!', { position: 'top-right', autoClose: 3000 });"
  },
  "File System (fs) Module": {
    "usage": "Use the 'fs' module for file system operations in Node.js backend code. Prefer the promise-based 'fs/promises' API for better async handling and readability.",
    "import": "Import the fs/promises module using: import { promises as fs } from 'fs'",
    "promiseUsage": "When using promises, always use async/await syntax within try-catch blocks for cleaner and more readable code. Avoid mixing callbacks and promises.",
    "errorHandling": "Always use try-catch blocks to handle potential errors in file operations. Log errors and provide appropriate user feedback.",
    "security": "Validate and sanitize all file paths to prevent directory traversal attacks. Use path.join() or path.resolve() for constructing file paths.",
    "performance": "For large files, use streams instead of reading entire files into memory. This applies to both reading and writing operations.",
    "example": "import { promises as fs } from 'fs';\nimport path from 'path';\n\nasync function readFile(filename) {\n  try {\n    const filePath = path.join(__dirname, 'files', filename);\n    const data = await fs.readFile(filePath, 'utf8');\n    console.log(data);\n    return data;\n  } catch (error) {\n    console.error('Error reading file:', error);\n    throw error;\n  }\n}"
  }
}