[Refactor] Enforce Code Quality with ESLint, Prettier, Husky, and Strict TypeScript Configuration

[KarenZita01]

Description

The eslint.config.mjs exists but is at the default Next.js configuration with no custom rules. The tsconfig.json has strict: true enabled, which is good, but there are no project-specific type safety patterns. Error-prone patterns like any, // @ts-ignore, and unsafe type assertions are not caught.

Code quality gaps:

• No ESLint rules for import ordering
• No naming conventions enforcement (camelCase for functions, PascalCase for components)
• No React-specific rules (hooks dependency array, JSX key)
• No TypeScript strictness beyond basic strict mode
• No barrel file linting (index.ts with many re-exports)
• No unused imports/variables enforcement
• No complexity limits (max lines per function, max params)
• No Prettier configuration for consistent formatting
• No Husky/lint-staged for pre-commit checks

Technical Context & Impact

• Affected Components/Files: eslint.config.mjs, tsconfig.json, .prettierrc (missing)
• Impact: Inconsistent code quality; preventable bugs reach production

Step-by-Step Implementation Guide

1. Enhance ESLint config: Update eslint.config.mjs with:
   • import/order - enforce import groups (external, internal, relative)
   • @typescript-eslint/no-unused-vars - error on unused variables
   • @typescript-eslint/no-explicit-any - warn on any usage
   • react-hooks/rules-of-hooks - error on hooks rule violations
   • react-hooks/exhaustive-deps - error on missing deps
   • no-console - warn on console.log in production
   • max-lines-per-function - warn over 100 lines
   • max-params - warn over 4 params
2. Add Prettier: Create .prettierrc with:
   • semi: true, singleQuote: true, trailingComma: 'es5'
   • printWidth: 100, tabWidth: 2
   • Organize imports on save: plugins: ['@trivago/prettier-plugin-sort-imports']
3. Install and configure Husky: npm install husky lint-staged:
   • pre-commit hook: lint-staged runs ESLint and Prettier on staged files
   • pre-push hook: npm run build and npm test
4. Add commitlint: commitlint.config.js enforcing Conventional Commits (feat, fix, chore, docs, refactor, test)
5. Configure TypeScript strictly: Add noUncheckedIndexedAccess, exactOptionalPropertyTypes, noImplicitOverride
6. Create VS Code workspace settings: .vscode/settings.json with format-on-save, default formatter
7. Add editorconfig: .editorconfig for cross-editor consistency
8. Fix all existing lint issues: Run npm run lint -- --fix and address remaining warnings

Verification & Testing Steps

1. Run npm run lint -> zero errors, zero warnings
2. Verify commit hook: commit with console.log -> hook blocks commit
3. Verify Prettier: save file -> automatically formatted
4. Test Conventional Commits: commit message fixed bug -> commitlint rejects
5. Run npx tsc --noEmit -> zero errors
6. Run full build: npm run build -> success