MERN - SOP

Introduction & Overview

MERN Stack Version Compatibility

• Node.js version meets requirements (Node.js 20.x or later) - Check: .nvmrc, package.json (engines.node), or Dockerfile
• MongoDB version is compatible (MongoDB 6.0+ or Atlas) - Check: Connection string in .env, docker-compose.yml
• React version is current (React 18.x or later) - Check: package.json (dependencies.react)
• Express version is current (Express 4.x or later) - Check: package.json (dependencies.express)

Required Project Integrations

Essential Tools and Packages

• ESLint is installed and configured (code linting) - Check: package.json (devDependencies.eslint), .eslintrc.js or .eslintrc.json (root)
• Prettier is installed and configured (code formatting) - Check: package.json (devDependencies.prettier), .prettierrc or .prettierrc.json (root)
• TypeScript is configured (if using TypeScript) - Check: tsconfig.json (root), package.json (devDependencies.typescript)
• Environment configuration files (.env.example) are present and up to date - Check: .env.example (root)
• README.md file exists with project setup instructions - Check: README.md (root)
• .gitignore file is properly configured for Node.js - Check: .gitignore (root, should include node_modules, .env, dist, build)
• package.json scripts are properly configured - Check: package.json (scripts section)

Configuration Requirements

• Environment variables are properly configured - Check: .env (root), .env.example (should document all required variables)
• MongoDB connection is configured - Check: .env (MONGODB_URI or DATABASE_URL), config/database.js or src/config/db.js
• CORS is configured for API - Check: server.js or src/index.js (CORS middleware), config/cors.js
• Error handling middleware is set up - Check: middleware/errorHandler.js or src/middleware/errorHandler.js
• Security middleware is configured (helmet, rate limiting) - Check: package.json (dependencies), server.js or src/index.js
• JWT authentication is configured (if using) - Check: config/jwt.js or .env (JWT_SECRET), middleware/auth.js

Tool Installation and Configuration

1. ESLint Installation and Setup
2. Prettier Installation and Setup
3. TypeScript Configuration (if using TypeScript)
4. Pre-commit Hooks Setup (Using Husky)

Code Standards Compliance Checklist

Code Formatting

• All code is formatted using Prettier - Check: Run npm run format:check, verify .prettierrc exists
• Code follows ESLint rules - Check: Run npm run lint, verify .eslintrc.js or .eslintrc.json exists
• No manual formatting inconsistencies exist - Check: Review changed files in PR, ensure consistent formatting
• Code passes automated formatting checks in CI/CD - Check: .github/workflows/ci.yml or .gitlab-ci.yml (Prettier/ESLint steps)

File Structure

• Backend code is organized in server/ or src/ directory - Check: Project root structure
• Frontend code is organized in client/ or src/ directory - Check: Project root structure
• API routes are organized in routes/ or src/routes/ - Check: routes/ or src/routes/ directory
• Models are organized in models/ or src/models/ - Check: models/ or src/models/ directory
• Components are organized in components/ or src/components/ - Check: components/ or src/components/ directory
• Utilities are organized in utils/ or src/utils/ - Check: utils/ or src/utils/ directory

Backend (Node.js/Express) Standards

Express Application Structure

• Express app is properly initialized - Check: server.js or src/index.js
• Middleware is properly configured - Check: server.js or src/index.js (app.use() calls)
• Routes are separated into modules - Check: routes/ directory, route files should export router
• Controllers are separated from routes - Check: controllers/ directory, route files should import controllers
• Error handling middleware is at the end - Check: server.js or src/index.js (error handler after routes)

API Routes

• Routes use RESTful conventions - Check: routes/ files (GET, POST, PUT, DELETE methods)
• Route parameters are validated - Check: Route handlers, use express-validator or similar
• API responses follow consistent format - Check: Response structure in controllers
• Error responses are properly formatted - Check: Error handler middleware

Database (MongoDB)

• Mongoose models are properly defined - Check: models/ directory, schema definitions
• Models use proper validation - Check: Model schemas (required fields, validators)
• Database indexes are defined for frequently queried fields - Check: Model schemas (index definitions)
• Database connection is handled properly - Check: config/database.js or connection file
• Environment variables are used for connection strings - Check: .env (MONGODB_URI), not hardcoded

Security Practices

