chore(deps): upgrade sharp to v0.34.5, add @types/bun, remove @types/node

Also adds DOCKER_BUILD env variable in prepare for moving out from github workflows

.dockerignore

@@ -0,0 +1,134 @@
+############################################################
+# Production-ready .dockerignore for a Next.js app
+# Keeps Docker builds fast, lean, and free of development files.
+############################################################
+
+# Dependencies (installed inside Docker, never copied)
+node_modules/
+.pnpm-store/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Next.js build outputs (always generated during `next build`)
+.next/
+out/
+dist/
+build/
+.vercel/
+
+# Tests and testing output (not needed in production images)
+coverage/
+.nyc_output/
+__tests__/
+__mocks__/
+jest/
+cypress/
+cypress/screenshots/
+cypress/videos/
+playwright-report/
+test-results/
+.vitest/
+vitest.config.*
+jest.config.*
+cypress.config.*
+playwright.config.*
+*.test.*
+*.spec.*
+
+# Local development and editor files
+.git/
+.gitignore
+.gitattributes
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+*.log
+
+# Environment variables (only commit template files)
+.env
+.env*.local
+.env.development
+.env.test
+.env.production.local
+
+# Docker configuration files (not needed inside build context)
+Dockerfile*
+.dockerignore
+compose.yaml
+compose.yml
+docker-compose*.yaml
+docker-compose*.yml
+
+# Documentation
+*.md
+docs/
+
+# CI/CD configuration files
+.github/
+.gitlab-ci.yml
+.travis.yml
+.circleci/
+Jenkinsfile
+
+# Cache directories and temporary data
+.cache/
+.parcel-cache/
+.eslintcache
+.stylelintcache
+.swc/
+.turbo/
+.tmp/
+.temp/
+
+# TypeScript build metadata
+*.tsbuildinfo
+
+# Sensitive or unnecessary configuration files
+*.pem
+.editorconfig
+.prettierrc*
+prettier.config.*
+.eslintrc*
+eslint.config.*
+.stylelintrc*
+stylelint.config.*
+.babelrc*
+*.iml
+*.ipr
+*.iws
+
+# OS-specific junk
+.DS_Store
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+Desktop.ini
+
+# AI/ML tool metadata and configs
+.cursor/
+.cursorrules
+.copilot/
+.copilotignore
+.github/copilot/
+.gemini/
+.anthropic/
+.kiro
+.claude
+AGENTS.md
+.agents/
+
+# AI-generated temp files
+*.aider*
+*.copilot*
+*.chatgpt*
+*.claude*
+*.gemini*
+*.openai*
+*.anthropic*

.env.example

@@ -1,7 +1,3 @@
-#  App variables
-
-SITE_NAME="EntGamers"
-
 # Deployment variables
 
 APP_NAME=""
@@ -23,5 +19,6 @@ APPWRITE_API_KEY=""
 
 # Website Variables
 
+SITE_NAME="EntGamers"
 NEXT_PUBLIC_SITE_URL="https://entgamers.com"
 IMAGE_DOMAINS="https://domain.com,http://another.domain.com/route/"

.eslintignore

@@ -1 +0,0 @@
-src/styled-system

.eslintrc.json

@@ -1,55 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "node": true
-  },
-  "extends": [
-    "next/core-web-vitals",
-    "standard-with-typescript",
-    "plugin:react/recommended"
-  ],
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": [
-    "react"
-  ],
-  "rules": {
-    "react/react-in-jsx-scope": "off",
-    "react/jsx-uses-react": "off",
-    "indent": "off",
-    "@typescript-eslint/indent": [
-      "error",
-      2,
-      {
-        "SwitchCase": 1
-      }
-    ],
-    "react/jsx-indent": [
-      "error",
-      2
-    ],
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": [
-      "error"
-    ],
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_"
-      }
-    ],
-    "react-hooks/exhaustive-deps": "off",
-    "react/no-unknown-property": [
-      "error",
-      {
-        "ignore": [
-          "css"
-        ]
-      }
-    ]
-  }
-}

.github/workflows/deploy-preview.yml

@@ -1,33 +0,0 @@
-name: CI deploy preview
-on:
-  push:
-    branches: ["preview"]
-  workflow_dispatch:
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    environment: preview
-    steps:
-      - uses: actions/checkout@v3
-      - uses: oven-sh/setup-bun@v1
-      - uses: kielabokkie/ssh-key-and-known-hosts-action@v1
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-          ssh-host: ${{ secrets.DEPLOY_HOST }}
-      - name: Install pm2
-        run: bun install pm2 -g
-        shell: bash
-      - name: Deploy using pm2
-        run: pm2 deploy ecosystem.config.js preview
-        env:
-          # Deploy environment variables
-          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
-          SSH_USERNAME: ${{ secrets.SSH_USERNAME }}
-          DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
-          # App environment variables
-          APP_NAME: ${{ secrets.APP_NAME }}
-          SITE_NAME: ${{ secrets.SITE_NAME }}
-          PORT: ${{ secrets.PORT }}
-          DISCORD_JOIN_WEBHOOK_URL: ${{ secrets.DISCORD_JOIN_WEBHOOK_URL }}
-        shell: bash

.github/workflows/deploy-production.yml

@@ -1,33 +0,0 @@
-name: CI deploy production
-on:
-  push:
-    branches: ["production"]
-  workflow_dispatch:
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    environment: production
-    steps:
-      - uses: actions/checkout@v3
-      - uses: oven-sh/setup-bun@v1
-      - uses: kielabokkie/ssh-key-and-known-hosts-action@v1
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-          ssh-host: ${{ secrets.DEPLOY_HOST }}
-      - name: Install pm2
-        run: bun install pm2 -g
-        shell: bash
-      - name: Deploy using pm2
-        run: pm2 deploy ecosystem.config.js production
-        env:
-          # Deploy environment variables 
-          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
-          SSH_USERNAME: ${{ secrets.SSH_USERNAME }}
-          DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
-          # App environment variables
-          APP_NAME: ${{ secrets.APP_NAME }}
-          SITE_NAME: ${{ secrets.SITE_NAME }}
-          PORT: ${{ secrets.PORT }}
-          DISCORD_JOIN_WEBHOOK_URL: ${{ secrets.DISCORD_JOIN_WEBHOOK_URL }}
-        shell: bash

.github/workflows/setup-preview.yml

@@ -1,31 +0,0 @@
-name: CI setup preview
-on:
-  workflow_dispatch:
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    environment: preview
-    steps:
-      - uses: actions/checkout@v3
-      - uses: oven-sh/setup-bun@v1
-      - uses: kielabokkie/ssh-key-and-known-hosts-action@v1
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-          ssh-host: ${{ secrets.DEPLOY_HOST }}
-      - name: Install pm2
-        run: bun install pm2 -g
-        shell: bash
-      - name: Deploy using pm2
-        run: pm2 deploy ecosystem.config.js preview setup
-        env:
-          # Deploy environment variables
-          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
-          SSH_USERNAME: ${{ secrets.SSH_USERNAME }}
-          DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
-          # App environment variables
-          APP_NAME: ${{ secrets.APP_NAME }}
-          SITE_NAME: ${{ secrets.SITE_NAME }}
-          PORT: ${{ secrets.PORT }}
-          DISCORD_JOIN_WEBHOOK_URL: ${{ secrets.DISCORD_JOIN_WEBHOOK_URL }}
-        shell: bash

.github/workflows/setup-production.yml

@@ -1,31 +0,0 @@
-name: CI setup production
-on:
-  workflow_dispatch:
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    environment: production
-    steps:
-      - uses: actions/checkout@v3
-      - uses: oven-sh/setup-bun@v1
-      - uses: kielabokkie/ssh-key-and-known-hosts-action@v1
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-          ssh-host: ${{ secrets.DEPLOY_HOST }}
-      - name: Install pm2
-        run: bun install pm2 -g
-        shell: bash
-      - name: Deploy using pm2
-        run: pm2 deploy ecosystem.config.js production setup
-        env:
-          # Deploy environment variables 
-          DEPLOY_HOST: ${{ secrets.DEPLOY_HOST }}
-          SSH_USERNAME: ${{ secrets.SSH_USERNAME }}
-          DEPLOY_PATH: ${{ secrets.DEPLOY_PATH }}
-          # App environment variables
-          APP_NAME: ${{ secrets.APP_NAME }}
-          SITE_NAME: ${{ secrets.SITE_NAME }}
-          PORT: ${{ secrets.PORT }}
-          DISCORD_JOIN_WEBHOOK_URL: ${{ secrets.DISCORD_JOIN_WEBHOOK_URL }}
-        shell: bash

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit "${1}"
+bunx --no -- commitlint --edit "${1}"

.husky/install.mts

