crypto-panda/mern-vite icon
public
Published on 4/17/2025
crypto-panda/mern-vite

Rules

Rules for MERN Stack and Vite Applications

mern_stack_rules:

Architecture & Project Structure

  • Enforce a clear folder structure: src/models, src/controllers, src/routes, src/middleware, src/utils.
  • Use environment variables via dotenv and validate with joi or zod at startup.
  • Define Express app in app.js, separate server startup in server.js.
  • Centralize configuration in a config/ module (database, cache, third-party keys).

API & Routing

  • Follow RESTful conventions: map CRUD operations to HTTP verbs.
  • Use Express Router for modular route definitions; group by resource.
  • Implement input validation with joi or zod in middleware.
  • Standardize responses: { success: boolean, data: any, error?: string }.

Authentication & Security

  • Use JWT for auth; store secrets securely via environment variables.
  • Protect routes with auth middleware; allow role-based access controls.
  • Sanitize user input to prevent injection attacks (e.g., express-validator).
  • Apply security headers via helmet, enable CORS via cors.

Database Layer

  • Use Mongoose for MongoDB interactions; define strict schemas with TypeScript or JSDoc.
  • Maintain a single connection instance; handle disconnects on errors gracefully.
  • Implement soft deletes with a deletedAt timestamp field pattern.
  • Encapsulate database calls in service modules for testability.

Error Handling & Logging

  • Create a global error handler middleware catching sync and async errors.
  • Use custom Error classes (e.g., ValidationError, AuthError).
  • Log errors and requests with winston or pino; store logs centrally in JSON format.

Testing

  • Write unit tests for controllers/services using Jest and Supertest.
  • Mock external dependencies (DB, email) for isolated tests.
  • Enforce 80% coverage; run tests in CI pipelines.

General JavaScript Standards

  • Adhere to the Airbnb style guide; lint with ESLint and Prettier on save.
  • Use ES6+ features: async/await, destructuring, modules.
  • Avoid any in TypeScript; prefer strict typing and interfaces.

vite_app_rules:

Vite Configuration

  • Define aliases in vite.config.js under resolve.alias for @/components, @/utils.
  • Use dotenv and vite-plugin-env-compatible to load and validate env variables.
  • Optimize dependencies with optimizeDeps.include and exclude as needed.

React & Component Patterns

  • Use PascalCase for component filenames; index exports for simplicity.
  • Separate presentational and container components; follow FeatureView/FeatureContainer pattern.
  • Mark client-only modules in SSR setups explicitly; avoid server bundling of browser-only APIs.

Styling & CSS

  • Integrate Tailwind CSS via tailwind.config.cjs; use @apply sparingly in CSS modules.
  • Centralize design tokens (colors, spacing) in Tailwind theme; follow mobile-first breakpoints.
  • Use clsx for conditional classNames; avoid inline style objects.

State Management & Data Fetching

  • Use React Context for UI state (theme, modals); use Zustand or Redux Toolkit for complex stores.
  • Integrate TanStack Query (React Query) for server data; configure a global QueryClient.
  • Standardize query keys; handle staleTime and retry strategies.

Form Handling

  • Use React Hook Form with Zod for validation; integrate with UI library form components.
  • Show loading and error states using formState hooks.

UI Libraries & Plugins

  • Install UI components via npx shadcn-ui add [component]; override styles via className, not core files.
  • Implement dark mode toggles with next-themes or useTheme hooks.

Performance & Build Optimization

  • Enable code splitting via dynamic imports and React.lazy.
  • Use @vitejs/plugin-react-swc or similar for faster builds.
  • Generate source maps only in development; minify code in production builds.

Testing & Linting

  • Use Vitest for unit tests; mock modules with vi.mock.
  • Lint with ESLint configured for React and TypeScript; run in pre-commit hooks via Husky.