• Passwords are hashed (bcrypt or similar) - Check: Authentication controllers, password hashing before save
• JWT tokens are properly configured - Check: config/jwt.js, token generation/verification
• Input validation is performed on all endpoints - Check: Route handlers, use express-validator
• Rate limiting is implemented - Check: server.js or middleware (express-rate-limit)
• CORS is properly configured - Check: CORS middleware configuration
• Helmet.js is used for security headers - Check: package.json (dependencies.helmet), server.js
• Environment variables are not committed - Check: .gitignore includes .env

Frontend (React) Standards

Component Structure

• Components are functional components (or class if needed) - Check: components/ or src/components/ files
• Components are properly organized (by feature or type) - Check: components/ directory structure
• Props are properly typed (TypeScript or PropTypes) - Check: Component files, prop types/TypeScript interfaces
• Components follow single responsibility principle - Check: Component files, each component has one purpose

React Hooks

• useState is used for local state - Check: Component files, state management
• useEffect is used for side effects - Check: Component files, API calls, subscriptions
• Custom hooks are used for reusable logic - Check: hooks/ directory or src/hooks/
• Dependencies are properly listed in useEffect - Check: useEffect hooks, dependency arrays

State Management

• Context API or state management library is used appropriately - Check: context/ directory or Redux setup
• State is not unnecessarily lifted - Check: Component hierarchy, state placement
• Global state is only used when necessary - Check: Context/Redux usage, avoid overuse

API Integration

• API calls are made from service files or custom hooks - Check: services/ or api/ directory, custom hooks
• Error handling is implemented for API calls - Check: API service files, try-catch or .catch()
• Loading states are handled - Check: Component files, loading indicators
• API base URL is configured via environment variables - Check: .env (REACT_APP_API_URL), API service files

Naming Conventions Checklist

Backend Naming

• Files use camelCase (e.g., userController.js) - Check: File names in controllers/, models/, routes/
• Variables and functions use camelCase - Check: Code files
• Constants use UPPER_SNAKE_CASE - Check: config/ files, constants
• Database collections use plural, lowercase (e.g., users, orders) - Check: Model files, collection names

Frontend Naming

• Components use PascalCase (e.g., UserProfile.jsx) - Check: components/ directory
• Component files match component name - Check: Component file names
• Hooks use camelCase with "use" prefix (e.g., useAuth.js) - Check: hooks/ directory
• CSS modules or styled-components use appropriate naming - Check: Style files

Testing Standards Checklist

Test Structure

• Unit tests are placed in __tests__/ or .test.js files - Check: Test file locations
• Test files are co-located with source or in separate directory - Check: Project structure
• Tests use Jest or similar testing framework - Check: package.json (devDependencies), test scripts
• React components are tested with React Testing Library - Check: package.json (devDependencies.@testing-library/react)

Test Coverage

• Critical business logic has test coverage - Check: Test files, coverage reports
• API endpoints have integration tests - Check: tests/ or __tests__/ directory
• React components have unit tests - Check: Component test files
• Test coverage threshold is configured - Check: package.json (jest.coverageThreshold) or jest.config.js

Test Quality

• Test methods are descriptive - Check: Test files, test names
• Both positive and negative test cases are included - Check: Test files
• Tests are isolated and don't depend on each other - Check: Test setup, beforeEach/afterEach

Code Quality Tools Checklist

ESLint

• ESLint is installed and configured - Check: package.json (devDependencies.eslint), .eslintrc.js
• ESLint configuration is committed to version control - Check: .eslintrc.js or .eslintrc.json in repository
• ESLint runs in CI/CD pipeline - Check: .github/workflows/ci.yml or .gitlab-ci.yml

Prettier

• Prettier is installed and configured - Check: package.json (devDependencies.prettier), .prettierrc
• Prettier configuration is committed to version control - Check: .prettierrc in repository
• Prettier runs in CI/CD pipeline - Check: CI/CD configuration files

Pre-commit Hooks

• Pre-commit hooks are configured - Check: .husky/pre-commit file
• Pre-commit hooks run linting and formatting - Check: .husky/pre-commit content
• Pre-commit hook configuration is version controlled - Check: .husky/ directory in repository

Documentation Standards Checklist

README Requirements

• README.md file exists in project root - Check: README.md (root directory)
• README includes installation instructions - Check: README.md (should have npm install steps)
• README includes environment setup instructions - Check: README.md (should mention .env setup)
• README includes how to run the application - Check: README.md (should mention npm start, npm run dev)
• README includes how to run tests - Check: README.md (should mention npm test)
• README includes how to run code quality tools - Check: README.md (should mention npm run lint, npm run format)

Code Documentation

• Environment variables are documented in .env.example - Check: .env.example (should have comments)