@@ -0,0 +1,9 @@
+// Skip Husky install in production and CI
+
+if (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {
+  process.exit(0)
+}
+
+const husky = (await import('husky')).default
+
+console.log(husky())

.husky/pre-commit

@@ -0,0 +1 @@
+bunx lint-staged --config lint-staged.config.ts

.husky/pre-push

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npm run lint

Dockerfile

@@ -0,0 +1,52 @@
+
+
+FROM oven/bun:1.3-alpine AS builder
+
+WORKDIR /app
+
+COPY . .
+
+ARG NEXT_PUBLIC_APPWRITE_ENDPOINT=""
+ARG NEXT_PUBLIC_APPWRITE_PROJECT_ID=""
+
+ARG SITE_NAME="EntGamers"
+ARG NEXT_PUBLIC_SITE_URL="https://entgamers.pro"
+ARG IMAGE_DOMAINS="https://api.entgamers.pro"
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV CI=1
+ENV HUSKY=0
+ENV DOCKER_BUILD="true"
+
+
+RUN bun install --frozen-lockfile
+
+RUN --mount=type=secret,id=APPWRITE_API_KEY,env=APPWRITE_API_KEY \
+NEXT_PUBLIC_APPWRITE_ENDPOINT=${NEXT_PUBLIC_APPWRITE_ENDPOINT} \
+NEXT_PUBLIC_APPWRITE_PROJECT_ID=${NEXT_PUBLIC_APPWRITE_PROJECT_ID} \
+SITE_NAME=${SITE_NAME} \
+NEXT_PUBLIC_SITE_URL=${NEXT_PUBLIC_SITE_URL} \
+IMAGE_DOMAINS=${IMAGE_DOMAINS} \
+bun run build
+
+
+FROM oven/bun:1.3-alpine AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+ENV NEXT_TELEMETRY_DISABLED=1
+
+COPY --from=builder --chown=bun:bun /app/public ./public
+COPY --from=builder --chown=bun:bun /app/.next/standalone ./
+COPY --from=builder --chown=bun:bun /app/.next/static ./.next/static
+
+
+USER bun
+
+EXPOSE 3000
+
+CMD ["bun", "server.js"]

commitlint.config.js

@@ -1 +0,0 @@
-module.exports = { extends: ['@commitlint/config-conventional'] }

commitlint.config.ts

@@ -0,0 +1,5 @@
+import type { UserConfig } from '@commitlint/types'
+
+const Configuration: UserConfig = { extends: ['@commitlint/config-conventional'] }
+
+export default Configuration

ecosystem.config.js

@@ -2,42 +2,55 @@ module.exports = {
   apps: [
     {
       name: process.env.APP_NAME || 'entgamers-website',
-      script: 'yarn',
+      script: 'bun',
       args: 'run start',
       env: {
         NODE_ENV: 'production',
         PORT: process.env.PORT || 3000,
-        DISCORD_JOIN_WEBHOOK_URL: process.env.DISCORD_JOIN_WEBHOOK_URL
+        NEXT_PUBLIC_APPWRITE_ENDPOINT: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT,
+        NEXT_PUBLIC_APPWRITE_PROJECT_ID: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID,
+        APPWRITE_API_KEY: process.env.APPWRITE_API_KEY,
+        SITE_NAME: process.env.SITE_NAME,
+        NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+        IMAGE_DOMAINS: process.env.IMAGE_DOMAINS
       }
     }
   ],
 
   deploy: {
     production: {
-      user: process.env.SSH_USERNAME,
-      host: process.env.DEPLOY_HOST,
-      ref: 'origin/production',
-      repo: 'https://github.com/SrJuggernaut/entgamers_pro',
-      path: process.env.DEPLOY_PATH,
+      'user': process.env.SSH_USERNAME,
+      'host': process.env.DEPLOY_HOST,
+      'ref': 'origin/production',
+      'repo': 'https://github.com/SrJuggernaut/entgamers_pro',
+      'path': process.env.DEPLOY_PATH,
       'post-deploy': 'pm2 --silent startOrRestart ecosystem.config.js',
-      env: {
-        APP_NAME: process.env.APP_NAME,
+      'env': {
         PORT: process.env.PORT,
-        DISCORD_JOIN_WEBHOOK_URL: process.env.DISCORD_JOIN_WEBHOOK_URL
+        NEXT_PUBLIC_APPWRITE_ENDPOINT: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT,
+        NEXT_PUBLIC_APPWRITE_PROJECT_ID: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID,
+        APPWRITE_API_KEY: process.env.APPWRITE_API_KEY,
+        SITE_NAME: process.env.SITE_NAME,
+        NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+        IMAGE_DOMAINS: process.env.IMAGE_DOMAINS
       }
 
     },
     preview: {
-      user: process.env.SSH_USERNAME,
-      host: process.env.DEPLOY_HOST,
-      ref: 'origin/preview',
-      repo: 'https://github.com/SrJuggernaut/entgamers_pro',
-      path: process.env.DEPLOY_PATH,
+      'user': process.env.SSH_USERNAME,
+      'host': process.env.DEPLOY_HOST,
+      'ref': 'origin/preview',
+      'repo': 'https://github.com/SrJuggernaut/entgamers_pro',
+      'path': process.env.DEPLOY_PATH,
       'post-deploy': 'pm2 --silent startOrRestart ecosystem.config.js',
-      env: {
-        APP_NAME: process.env.APP_NAME,
+      'env': {
         PORT: process.env.PORT,
-        DISCORD_JOIN_WEBHOOK_URL: process.env.DISCORD_JOIN_WEBHOOK_URL
+        NEXT_PUBLIC_APPWRITE_ENDPOINT: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT,
+        NEXT_PUBLIC_APPWRITE_PROJECT_ID: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID,
+        APPWRITE_API_KEY: process.env.APPWRITE_API_KEY,
+        SITE_NAME: process.env.SITE_NAME,
+        NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+        IMAGE_DOMAINS: process.env.IMAGE_DOMAINS
       }
     }
   }

eslint.config.mjs

@@ -0,0 +1,98 @@
+import eslintJs from '@eslint/js'
+import nextPlugin from '@next/eslint-plugin-next'
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y'
+import reactPlugin from 'eslint-plugin-react'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+import { defineConfig, globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+import stylisticPlugin from '@stylistic/eslint-plugin'
+
+export default defineConfig([
+  globalIgnores([
+    'node_modules/',
+    'public/', 'src/styled-system/**/*', '.next/**',
+    'out/**',
+    'build/**',
+    'next-env.d.ts']),
+
+  {
+    name: 'entgamers_pro/globals',
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    }
+  },
+  {
+    name: 'project/eslint-js',
+    files: ['**/*.{js,mjs,ts,tsx}'],
+    ...eslintJs.configs.recommended
+  },
+  {
+    name: 'project/typescript',
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      ...tseslint.configs.recommended
+    ],
+    rules: {
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }]
+    }
+  },
+  {
+    name: 'project/react-next',
+    files: ['**/*.{jsx,tsx}'],
+    plugins: {
+      'react': reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      'jsx-a11y': jsxA11yPlugin,
+      '@next/next': nextPlugin
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      ...reactPlugin.configs['jsx-runtime'].rules,
+      ...reactHooksPlugin.configs['recommended-latest'].rules,
+      ...jsxA11yPlugin.configs.strict.rules,
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs['core-web-vitals'].rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'react/no-unknown-property': 'off',
+      'react/jsx-no-target-blank': 'off',
+      'jsx-a11y/alt-text': ['warn', { elements: ['img'], img: ['Image'] }],
+      'jsx-a11y/media-has-caption': 'warn'
+    },
+    settings: {
+      react: {
+        version: '19'
+      }
+    }
+  },
+  {
+    name: 'project/stylistic',
+    files: ['**/*.{js,mjs,ts,tsx}'],
+    plugins: {
+      '@stylistic': stylisticPlugin
+    },
+    rules: {
+      // Remove legacy formatting rules from ESLint core
+      ...stylisticPlugin.configs['disable-legacy'].rules,
+      // Add recommended stylistic rules
+      ...stylisticPlugin.configs.recommended.rules,
+      '@stylistic/indent': ['warn', 2],
+      '@stylistic/quotes': ['warn', 'single', {
+        avoidEscape: true,
+        allowTemplateLiterals: 'always'
+      }],
+      '@stylistic/semi': ['warn', 'never'],
+      '@stylistic/comma-dangle': ['warn', 'never'],
+      '@stylistic/arrow-parens': ['warn', 'always', {
+        requireForBlockBody: true
+      }],
+      '@stylistic/brace-style': ['warn', '1tbs', {
+        allowSingleLine: true
+      }]
+    }
+  }
+])

lint-staged.config.ts

@@ -0,0 +1,7 @@
+import type { Configuration } from 'lint-staged'
+
+const config: Configuration = {
+  '*.{js,jsx,ts,tsx}': 'eslint --fix'
+}
+
+export default config

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.js

@@ -1,15 +0,0 @@
-const imageDomains = (process.env.IMAGE_DOMAINS ?? '').split(',').map(domain => {
-  const getDataRegex = /(?<protocol>[\w]+)?:\/\/(?<hostname>[\w.-]+)?((?<=[\d]{0,4}):(?<port>[\d]{0,4}))?\/?(?<pathname>.*)?$/
-  const groups = getDataRegex.exec(domain).groups ?? {}
-  return groups
-})
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  images: {
-    remotePatterns: imageDomains
-  }
-}
-
-module.exports = nextConfig

next.config.ts

@@ -0,0 +1,17 @@
+import type { NextConfig } from 'next'
+
+const imageDomains = (process.env.IMAGE_DOMAINS ?? '').split(',').map((domain) => {
+  return new URL(domain)
+})
+
+const IS_DOCKER_BUILD = process.env.DOCKER_BUILD === 'true'
+
+const nextConfig: NextConfig = {
+  output: IS_DOCKER_BUILD ? 'standalone' : undefined,
+  reactStrictMode: true,
+  images: {
+    remotePatterns: imageDomains
+  }
+}
+
+module.exports = nextConfig

package.json

