Add ESLint and Prettier configuration for frontend code quality

.github/workflows/eslint.yml

@@ -0,0 +1,31 @@
+name: ESLint
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  lint:
+    name: Run ESLint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install dependencies
+        run: |
+          cd frontend
+          npm ci
+
+      - name: Run ESLint
+        run: |
+          cd frontend
+          npm run lint:check 

frontend/.eslintrc.js

@@ -0,0 +1,90 @@
+module.exports = {
+    env: {
+      browser: true,
+      es2021: true,
+      node: true,
+      jest: true,
+    },
+    extends: [
+      'eslint:recommended',
+      'plugin:react/recommended',
+      'plugin:react-hooks/recommended',
+      'plugin:jsx-a11y/recommended',
+      'plugin:import/recommended',
+      'prettier', // Make sure this is always the last element in the array
+    ],
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+      ecmaVersion: 12,
+      sourceType: 'module',
+    },
+    plugins: ['react', 'react-hooks', 'jsx-a11y', 'import'],
+    settings: {
+      react: {
+        version: '17.0.2', // Specify your React version here
+      },
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx'],
+        },
+      },
+    },
+    rules: {
+      // General ESLint rules
+      'no-console': 'warn',
+      'no-unused-vars': 'warn',
+      'no-undef': 'error',
+      'no-var': 'error',
+      'prefer-const': 'error',
+
+      // React specific rules
+      'react/prop-types': 'off', // You can turn this on if using PropTypes
+      'react/react-in-jsx-scope': 'off', // Not needed in React 17+
+      'react/jsx-uses-react': 'off', // Not needed in React 17+
+      'react/jsx-key': 'error',
+      'react/jsx-no-target-blank': 'error',
+      'react/no-deprecated': 'error',
+
+      // React Hooks rules
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+
+      // JSX Accessibility rules
+      'jsx-a11y/anchor-is-valid': [
+        'error',
+        {
+          components: ['Link'],
+          specialLink: ['hrefLeft', 'hrefRight'],
+          aspects: ['invalidHref', 'preferButton'],
+        },
+      ],
+
+      // Import rules
+      'import/no-unresolved': 'error',
+      'import/named': 'error',
+      'import/namespace': 'error',
+      'import/default': 'error',
+      'import/export': 'error',
+      'import/order': [
+        'warn',
+        {
+          groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+          'newlines-between': 'always',
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+        },
+      ],
+    },
+    overrides: [
+      {
+        files: ['**/*.test.js', '**/*.test.jsx'],
+        env: {
+          jest: true,
+        },
+      },
+    ],
+  };

frontend/.prettierignore

@@ -0,0 +1,13 @@
+node_modules
+public
+**/**/public
+
+*.lock
+*.log
+*.test.ts
+
+.gitignore
+.npmignore
+.prettierignore
+.DS_Store
+.eslintignore

frontend/.prettierrc

@@ -0,0 +1,11 @@
+{
+    "semi": true,
+    "tabWidth": 2,
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "avoid",
+    "endOfLine": "lf"
+}