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.