@@ -5,56 +5,51 @@
   "scripts": {
     "develop": "next dev",
     "build": "next build",
-    "prestart": "bun install && next build",
     "start": "next start",
-    "lint": "next lint",
-    "prepare": "panda codegen && husky install"
+    "lint": "eslint .",
+    "prepare": "panda codegen && bun ./.husky/install.mts"
   },
   "dependencies": {
     "@fontsource/open-sans": "^5.0.20",
     "@fontsource/permanent-marker": "^5.0.8",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-brands-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/react-fontawesome": "^3.3.0",
     "@reduxjs/toolkit": "^2.0.1",
+    "@stylistic/eslint-plugin": "^5.10.0",
     "@tanstack/match-sorter-utils": "^8.11.8",
     "@tanstack/react-table": "^8.19.3",
     "appwrite": "^13.0.1",
-    "date-fns": "^3.3.1",
+    "date-fns": "^4.1.0",
     "entgamers-database": "0.0.26",
     "entgamers-panda-preset": "0.1.5",
     "formik": "^2.4.5",
-    "framer-motion": "^10.17.6",
+    "framer-motion": "^12.38.0",
     "isomorphic-fetch": "^3.0.0",
-    "next": "^14.0.4",
+    "lint-staged": "^16.4.0",
+    "next": "16.2.2",
     "node-appwrite": "^11.1.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "react-redux": "^9.0.4",
-    "sharp": "^0.33.1",
+    "sharp": "^0.34.5",
     "yup": "^1.3.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.4",
-    "@commitlint/config-conventional": "^18.4.4",
-    "@pandacss/dev": "^0.23.0",
+    "@commitlint/cli": "^20.5.0",
+    "@commitlint/config-conventional": "^20.5.0",
+    "@eslint/js": "^10.0.1",
+    "@pandacss/dev": "^1.9.1",
+    "@types/bun": "^1.3.11",
     "@types/isomorphic-fetch": "^0.0.39",
-    "@types/node": "^20.10.6",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.4.0",
-    "@typescript-eslint/parser": "^5.38.0",
-    "eslint": "^8.0.1",
-    "eslint-config-next": "latest",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-config-standard-with-typescript": "latest",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "latest",
-    "husky": "^8.0.3",
-    "typescript": "*"
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "eslint": "^10.1.0",
+    "eslint-config-next": "16.2.2",
+    "eslint-plugin-react": "^7.37.5",
+    "husky": "^9.1.7",
+    "typescript": "*",
+    "typescript-eslint": "^8.58.0"
   }
 }

src/app/Clanes.tsx

@@ -22,7 +22,7 @@ const Clanes: FC = () => {
         <div
           className={card({ variant: 'glass' }).content}
         >
-          <Typography variant="h2" align='center'>Clanes</Typography>
+          <Typography variant="h2" align="center">Clanes</Typography>
           <div
             className={css({
               display: 'grid',

src/app/FeedbackConsumer.tsx

@@ -9,11 +9,11 @@ import { alert } from '@/styled-system/recipes/alert'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { AnimatePresence, motion } from 'framer-motion'
-import { type FC } from 'react'
+import type { FC } from 'react'
 import { createPortal } from 'react-dom'
 
 const FeedbackConsumer: FC = () => {
-  const { alerts } = useAppSelector(state => state.feedback)
+  const { alerts } = useAppSelector((state) => state.feedback)
   const dispatch = useAppDispatch()
   return (
     <>
@@ -55,7 +55,7 @@ const FeedbackConsumer: FC = () => {
                       className={alert().closeButton}
                       onClick={() => dispatch(removeAlert(currentAlert.id))}
                     >
-                      <FontAwesomeIcon icon={faTimes} fixedWidth size='sm'/>
+                      <FontAwesomeIcon icon={faTimes} size="sm" />
                     </IconButton>
                     <Typography variant="h3" component="div">
                       {currentAlert.title}

src/app/Hero.tsx

@@ -111,20 +111,20 @@ const Hero: FC = () => {
           color: 'primary',
           size: 'large'
         }), css({
-          position: 'absolute',
-          bottom: '45px',
-          right: '50%',
-          animationName: 'bounce',
-          animationDuration: '1s',
-          animationIterationCount: 'infinite',
-          transform: 'translateX(50%)',
-          zIndex: 1,
+          'position': 'absolute',
+          'bottom': '45px',
+          'right': '50%',
+          'animationName': 'bounce',
+          'animationDuration': '1s',
+          'animationIterationCount': 'infinite',
+          'transform': 'translateX(50%)',
+          'zIndex': 1,
           '&:hover': {
             animationPlayState: 'paused'
           }
         }))}
       >
-        <FontAwesomeIcon icon={faArrowDown} size='lg' fixedWidth />
+        <FontAwesomeIcon icon={faArrowDown} size="lg" />
       </a>
     </section>
   )

src/app/SessionConsumer.tsx

@@ -5,7 +5,7 @@ import { setClanes, setCurrentUser, setSession, setStatus } from '@/state/sessio
 import { AppwriteException } from 'appwrite'
 import { getClanes } from 'entgamers-database/frontend/clanes'
 import { getCurrentUser, getSession } from 'entgamers-database/frontend/session'
-import { useCallback, useEffect, type FC } from 'react'
+import { type FC, useCallback, useEffect } from 'react'
 
 const SessionConsumer: FC = () => {
   const { status, session, user, clanes } = useAppSelector((state) => state.session)
@@ -13,7 +13,6 @@ const SessionConsumer: FC = () => {
 
   const ensureSession = useCallback(async () => {
     try {
-      if (status !== 'initializing' || session !== undefined) return
       dispatch(setStatus('loading'))
       const currentSession = await getSession('current')
       const currentUser = await getCurrentUser()
@@ -26,16 +25,17 @@ const SessionConsumer: FC = () => {
     } finally {
       dispatch(setStatus('idle'))
     }
-  }, [])
+  }, [dispatch])
 
   useEffect(() => {
+    if (status !== 'initializing' || session !== undefined) return
     ensureSession()
       .catch((error) => {
         if (error instanceof AppwriteException) {
           console.error(error)
         }
       })
-  }, [])
+  }, [status, session, ensureSession])
 
   useEffect(() => {
     if (user !== undefined && clanes === undefined) {
@@ -51,11 +51,7 @@ const SessionConsumer: FC = () => {
     } else if (user === undefined && clanes !== undefined) {
       dispatch(setClanes())
     }
-  }, [user])
-
-  return (
-    <>
-    </>
-  )
+  }, [user, clanes, dispatch])
+  return null
 }
 export default SessionConsumer

src/app/Social.tsx

@@ -52,7 +52,7 @@ const Social: FC = () => {
               <div
                 className={card({ variant: 'glass' }).content}
               >
-                <Typography variant="h2" align='center'>Redes Sociales</Typography>
+                <Typography variant="h2" align="center">Redes Sociales</Typography>
                 <Typography variant="body1">
                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate deleniti dolore quas sed nemo sit, officia in rem nesciunt quisquam possimus ab! Labore sed reprehenderit quae, hic earum tempora placeat cumque id eos itaque perferendis nulla officia fuga porro, quis, unde facere accusamus repudiandae non?
                 </Typography>

src/app/Team.tsx

@@ -84,7 +84,7 @@ const Team: FC = () => {
                       className={iconButton()}
                       href={socialNetwork.url}
                     >
-                      <FontAwesomeIcon icon={socialNetwork.icon} fixedWidth />
+                      <FontAwesomeIcon icon={socialNetwork.icon} />
                     </a>
                   ))}
                 </div>

src/app/clanes/page.tsx

@@ -3,7 +3,7 @@ import { css } from '@/styled-system/css'
 import { Container } from '@/styled-system/jsx'
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { type FC } from 'react'
+import type { FC } from 'react'
 
 const ClanesPage: FC = () => {
   return (
@@ -21,37 +21,78 @@ const ClanesPage: FC = () => {
           <Typography variant="h2">Beneficios de los clanes</Typography>
           <Typography variant="body1">La intención de EntGamers es brindar beneficios a los clanes que les permitan operar en un ambiente de comunicación y colaboración.</Typography>
           <ul className="fa-ul">
-            <li><FontAwesomeIcon icon={faChevronRight} listItem /> Espacio en el servidor de Discord.</li>
-            <li><FontAwesomeIcon icon={faChevronRight} listItem /> Apoyo de la administración con proyectos y eventos.</li>
-            <li><FontAwesomeIcon icon={faChevronRight} listItem /> Apoyo del equipo de moderación.</li>
+            <li>
+              <span className="fa-li"><FontAwesomeIcon icon={faChevronRight} /></span>
+              {' '}
+              Espacio en el servidor de Discord.
+            </li>
+            <li>
+              <span className="fa-li"><FontAwesomeIcon icon={faChevronRight} /></span>
+              {' '}
+              Apoyo de la administración con proyectos y eventos.
+            </li>
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              {' '}
+              Apoyo del equipo de moderación.
+            </li>
           </ul>
         </div>
         <div>
           <Typography variant="h2">Requisitos para formar un clan</Typography>
           <Typography variant="body1">Todos los clanes deben cumplir con los siguientes requisitos:</Typography>
           <ul className="fa-ul">
-            <li><FontAwesomeIcon icon={faChevronRight} listItem /> Tener un encargado.</li>
-            <li><FontAwesomeIcon icon={faChevronRight} listItem /> Fomentar el compañerismo y la comunidad.</li>
-            <li><FontAwesomeIcon icon={faChevronRight} listItem /> Aportar contenido de forma periódica para la comunidad.</li>
-            <li><FontAwesomeIcon icon={faChevronRight} listItem /> Realizar al menos una actividad mensual con los integrantes.</li>
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              {' '}
+              Tener un encargado.
+            </li>
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              {' '}
+              Fomentar el compañerismo y la comunidad.
+            </li>
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              {' '}
+              Aportar contenido de forma periódica para la comunidad.
+            </li>
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              {' '}
+              Realizar al menos una actividad mensual con los integrantes.
+            </li>
           </ul>
         </div>
       </div>
       <Typography variant="h2">Clanes activos</Typography>
       <div
         className={css({
-          backgroundColor: 'info',
-          color: 'info.contrast',
-          borderRadius: 'medium',
-          padding: 'medium',
-          marginBlock: 'medium',
+          'backgroundColor': 'info',
+          'color': 'info.contrast',
+          'borderRadius': 'medium',
+          'padding': 'medium',
+          'marginBlock': 'medium',
           '& a': {
             color: 'info.contrast',
             fontWeight: 'bold'
           }
         })}
       >
-        Esta sección está en construcción. Puedes ver los clanes activos en nuestro <a href="http://discord.gg/nqwzHJC">Servidor de Discord</a>.
+        Esta sección está en construcción. Puedes ver los clanes activos en nuestro
+        {' '}
+        <a href="http://discord.gg/nqwzHJC">Servidor de Discord</a>
+        .
       </div>
     </Container>
   )

src/app/cuenta/CuentaTabs.tsx

@@ -44,7 +44,7 @@ const CuentaTabs: FC = () => {
       >
         <AnimatePresence
           initial={false}
-          mode='wait'
+          mode="wait"
         >
           {currentTab === 'login' && (
             <motion.div
@@ -52,7 +52,8 @@ const CuentaTabs: FC = () => {
               initial={{ opacity: 0, x: '-100%' }}
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: '100%' }}
-              key="login">
+              key="login"
+            >
               <UpdateEmail />
               <UpdatePassword />
             </motion.div>
@@ -63,7 +64,8 @@ const CuentaTabs: FC = () => {
               initial={{ opacity: 0, x: '-100%' }}
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: '100%' }}
-              key="perfil">
+              key="perfil"
+            >
               <UpdateUserName />
               <UpdateUserPreferences />
             </motion.div>

src/app/cuenta/UpdateUserName.tsx

@@ -68,7 +68,7 @@ const UpdateUserName: FC = () => {
       })
         .catch(console.error)
     }
-  }, [status, session, user])
+  }, [status, session, user, formik])
 
   if (status !== 'idle' || session === undefined) {
     // TODO: Replace with Skeleton
@@ -99,8 +99,7 @@ const UpdateUserName: FC = () => {
             <Typography variant="caption" color="danger">{formik.errors.name}</Typography>
           )}
         </FormGroup>
