refactor: enhancing frontend with TypeScript, Redux, and custom hooks…

…; improving asset management

- Refactoring the frontend by adding TypeScript for type safety and maintainability.
- Integrating Redux for state management.
- Documenting components for better clarity and collaboration.
- Moving component logic into custom hooks to improve reusability and maintainability.
- Transferring sound assets to Amazon S3 for efficient storage.
- Creating API endpoints for sound assets and integrating them with the frontend.

.gitignore

@@ -1,15 +1,50 @@
 # Node.js
 node_modules/
+
+# Environment files
 .env
+.env.local
+.env.*.local
+VITE_.env
 
 # Logs
+logs/
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# Build
+# Build directories
 dist/
 build/
+.serverless/
 
-# React
+# Frontend-specific
 .cache/
+.vite/
+coverage/
+
+# Backend-specific
+src/**/*.d.ts # Ignore autogenerated TypeScript declarations
+*.db          # Ignore local SQLite database files
+tmp/
+
+# OS-specific
+.DS_Store
+Thumbs.db
+
+# IDE-specific
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Compiled binary addons
+build/Release
+
+# Optional npm cache directory
+.npm

.husky/_/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
+
+# Add the linting commands directly
+npm run lint --prefix frontend && npm run lint --prefix backend

.husky/_/pre-push

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
+npm run test --prefix frontend && npm run test --prefix backend

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint", // ESLint for linting JavaScript/TypeScript
+    "esbenp.prettier-vscode", // Prettier for code formatting
+    "eamodio.gitlens", // GitLens for enhanced Git support
+    "ms-vscode.vscode-typescript-next", // TypeScript support for newer features
+    "streetsidesoftware.code-spell-checker", // Spell checker for typos
+    "ms-playwright.playwright" // Playwright for E2E testing
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode", // Use Prettier as the default formatter
+  "editor.tabSize": 2, // Enforce 2-space indentation
+  "files.exclude": {
+    "dist/": true,
+    "node_modules/": true,
+    ".serverless/": true
+  },
+  "eslint.alwaysShowStatus": true, // Show ESLint status in the bottom bar
+  "typescript.tsserver.log": "verbose", // Useful for debugging TypeScript issues
+  "gitlens.hovers.enabled": true, // Enable GitLens hover features
+  "extensions.required": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

backend/.eslintignore

@@ -0,0 +1,19 @@
+# Ignore node modules
+node_modules/
+
+# Ignore build artifacts
+dist/
+.serverless/
+
+# Ignore environment files
+.env
+.env.example
+
+# Ignore config files
+jest.config.js
+tsconfig.json
+.eslintrc.js
+
+# Ignore specific folders
+coverage/  # If using Jest for coverage reports
+logs/

backend/.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "env": {
+    "node": true,
+    "es2021": true
+  },
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}

backend/.gitignore

@@ -1,45 +1,32 @@
 # Logs
-logs
+logs/
 *.log
-npm-debug.log*
 
-# Visual Studio Code
-.vscode
+# Node.js
+node_modules/
 
-tmp
-
-# Runtime data
-pids
+# Temporary files
+tmp/
+pids/
 *.pid
 *.seed
 
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
+# Build
+dist/
+build/
+.serverless/
 
-# Dependency directory
-# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
-node_modules
+# Coverage
+coverage/
+lib-cov/
 
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
-
-# project files that contain sensitive data
+# Sensitive files
 .env
 event.json
 policyDocument.json
-*.zip
+
+# Compiled binary addons
+build/Release
+
+# IDE-specific
+.vscode/

backend/.prettierignore

@@ -0,0 +1,18 @@
+# Ignore node modules
+node_modules/
+
+# Ignore build artifacts
+dist/
+.serverless/
+
+# Ignore environment files
+.env
+.env.example
+
+# Ignore package lock and yarn lock files
+package-lock.json
+yarn.lock
+
+# Ignore other specific files or folders
+coverage/  # If using Jest for coverage reports
+logs/

backend/.prettierrc

@@ -0,0 +1,11 @@
+{
+    "semi": true,
+    "trailingComma": "all",
+    "singleQuote": true,
+    "printWidth": 80,
+    "tabWidth": 4,
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "endOfLine": "lf",
+    "quoteProps": "as-needed"
+}

backend/jest.config.js

@@ -0,0 +1,12 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  transform: {
+    "^.+.tsx?$": ["ts-jest",{}],
+  },
+  moduleNameMapper: {
+    '^@utils/(.*)$': '<rootDir>/src/utils/$1',
+    '^@handlers/(.*)$': '<rootDir>/src/handlers/$1',
+  },
+};