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

Rules
mern-vite
# 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.
```