-        <FormGroup
-        >
+        <FormGroup>
           <Button
             type="submit"
             disabled={formik.isSubmitting || !formik.isValid}

src/app/cuenta/UpdateUserPreferences.tsx

@@ -55,7 +55,7 @@ const UpdateUserPreferences: FC = () => {
       })
         .catch(console.error)
     }
-  }, [status, session])
+  }, [status, user, formik, session])
 
   if (status !== 'idle' || session === undefined) {
     // TODO: Replace with Skeleton
@@ -65,7 +65,7 @@ const UpdateUserPreferences: FC = () => {
   return (
     <>
       <Typography
-        variant='h3'
+        variant="h3"
       >
         Preferencias
       </Typography>
@@ -74,13 +74,13 @@ const UpdateUserPreferences: FC = () => {
       >
         <FormGroup>
           <label
-            htmlFor='bio'
+            htmlFor="bio"
           >
             Biografia
           </label>
           <TextArea
-            id='bio'
-            name='bio'
+            id="bio"
+            name="bio"
             value={formik.values.bio}
             onChange={formik.handleChange}
             onBlur={formik.handleBlur}
@@ -96,7 +96,7 @@ const UpdateUserPreferences: FC = () => {
         {/* TODO: Add Profile Picture and Social Links fields */}
         <FormGroup>
           <Button
-            type='submit'
+            type="submit"
             disabled={formik.isSubmitting || !formik.isValid}
             fullWidth
           >

src/app/cuenta/page.tsx

@@ -1,6 +1,6 @@
 import Typography from '@/components/ui/Typography'
 import { Container } from '@/styled-system/jsx'
-import { type FC } from 'react'
+import type { FC } from 'react'
 import CuentaTabs from './CuentaTabs'
 
 const CuentaPage: FC = () => {

src/app/dashboard/_components/DashboardTabs.tsx

@@ -40,7 +40,7 @@ const DashboardTabs: FC = () => {
       >
         <AnimatePresence
           initial={false}
-          mode='wait'
+          mode="wait"
         >
           {currentTab === undefined && (
             <motion.div

src/app/dashboard/_components/teamApplications/ApplicationsFilter.tsx

@@ -17,7 +17,7 @@ const ApplicationsFilter: FC<ApplicationsFilterProps> = ({ column }) => {
         <StatusSelector
           id={`${column.id}-status-filter`}
           value={columnFilterValue as TeamApplicationStatus}
-          onChange={value => { column.setFilterValue(value) }}
+          onChange={(value) => { column.setFilterValue(value) }}
           allowEmpty
         />
       )
@@ -26,7 +26,7 @@ const ApplicationsFilter: FC<ApplicationsFilterProps> = ({ column }) => {
         <RoleSelector
           id={`${column.id}-role-filter`}
           value={columnFilterValue as TeamApplicationRole}
-          onChange={value => { column.setFilterValue(value) }}
+          onChange={(value) => { column.setFilterValue(value) }}
           allowEmpty
         />
       )
@@ -36,7 +36,7 @@ const ApplicationsFilter: FC<ApplicationsFilterProps> = ({ column }) => {
           fullWidth
           type="text"
           value={(columnFilterValue ?? '') as string}
-          onChange={value => { column.setFilterValue(value) }}
+          onChange={(value) => { column.setFilterValue(value) }}
           placeholder="Buscar..."
           className="w-36 border shadow rounded"
           list={column.id + 'list'}

src/app/dashboard/_components/teamApplications/ApplicationsList.tsx

@@ -3,7 +3,7 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableHeadCell,
 import useManageError from '@/hooks/useManageError'
 import { css } from '@/styled-system/css'
 import { formatDate } from '@/utilities/date'
-import { type TeamApplication, type TeamApplicationList } from '@/utilities/teamApplication'
+import type { TeamApplication, TeamApplicationList } from '@/utilities/teamApplication'
 import { faChevronLeft, faChevronRight, faSort, faSortAsc, faSortDesc } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, type ColumnFiltersState, type PaginationState, type RowData, type SortingState } from '@tanstack/react-table'
@@ -125,7 +125,7 @@ const ApplicationsList: FC = () => {
         if (error instanceof Error && error.name === 'AbortError') return
         manageError(error, 'Error al obtener las aplicaciones', 'Error desconocido al obtener las aplicaciones', 'error')
       })
-  }, [pagination, sorting, columnFilters])
+  }, [pagination, sorting, columnFilters, manageError])
 
   // TODO: Better UI Controls for: column visibility. Quantity selector.
   return (
@@ -145,7 +145,9 @@ const ApplicationsList: FC = () => {
                 id={`${column.id}-view`}
                 checked={column.getIsVisible()}
                 onChange={column.getToggleVisibilityHandler()}
-              /> {column.columnDef.header?.toString() ?? column.id}
+              />
+              {' '}
+              {column.columnDef.header?.toString() ?? column.id}
             </label>
           </div>
         ))}
@@ -159,8 +161,8 @@ const ApplicationsList: FC = () => {
                   <TableHeadCell
                     key={header.id}
                     className={css({
-                      verticalAlign: 'top',
-                      position: 'relative',
+                      'verticalAlign': 'top',
+                      'position': 'relative',
                       '&:hover > [data-is-resizing]': {
                         backgroundColor: 'border'
                       }
@@ -187,7 +189,7 @@ const ApplicationsList: FC = () => {
                             size="small"
                             onClick={header.column.getToggleSortingHandler()}
                           >
-                            <FontAwesomeIcon icon={header.column.getIsSorted() === 'asc' ? faSortAsc : header.column.getIsSorted() === 'desc' ? faSortDesc : faSort} size="sm" fixedWidth />
+                            <FontAwesomeIcon icon={header.column.getIsSorted() === 'asc' ? faSortAsc : header.column.getIsSorted() === 'desc' ? faSortDesc : faSort} size="sm" />
                           </IconButton>
                         )}
                       </div>
@@ -195,19 +197,19 @@ const ApplicationsList: FC = () => {
                         ? (
                           <ApplicationsFilter column={header.column} />
                         )
-                        : null
-                      }
+                        : null}
                     </div>
-                    <div
+                    <button
+                      type="button"
                       className={css({
-                        position: 'absolute',
-                        top: 0,
-                        right: 0,
-                        height: '100%',
-                        width: '5px',
-                        cursor: 'col-resize',
-                        userSelect: 'none',
-                        touchAction: 'none',
+                        'position': 'absolute',
+                        'top': 0,
+                        'right': 0,
+                        'height': '100%',
+                        'width': '5px',
+                        'cursor': 'col-resize',
+                        'userSelect': 'none',
+                        'touchAction': 'none',
                         '&:hover': {
                           backgroundColor: 'border'
                         },
@@ -255,14 +257,20 @@ const ApplicationsList: FC = () => {
           onClick={() => { table.previousPage() }}
           disabled={!table.getCanPreviousPage()}
         >
-          <FontAwesomeIcon icon={faChevronLeft} fixedWidth />
+          <FontAwesomeIcon icon={faChevronLeft} />
         </IconButton>
-        Pagina {table.getState().pagination.pageIndex + 1} de {table.getPageCount()}
+        Pagina
+        {' '}
+        {table.getState().pagination.pageIndex + 1}
+        {' '}
+        de
+        {' '}
+        {table.getPageCount()}
         <IconButton
           onClick={() => { table.nextPage() }}
           disabled={!table.getCanNextPage()}
         >
-          <FontAwesomeIcon icon={faChevronRight} fixedWidth />
+          <FontAwesomeIcon icon={faChevronRight} />
         </IconButton>
       </div>
     </>

src/app/dashboard/_components/teamApplications/RoleSelector.tsx

@@ -15,17 +15,17 @@ const RoleSelector: FC<RoleSelectorProps> = ({ id, value, onChange, allowEmpty }
     <select
       id={`${id}-status`}
       className={css({
-        width: '100%',
-        border: 'none',
-        background: 'transparent',
-        color: 'inherit',
-        outline: 'none',
-        cursor: 'pointer',
-        fontSize: 'inherit',
-        fontWeight: 'inherit',
-        lineHeight: 'inherit',
-        padding: '0',
-        borderRadius: '0',
+        'width': '100%',
+        'border': 'none',
+        'background': 'transparent',
+        'color': 'inherit',
+        'outline': 'none',
+        'cursor': 'pointer',
+        'fontSize': 'inherit',
+        'fontWeight': 'inherit',
+        'lineHeight': 'inherit',
+        'padding': '0',
+        'borderRadius': '0',
         '&:focus': {
           outline: 'none'
         }

src/app/dashboard/_components/teamApplications/StatusSelector.tsx

@@ -15,17 +15,17 @@ const StatusSelector: FC<StatusSelectorProps> = ({ id, value, onChange, allowEmp
     <select
       id={`${id}-status`}
       className={css({
-        width: '100%',
-        border: 'none',
-        background: 'transparent',
-        color: 'inherit',
-        outline: 'none',
-        cursor: 'pointer',
-        fontSize: 'inherit',
-        fontWeight: 'inherit',
-        lineHeight: 'inherit',
-        padding: '0',
-        borderRadius: '0',
+        'width': '100%',
+        'border': 'none',
+        'background': 'transparent',
+        'color': 'inherit',
+        'outline': 'none',
+        'cursor': 'pointer',
+        'fontSize': 'inherit',
+        'fontWeight': 'inherit',
+        'lineHeight': 'inherit',
+        'padding': '0',
+        'borderRadius': '0',
         '&:focus': {
           outline: 'none'
         }

src/app/equipo/page.tsx

@@ -25,9 +25,9 @@ const getTeams = async (): Promise<GetTeamsResponse> => {
   const moderatorMembers: Models.MembershipList = await getClanMembers(MODERATOR_CLAN_ID)
   const collaboratorMembers: Models.MembershipList = await getClanMembers(COLLABORATOR_CLAN_ID)
 
-  const adminsPromises = adminMembers.memberships.map(async membership => await getUser(membership.userId))
-  const moderatorsPromises = moderatorMembers.memberships.map(async membership => await getUser(membership.userId))
-  const collaboratorsPromises = collaboratorMembers.memberships.map(async membership => await getUser(membership.userId))
+  const adminsPromises = adminMembers.memberships.map(async (membership) => await getUser(membership.userId))
+  const moderatorsPromises = moderatorMembers.memberships.map(async (membership) => await getUser(membership.userId))
+  const collaboratorsPromises = collaboratorMembers.memberships.map(async (membership) => await getUser(membership.userId))
 
   const [admins, moderators, collaborators] = await Promise.all([
     Promise.all(adminsPromises), Promise.all(moderatorsPromises), Promise.all(collaboratorsPromises)
@@ -96,8 +96,7 @@ const EquipoPage: FC = async () => {
           <Typography variant="body2" color="info">
             Ups, parece que ahora mismo no hay administradores, pero en EntGamers siempre estamos estamos buscando gente que quiera organizar cosas para la comunidad, puedes contactarnos para formar parte de nuestro equipo haciendo click en el siguiente enlace.
           </Typography>
-        )
-      }
+        )}
       <div className={center()}>
         <NextLink
           className={button({ color: 'info' })}
@@ -158,8 +157,7 @@ const EquipoPage: FC = async () => {
           <Typography variant="body2" color="info">
             Ups, parece que ahora mismo no hay moderadores, pero en EntGamers siempre estamos buscando gente que quiera ayudar a la comunidad. si quieres ser moderador, puedes hacer click en el botón de abajo.
           </Typography>
-        )
-      }
+        )}
       <div className={center()}>
         <NextLink
           className={button({ color: 'info' })}
@@ -220,8 +218,7 @@ const EquipoPage: FC = async () => {
           <Typography variant="body2" color="info">
             Ups, parece que ahora mismo no hay colaboradores, pero en EntGamers siempre estamos buscando gente que quiera ayudar a la comunidad. si quieres ser colaborador, puedes hacer click en el botón de abajo.
           </Typography>
-        )
-      }
+        )}
       <div className={center()}>
         <NextLink
           className={button({ color: 'info' })}

src/app/equipo/unirse/ApplyForm.tsx

@@ -16,11 +16,14 @@ import { ADMIN_CLAN_ID, COLLABORATOR_CLAN_ID, MODERATOR_CLAN_ID } from 'entgamer
 import { createTeamApplication, type TeamApplicationData } from 'entgamers-database/frontend/database/teamApplications'
 import { useFormik } from 'formik'
 import { AnimatePresence, motion } from 'framer-motion'
-import { useSearchParams } from 'next/navigation'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { useRouter } from 'next/router'
 import { useEffect, type FC } from 'react'
 
 const ApplyForm: FC = () => {
   const searchParams = useSearchParams()
+  const pathname = usePathname()
+  const router = useRouter()
   const { manageError } = useManageError()
   const dispatch = useAppDispatch()
 
@@ -54,8 +57,11 @@ const ApplyForm: FC = () => {
         .catch((error) => {
           console.error(error)
         })
+        .finally(() => {
+          router.replace(pathname)
+        })
     }
-  }, [])
+  }, [searchParams, formik, pathname, router])
 
   return (
     <form
@@ -70,7 +76,7 @@ const ApplyForm: FC = () => {
         })}
       >
         <Button
-          type='button'
+          type="button"
           onClick={() => {
             formik.setFieldValue('role', MODERATOR_CLAN_ID)
               .catch((error) => {
@@ -82,7 +88,7 @@ const ApplyForm: FC = () => {
           Moderador
         </Button>
         <Button
-          type='button'
+          type="button"
           onClick={() => {
             formik.setFieldValue('role', ADMIN_CLAN_ID)
               .catch((error) => {
@@ -94,7 +100,7 @@ const ApplyForm: FC = () => {
           Administrador
         </Button>
         <Button
-          type='button'
+          type="button"
           onClick={() => {
             formik.setFieldValue('role', COLLABORATOR_CLAN_ID)
               .catch((error) => {
@@ -121,90 +127,87 @@ const ApplyForm: FC = () => {
               })}
             >
               <FormGroup>
-                <label htmlFor='name'>Nombre</label>
+                <label htmlFor="name">Nombre</label>
                 <Input
-                  id='name'
-                  type='text'
+                  id="name"
+                  type="text"
                   value={formik.values.name}
                   onChange={formik.handleChange}
                   onBlur={formik.handleBlur}
                 />
                 {formik.touched.name !== undefined && formik.errors.name !== undefined
                   ? (
-                    <Typography variant='caption' color='danger'>
+                    <Typography variant="caption" color="danger">
                       {formik.errors.name}
                     </Typography>
                   )
                   : (
-                    <Typography variant='caption' color='info'>
+                    <Typography variant="caption" color="info">
                       Tu nombre.
                     </Typography>
                   )}
               </FormGroup>
               <FormGroup>
-                <label htmlFor='email'>Email</label>
+                <label htmlFor="email">Email</label>
                 <Input
-                  id='email'
-                  type='email'
+                  id="email"
+                  type="email"
                   value={formik.values.email}
                   onChange={formik.handleChange}
                   onBlur={formik.handleBlur}
                 />
                 {formik.touched.email !== undefined && formik.errors.email !== undefined
                   ? (
-                    <Typography variant='caption' color='danger'>
+                    <Typography variant="caption" color="danger">
                       {formik.errors.email}
                     </Typography>
                   )
                   : (
-                    <Typography variant='caption' color='info'>
+                    <Typography variant="caption" color="info">
                       Tu email, para poder contactarte.
                     </Typography>
-                  )
-                }
+                  )}
               </FormGroup>
               <FormGroup>
-                <label htmlFor='discord'>Nombre de Discord</label>
+                <label htmlFor="discord">Nombre de Discord</label>
                 <Input
-                  id='discord'
-                  type='text'
+                  id="discord"
+                  type="text"
                   value={formik.values.discord}
                   onChange={formik.handleChange}
                   onBlur={formik.handleBlur}
                 />
                 {formik.touched.discord !== undefined && formik.errors.discord !== undefined
                   ? (
-                    <Typography variant='caption' color='danger'>
+                    <Typography variant="caption" color="danger">
                       {formik.errors.discord}
                     </Typography>
                   )
                   : (
-                    <Typography variant='caption' color='info'>
+                    <Typography variant="caption" color="info">
                       Tu nombre de Discord, para poder contactarte.
                     </Typography>
-                  )
-                }
+                  )}
               </FormGroup>
               <FormGroup>
-                <label htmlFor='message'>Mensaje</label>
+                <label htmlFor="message">Mensaje</label>
                 <TextArea
-                  id='message'
+                  id="message"
                   value={formik.values.message}
                   onChange={formik.handleChange}
                   onBlur={formik.handleBlur}
                 />
                 {formik.touched.message !== undefined && formik.errors.message !== undefined
                   ? (
-                    <Typography variant='caption' color='danger'>
+                    <Typography variant="caption" color="danger">
                       {formik.errors.message}
                     </Typography>
                   )
                   : (
-                    <Typography variant='caption' color='info'>
+                    <Typography variant="caption" color="info">
                       ¿Por que te gustaría unirte al equipo?, ¿Que te gustaría hacer?, etc.
                     </Typography>
-                  )
-                }
+                  )}
               </FormGroup>
               <div
                 className={css({
@@ -212,7 +215,7 @@ const ApplyForm: FC = () => {
                 })}
               >
                 <Button
-                  type='submit'
+                  type="submit"
                   disabled={!formik.isValid || !formik.dirty}
                   fullWidth
 
@@ -239,14 +242,13 @@ const ApplyForm: FC = () => {
                   justifyContent: 'center'
                 })}
               >
-                <Typography variant='h2' align="center">¡Gracias por interesarte en unirte al equipo!</Typography>
-                <Typography variant='body1'>
+                <Typography variant="h2" align="center">¡Gracias por interesarte en unirte al equipo!</Typography>
+                <Typography variant="body1">
                   El equipo de EntGamers se pondrá en contacto contigo a la brevedad posible.
                 </Typography>
               </div>
             </div>
-          )
-        }
+          )}
         <div
           className={css({
             overflow: 'hidden',
@@ -254,31 +256,39 @@ const ApplyForm: FC = () => {
             paddingBlock: 'medium'
           })}
         >
-          <AnimatePresence mode='wait' initial={false}>
+          <AnimatePresence mode="wait" initial={false}>
             {formik.values.role === MODERATOR_CLAN_ID && (
               <motion.div
-                key={'motion-moderator'}
+                key="motion-moderator"
                 transition={{ duration: 0.15, ease: 'easeInOut' }}
                 initial={{ opacity: 0, x: '-250px' }}
                 animate={{ opacity: 1, x: 0 }}
                 exit={{ opacity: 0, x: '250px' }}
               >
-                <Typography variant='h2' align="center">Moderadores</Typography>
-                <Typography variant='body1'>
+                <Typography variant="h2" align="center">Moderadores</Typography>
+                <Typography variant="body1">
                   El equipo de moderación de EntGamers se encarga de moderar los distintos espacios en los que se desenvuelve la comunidad, como los grupos de Facebook, Discord, Etc.
                 </Typography>
-                <Typography variant='h3'>Requisitos</Typography>
+                <Typography variant="h3">Requisitos</Typography>
                 <ul className="fa-ul">
                   <li>
-                    <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Imparcialidad</strong>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Imparcialidad</strong>
                     <br />
                     La comunidad esta conformada por amigos y conocidos, por lo tanto es importante poder actuar de forma imparcial y responsable.
                   </li>
                 </ul>
-                <Typography variant='h3'>Beneficios</Typography>
+                <Typography variant="h3">Beneficios</Typography>
                 <ul className="fa-ul">
                   <li>
-                    <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Experiencia</strong>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Experiencia</strong>
                     <br />
                     Uno de los objetivos de la comunidad es brindar experiencia en gestión y desarrollo de proyectos equiparable a un entorno laboral, que sea comprobable y útil.
                   </li>
@@ -287,28 +297,36 @@ const ApplyForm: FC = () => {
             )}
             {formik.values.role === COLLABORATOR_CLAN_ID && (
               <motion.div
-                key={'motion-collaborator'}
+                key="motion-collaborator"
                 transition={{ duration: 0.15, ease: 'easeInOut' }}
                 initial={{ opacity: 0, x: '-250px' }}
                 animate={{ opacity: 1, x: 0 }}
                 exit={{ opacity: 0, x: '250px' }}
               >
-                <Typography variant='h2' align='center'>Colaborador</Typography>
-                <Typography variant='body1'>
+                <Typography variant="h2" align="center">Colaborador</Typography>
+                <Typography variant="body1">
                   Los colaboradores son personas ajenas al staff central de EntGamers que nos ayudan a traer contenido, eventos y actividades a la comunidad.
                 </Typography>
-                <Typography variant='h3'>Requisitos</Typography>
+                <Typography variant="h3">Requisitos</Typography>
                 <ul className="fa-ul">
                   <li>
-                    <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Profesionalismo</strong>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Profesionalismo</strong>
                     <br />
                     La comunidad siempre intenta conseguir el mayor nivel de calidad en todos sus proyectos, por lo que buscamos gente dispuesta a otorgar este nivel de profesionalismo para el disfrute de la comunidad.
                   </li>
                 </ul>
-                <Typography variant='h3'>Beneficios</Typography>
+                <Typography variant="h3">Beneficios</Typography>
                 <ul className="fa-ul">
                   <li>
-                    <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Apoyo</strong>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Apoyo</strong>
                     <br />
                     Puedes contar con el apoyo de la comunidad para tus proyectos, ya sea en forma de difusión, asesoramiento o recursos.
                   </li>
@@ -317,43 +335,63 @@ const ApplyForm: FC = () => {
             )}
             {formik.values.role === ADMIN_CLAN_ID && (
               <motion.div
-                key={'motion-administrator'}
+                key="motion-administrator"
                 transition={{ duration: 0.15, ease: 'easeInOut' }}
                 initial={{ opacity: 0, x: '-250px' }}
                 animate={{ opacity: 1, x: 0 }}
                 exit={{ opacity: 0, x: '250px' }}
               >
-                <Typography variant='h2' align='center'>Administradores</Typography>
-                <Typography variant='body1'>
+                <Typography variant="h2" align="center">Administradores</Typography>
+                <Typography variant="body1">
                   Los administradores son quienes se encargan de que todo funcione como es debido en la comunidad, desde la moderación de los grupos hasta la organización de eventos y actividades. Son los responsables de que la comunidad siga creciendo y mejorando.
                 </Typography>
-                <Typography variant='h3'>Requisitos</Typography>
+                <Typography variant="h3">Requisitos</Typography>
                 <ul className="fa-ul">
                   <li>
-                    <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Profesionalismo</strong>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Profesionalismo</strong>
                     <br />
                     La comunidad siempre intenta conseguir el mayor nivel de calidad en todos sus proyectos, por lo que buscamos gente dispuesta a otorgar este nivel de profesionalismo para el disfrute de la comunidad.
                   </li>
                   <li>
-                    <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Constancia</strong>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Constancia</strong>
                     <br />
                     La comunidad busca gente que en sus posibilidades sea activa, que pueda estar al tanto de lo que pasa en ella.
                   </li>
                   <li>
-                    <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Proactividad</strong>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Proactividad</strong>
                     <br />
                     La comunidad esta en constante crecimiento, por eso, buscamos gente que ayude a buscar nuevas oportunidades para diferentes proyectos y actividades de interés a la comunidad.
                   </li>
                 </ul>
-                <Typography variant='h3'>Beneficios</Typography>
+                <Typography variant="h3">Beneficios</Typography>
                 <ul className="fa-ul">
                   <li>
-                    <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Experiencia</strong>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Experiencia</strong>
                     <br />
                     Uno de los objetivos de la comunidad es brindar experiencia en gestión y desarrollo de proyectos equiparable a un entorno laboral, que sea comprobable y útil.
                   </li>
                   <li>
-                    <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Capacitación</strong>
+                    <span className="fa-li">
+                      <FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} />
+                    </span>
+                    {' '}
+                    <strong>Capacitación</strong>
                     <br />
                     La comunidad buscara dar capacitación a sus miembros en lo referido a herramientas y procedimientos utilizados.
                   </li>

src/app/equipo/unirse/page.tsx

@@ -1,7 +1,7 @@
 import Typography from '@/components/ui/Typography'
 import { Container } from '@/styled-system/jsx'
 import { ensureTeamApplicationsCollection } from 'entgamers-database/backend/database/teamApplications'
-import { type FC } from 'react'
+import { Suspense, type FC } from 'react'
 import ApplyForm from './ApplyForm'
 
 const EquipoUnirsePage: FC = async () => {
@@ -12,7 +12,9 @@ const EquipoUnirsePage: FC = async () => {
       <Typography variant="body1">
         El equipo de EntGamers está formado por personas que se dedican a la administración de la comunidad, a la organización de eventos y a la creación de contenido. Aquí podrás enterarte cuales son las funciones de cada uno de los miembros del equipo y como puedes unirte a nosotros.
       </Typography>
+      <Suspense fallback={<Typography variant="body1">Cargando...</Typography>}>
         <ApplyForm />
+      </Suspense>
     </Container>
   )
 }

src/app/layout.tsx

@@ -8,8 +8,8 @@ import '@fontsource/open-sans/latin-700.css'
 import '@fontsource/permanent-marker/latin-400.css'
 import { config } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
-import { type Metadata } from 'next'
-import { type FC, type ReactNode } from 'react'
+import type { Metadata } from 'next'
+import type { FC, ReactNode } from 'react'
 import FeedbackConsumer from './FeedbackConsumer'
 import SessionConsumer from './SessionConsumer'
 import StateProvider from './StateProvider'

src/app/login/LoginForm.tsx

@@ -57,7 +57,7 @@ const LoginForm: FC = () => {
     if (session.status === 'idle' && session.session !== undefined) {
       router.push('/')
     }
-  }, [session])
+  }, [session, router])
 
   return (
     <form
@@ -95,7 +95,9 @@ const LoginForm: FC = () => {
         )}
       </FormGroup>
       <Typography variant="caption" color="muted">
-        ¿Perdiste tu contraseña? <NextLink href="/recover-password">Recupérala</NextLink>
+        ¿Perdiste tu contraseña?
+        {' '}
+        <NextLink href="/recover-password">Recupérala</NextLink>
       </Typography>
       <FormGroup>
         <Button

src/app/login/page.tsx

@@ -15,8 +15,7 @@ const LoginPage: FC = () => {
           container(),
           css({
             minHeight: 'calc(100vh - 60px - 72px)'
-          }))
-        }
+          }))}
       >
         <div
           className={cx(
@@ -42,7 +41,9 @@ const LoginPage: FC = () => {
           >
             <LoginForm />
             <Typography variant="caption" align="center">
-              ¿No tienes una cuenta? <NextLink href="/register">Regístrate</NextLink>
+              ¿No tienes una cuenta?
+              {' '}
+              <NextLink href="/register">Regístrate</NextLink>
             </Typography>
           </div>
         </div>

src/app/recover-password/CreateRecoverPasswordForm.tsx

@@ -68,10 +68,11 @@ const CreateRecoverPasswordForm: FC = () => {
               {formik.errors.email}
             </Typography>
           )
-          : (<Typography variant="caption" color="info">
+          : (
+            <Typography variant="caption" color="info">
               Por favor, introduce el correo electrónico con el que te has registrado. Te enviaremos un correo con instrucciones para la recuperación de contraseña
-          </Typography>)
-        }
+            </Typography>
+          )}
       </FormGroup>
       <FormGroup>
         <Button

src/app/recover-password/ManageRecoverPassword.tsx

@@ -1,27 +1,23 @@
 'use client'
 import CreateRecoverPasswordForm from '@/app/recover-password/CreateRecoverPasswordForm'
 import { useSearchParams } from 'next/navigation'
-import { useEffect, useState, type FC } from 'react'
+import type { FC } from 'react'
 import UpdateRecoverPasswordForm, { type UpdateRecoverPasswordFormProps } from './UpdateRecoverPasswordForm'
 
 const ManageRecoverPassword: FC = () => {
-  const [recoverData, setRecoverData] = useState<UpdateRecoverPasswordFormProps | undefined>()
   const searchParams = useSearchParams()
-
-  useEffect(() => {
   const userId = searchParams.get('userId')
   const secret = searchParams.get('secret')
-    if (userId !== null && secret !== null) {
-      setRecoverData({ userId, secret })
-    }
-  }, [])
+  const recoverData: UpdateRecoverPasswordFormProps | undefined = (userId !== null && secret !== null) ? { userId, secret } : undefined
 
   if (recoverData === undefined) {
     return <CreateRecoverPasswordForm />
   } else {
-    return <UpdateRecoverPasswordForm
+    return (
+      <UpdateRecoverPasswordForm
         {...recoverData}
       />
+    )
   }
 }
 

src/app/recover-password/UpdateRecoverPasswordForm.tsx

@@ -89,8 +89,7 @@ const UpdateRecoverPasswordForm: FC<UpdateRecoverPasswordFormProps> = (props) =>
             <Typography variant="caption" color="info">
               Escribe tu nueva contraseña
             </Typography>
-          )
-        }
+          )}
       </FormGroup>
       <FormGroup>
         <label htmlFor="confirmPassword">

src/app/recover-password/page.tsx

@@ -4,7 +4,7 @@ import { css, cx } from '@/styled-system/css'
 import { Center } from '@/styled-system/jsx'
 import { container } from '@/styled-system/patterns'
 import { card } from '@/styled-system/recipes'
-import { type FC } from 'react'
+import { Suspense, type FC } from 'react'
 
 const page: FC = () => {
   return (
@@ -13,8 +13,7 @@ const page: FC = () => {
         container(),
         css({
           minHeight: 'calc(100vh - 60px - 72px)'
-        }))
-      }
+        }))}
     >
       <div
         className={cx(
@@ -36,7 +35,9 @@ const page: FC = () => {
         <div
           className={card().content}
         >
+          <Suspense fallback={<Typography variant="body1">Cargando...</Typography>}>
             <ManageRecoverPassword />
+          </Suspense>
         </div>
       </div>
     </Center>

src/app/register/page.tsx

@@ -15,8 +15,7 @@ const RegisterPage: FC = () => {
           container(),
           css({
             minHeight: 'calc(100vh - 60px - 72px)'
-          }))
-        }
+          }))}
       >
 
         <div
@@ -43,7 +42,9 @@ const RegisterPage: FC = () => {
           >
             <RegisterForm />
             <Typography variant="caption" align="center">
-              ¿Ya tienes una cuenta? <NextLink href="/login">Inicia sesión</NextLink>
+              ¿Ya tienes una cuenta?
+              {' '}
+              <NextLink href="/login">Inicia sesión</NextLink>
             </Typography>
           </div>
         </div>

src/components/layout/Footer.tsx

@@ -4,7 +4,7 @@ import { Container } from '@/styled-system/jsx'
 import { faChevronRight, faHeart } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import NextLink from 'next/link'
-import { type FC } from 'react'
+import type { FC } from 'react'
 
 const Footer: FC = () => {
   return (
@@ -22,14 +22,24 @@ const Footer: FC = () => {
         })}
       >
         <div>
-          <Typography variant="h3" component='div'> Acerca de </Typography>
+          <Typography variant="h3" component="div"> Acerca de </Typography>
           <ul className="fa-ul">
-            <li><FontAwesomeIcon icon={faChevronRight} listItem fixedWidth /><NextLink href="/acerca-de"> EntGamers</NextLink></li>
-            <li><FontAwesomeIcon icon={faChevronRight} listItem fixedWidth /><NextLink href="/clanes"> Clanes</NextLink></li>
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              <NextLink href="/acerca-de"> EntGamers</NextLink>
+            </li>
+            <li>
+              <span className="fa-li">
+                <FontAwesomeIcon icon={faChevronRight} />
+              </span>
+              <NextLink href="/clanes"> Clanes</NextLink>
+            </li>
           </ul>
         </div>
         <div>
-          <Typography variant="h3" component='div'> Contacto </Typography>
+          <Typography variant="h3" component="div"> Contacto </Typography>
         </div>
         <div></div>
       </Container>
@@ -40,8 +50,14 @@ const Footer: FC = () => {
           justifyContent: 'center'
         })}
       >
-        <Typography variant="body2" component='div'>
-          Hecho con <FontAwesomeIcon className={css({ color: 'red' })} icon={faHeart} /> por <a href="https://srjuggernaut.dev">SrJuggernaut</a>
+        <Typography variant="body2" component="div">
+          Hecho con
+          {' '}
+          <FontAwesomeIcon className={css({ color: 'red' })} icon={faHeart} />
+          {' '}
+          por
+          {' '}
+          <a href="https://srjuggernaut.dev">SrJuggernaut</a>
         </Typography>
       </Container>
     </footer>

src/components/layout/Header.tsx

@@ -21,28 +21,28 @@ const Header: FC = () => {
     return () => {
       window.removeEventListener('scroll', handleScroll)
     }
-  }, [])
+  }, [handleScroll])
 
   return (
     <>
       <header
         className={css({
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: 'transparent',
-          color: 'text',
-          minHeight: '60px',
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '100%',
-          zIndex: 'sticky',
-          boxShadow: 'none',
-          transitionProperty: 'background-color, box-shadow',
-          transitionDuration: '0.25s',
-          transitionTimingFunction: 'easeInOut',
-          willChange: 'background-color, box-shadow',
+          'display': 'flex',
+          'alignItems': 'center',
+          'justifyContent': 'center',
+          'backgroundColor': 'transparent',
+          'color': 'text',
+          'minHeight': '60px',
+          'position': 'fixed',
+          'top': 0,
+          'left': 0,
+          'width': '100%',
+          'zIndex': 'sticky',
+          'boxShadow': 'none',
+          'transitionProperty': 'background-color, box-shadow',
+          'transitionDuration': '0.25s',
+          'transitionTimingFunction': 'easeInOut',
+          'willChange': 'background-color, box-shadow',
           '&[data-scrolled=true]': {
             backgroundColor: 'surface',
             boxShadow: '2px 2px 4px 0px rgba(0, 0, 0, 0.25)'

src/components/layout/Header/SessionButtons.tsx

@@ -11,10 +11,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { ADMIN_CLAN_ID, MODERATOR_CLAN_ID } from 'entgamers-database/frontend/clanes/administrative'
 import { logout } from 'entgamers-database/frontend/session'
 import NextLink from 'next/link'
-import { type FC } from 'react'
+import type { FC } from 'react'
 
 const SessionButtons: FC = () => {
-  const { session, status, clanes } = useAppSelector(state => state.session)
+  const { session, status, clanes } = useAppSelector((state) => state.session)
   const { manageError } = useManageError()
   const dispatch = useAppDispatch()
 
@@ -22,10 +22,9 @@ const SessionButtons: FC = () => {
 
   if (status === 'idle' && session === undefined) {
     return (
-      <>
       <Tooltip
-          title={'Iniciar sesión'}
-          position='bottom'
+        title="Iniciar sesión"
+        position="bottom"
       >
         <NextLink
           href="/login"
@@ -33,10 +32,9 @@ const SessionButtons: FC = () => {
             iconButton()
           }
         >
-            <FontAwesomeIcon icon={faUser} fixedWidth />
+          <FontAwesomeIcon icon={faUser} />
         </NextLink>
       </Tooltip>
-      </>
     )
   }
 
@@ -44,8 +42,8 @@ const SessionButtons: FC = () => {
     return (
       <>
         <Tooltip
-          title={'Mi cuenta'}
-          position='bottom'
+          title="Mi cuenta"
+          position="bottom"
         >
           <NextLink
             href="/cuenta"
@@ -53,13 +51,13 @@ const SessionButtons: FC = () => {
               iconButton()
             }
           >
-            <FontAwesomeIcon icon={faUser} fixedWidth />
+            <FontAwesomeIcon icon={faUser} />
           </NextLink>
         </Tooltip>
-        {clanes !== undefined && clanes?.teams.some(team => team.$id === ADMIN_CLAN_ID || team.$id === MODERATOR_CLAN_ID) && (
+        {clanes?.teams.some((team) => team.$id === ADMIN_CLAN_ID || team.$id === MODERATOR_CLAN_ID) && (
           <Tooltip
-            title={'Panel de administración'}
-            position='bottom'
+            title="Panel de administración"
+            position="bottom"
           >
             <NextLink
               href="/dashboard"
@@ -67,13 +65,13 @@ const SessionButtons: FC = () => {
                 iconButton()
               }
             >
-              <FontAwesomeIcon icon={faCogs} fixedWidth />
+              <FontAwesomeIcon icon={faCogs} />
             </NextLink>
           </Tooltip>
         )}
         <Tooltip
-          title={'Cerrar sesión'}
-          position='bottom'
+          title="Cerrar sesión"
+          position="bottom"
         >
           <IconButton
             onClick={() => {
@@ -91,7 +89,7 @@ const SessionButtons: FC = () => {
                 })
             }}
           >
-            <FontAwesomeIcon icon={faRightFromBracket} fixedWidth />
+            <FontAwesomeIcon icon={faRightFromBracket} />
           </IconButton>
         </Tooltip>
       </>

src/components/layout/Menu.tsx

@@ -3,7 +3,7 @@ import BackDrop from '@/components/ui/BackDrop'
 import IconButton from '@/components/ui/IconButton'
 import { css } from '@/styled-system/css'
 import { iconButton } from '@/styled-system/recipes'
-import { type IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faBars, faHome, faTimes, faUsers } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import NextLink from 'next/link'
@@ -62,6 +62,7 @@ const Menu: FC = () => {
             })}
           >
             <button
+              type="button"
               className={iconButton({
                 color: 'danger'
               })}
@@ -80,22 +81,21 @@ const Menu: FC = () => {
             >
               {menuLinks.map((menuLink, index) => (
                 <li
-                  key={`menu-link-${index}`}
-                  onClick={() => { setIsMenuOpen(false) }}
+                  key={`menu-link-${menuLink.label}-${index.toString()}`}
                 >
                   <NextLink
                     className={css({
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'left',
-                      padding: '1rem',
-                      textDecoration: 'none',
-                      backgroundColor: 'transparent',
-                      color: 'text',
-                      transitionProperty: 'background-color',
-                      transitionDuration: 'normal',
-                      transitionTimingFunction: 'easeInOut',
-                      willChange: 'background-color color',
+                      'display': 'flex',
+                      'alignItems': 'center',
+                      'justifyContent': 'left',
+                      'padding': '1rem',
+                      'textDecoration': 'none',
+                      'backgroundColor': 'transparent',
+                      'color': 'text',
+                      'transitionProperty': 'background-color',
+                      'transitionDuration': 'normal',
+                      'transitionTimingFunction': 'easeInOut',
+                      'willChange': 'background-color color',
                       '&:hover': {
                         backgroundColor: 'primary',
                         color: 'primary.contrast'
@@ -107,8 +107,11 @@ const Menu: FC = () => {
                     })}
                     href={menuLink.href}
                     data-active={pathName === menuLink.href}
+                    onClick={() => { setIsMenuOpen(false) }}
                   >
-                    <FontAwesomeIcon icon={menuLink.icon} fixedWidth />&nbsp;{menuLink.label}
+                    <FontAwesomeIcon icon={menuLink.icon} />
+&nbsp;
+                    {menuLink.label}
                   </NextLink>
                 </li>
               ))}

src/components/ui/Alert.tsx

@@ -1,9 +1,9 @@
 import { cx } from '@/styled-system/css'
 import { alert, type AlertVariantProps } from '@/styled-system/recipes/alert'
-import { type MergeOmitting } from '@/types/utilities'
+import type { MergeOmitting } from '@/types/utilities'
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'
 import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
-import { type DetailedHTMLProps, type FC, type HTMLAttributes, type ReactNode } from 'react'
+import type { DetailedHTMLProps, FC, HTMLAttributes, ReactNode } from 'react'
 import IconButton, { type IconButtonProps } from './IconButton'
 
 type ComposedAlertProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AlertVariantProps>
@@ -32,9 +32,8 @@ export const AlertCloseButton: FC<ComposedAlertCloseButtonProps> = ({ children,
       {...allOtherAlertProps}
     >
       {children === undefined
-        ? <FontAwesomeIcon icon={faTimes as FontAwesomeIconProps['icon']} fixedWidth size='sm' />
-        : children
-      }
+        ? <FontAwesomeIcon icon={faTimes as FontAwesomeIconProps['icon']} size="sm" />
+        : children}
     </IconButton>
   )
 }

src/components/ui/BackDrop.tsx

@@ -38,8 +38,7 @@ const BackDrop: FC<BackDropProps> = ({ isOpen, onClickAway, children }) => {
             {children}
           </motion.div>
         )
-        : undefined
-      }
+        : undefined}
     </AnimatePresence>
   ), document.body)
 }

src/components/ui/Button.tsx

@@ -1,11 +1,9 @@
 import { cx } from '@/styled-system/css'
 import { button, type ButtonVariantProps } from '@/styled-system/recipes/button'
-import { type MergeOmitting } from '@/types/utilities'
-import { type ButtonHTMLAttributes, type DetailedHTMLProps, type FC } from 'react'
+import type { MergeOmitting } from '@/types/utilities'
+import type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react'
 
-type ComposedButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonVariantProps>
-
-export interface ButtonProps extends ComposedButtonProps {}
+export type ButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonVariantProps>
 
 const Button: FC<ButtonProps> = ({ children, className, ...rest }) => {
   const [buttonRecipeArgs, allOtherButtonProps] = button.splitVariantProps(rest)

src/components/ui/IconButton.tsx

@@ -1,11 +1,9 @@
 import { cx } from '@/styled-system/css'
 import { iconButton, type IconButtonVariantProps } from '@/styled-system/recipes/icon-button'
-import { type MergeOmitting } from '@/types/utilities'
-import { type ButtonHTMLAttributes, type DetailedHTMLProps, type FC } from 'react'
+import type { MergeOmitting } from '@/types/utilities'
+import type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react'
 
-type ComposedIconButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonVariantProps>
-
-export interface IconButtonProps extends ComposedIconButtonProps {}
+export type IconButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonVariantProps>
 
 const IconButton: FC<IconButtonProps> = ({ children, className, ...rest }) => {
   const [iconButtonRecipeArgs, allOtherIconButtonProps] = iconButton.splitVariantProps(rest)

src/components/ui/Typography.tsx

@@ -1,7 +1,7 @@
 import { cx } from '@/styled-system/css'
 import { typography, type TypographyVariantProps } from '@/styled-system/recipes/typography'
-import { type MergeOmitting } from '@/types/utilities'
-import { type ElementType, type FC, type HTMLAttributes } from 'react'
+import type { MergeOmitting } from '@/types/utilities'
+import { type ElementType, type FC, type HTMLAttributes, createElement } from 'react'
 
 type ComposedTypographyProps = MergeOmitting<HTMLAttributes<HTMLElement>, TypographyVariantProps>
 
@@ -35,19 +35,18 @@ const variantToComponent = (variant: TypographyVariantProps['variant']): Element
 
 const Typography: FC<TypographyProps> = ({ children, className, component, ...rest }) => {
   const [typographyRecipeArgs, allOtherTypographyProps] = typography.splitVariantProps(rest)
-  const Component = component ?? variantToComponent(typographyRecipeArgs.variant)
   typographyRecipeArgs.color = typographyRecipeArgs.color ?? (
     typeof typographyRecipeArgs.variant === 'string' && typographyRecipeArgs.variant.startsWith('h')
       ? 'primary'
       : 'inherit'
   )
-  return (
-    <Component
-      className={cx(typography(typographyRecipeArgs), className)}
-      {...allOtherTypographyProps}
-    >
-      {children}
-    </Component>
+  return createElement(
+    component ?? variantToComponent(typographyRecipeArgs.variant),
+    {
+      className: cx(typography(typographyRecipeArgs), className),
+      ...allOtherTypographyProps
+    },
+    children
   )
 }
 

src/components/ui/form/DebouncedInput.tsx

@@ -19,14 +19,16 @@ const DebouncedInput: FC<DebouncedInputProps> = ({ value: initialValue, onChange
       onChange(value)
     }, debounce)
 
-    return () => { clearTimeout(timeout) }
-  }, [value])
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [value, onChange, debounce])
 
   return (
     <Input
       {...props}
       value={value}
-      onChange={e => { setValue(e.target.value) }}
+      onChange={(e) => { setValue(e.target.value) }}
     />
   )
 }

src/components/ui/form/Input.tsx

@@ -1,21 +1,17 @@
 import { cx } from '@/styled-system/css'
 import { input, type InputVariantProps } from '@/styled-system/recipes/input'
-import { type MergeOmitting } from '@/types/utilities'
-import { type DetailedHTMLProps, type FC, type InputHTMLAttributes } from 'react'
+import type { MergeOmitting } from '@/types/utilities'
+import type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react'
 
-type ComposedInputProps = MergeOmitting<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, InputVariantProps>
+export type InputProps = MergeOmitting<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, InputVariantProps>
 
-export interface InputProps extends ComposedInputProps {}
-
-const Input: FC<InputProps> = ({ children, className, ...rest }) => {
+const Input: FC<InputProps> = ({ className, ...rest }) => {
   const [inputRecipeArgs, allOtherInputProps] = input.splitVariantProps(rest)
   return (
     <input
       className={cx(input(inputRecipeArgs), className)}
       {...allOtherInputProps}
-    >
-      {children}
-    </input>
+    />
   )
 }
 

src/components/ui/form/PasswordInput.tsx

@@ -2,7 +2,7 @@ import IconButton from '@/components/ui/IconButton'
 import Tooltip from '@/components/ui/Tooltip'
 import { css, cx } from '@/styled-system/css'
 import { input, type InputVariantProps } from '@/styled-system/recipes/input'
-import { type MergeOmitting } from '@/types/utilities'
+import type { MergeOmitting } from '@/types/utilities'
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState, type FC, type InputHTMLAttributes } from 'react'
@@ -47,7 +47,7 @@ const PasswordInput: FC<InputProps> = ({ className, ...props }) => {
             size="small"
             onClick={() => { setShowPassword(!showPassword) }}
           >
-            <FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} fixedWidth/>
+            <FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} />
           </IconButton>
         </Tooltip>
       </div>

src/state/feedbackSlice.ts

@@ -22,7 +22,7 @@ const feedbackSlice = createSlice({
     removeAlert(state, action: PayloadAction<string>) {
       return {
         ...state,
-        alerts: state.alerts.filter(alert => alert.id !== action.payload)
+        alerts: state.alerts.filter((alert) => alert.id !== action.payload)
       }
     }
   }

src/state/sessionSlice.ts

@@ -1,10 +1,10 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import { type Models } from 'appwrite'
-import { type ClanList } from 'entgamers-database/frontend/clanes'
-import { type User } from 'entgamers-database/frontend/session'
+import type { Models } from 'appwrite'
+import type { ClanList } from 'entgamers-database/frontend/clanes'
+import type { User } from 'entgamers-database/frontend/session'
 
-export type SessionState =
-| {
+export type SessionState
+  = | {
     status: 'idle' | 'loading' | 'initializing'
     session?: Models.Session
     user?: User

tsconfig.json

@@ -12,11 +12,11 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "Node16",
-    "moduleResolution": "Node16",
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "baseUrl": "src",
     "paths": {
@@ -35,7 +35,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "next.config.js"
+    "next.config.js",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"