frontend: configure prettier

Author: dannywillems

frontend/.prettierrc.json

@@ -0,0 +1,28 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "avoid",
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": "**/*.html",
+      "options": {
+        "parser": "angular",
+        "printWidth": 80,
+        "bracketSameLine": false,
+        "htmlWhitespaceSensitivity": "ignore",
+        "singleAttributePerLine": false
+      }
+    }
+  ]
+}

frontend/Makefile

@@ -0,0 +1,41 @@
+# Frontend Makefile
+
+.PHONY: help
+help: ## Display this help message
+	@echo "Frontend Makefile - Available targets:"
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
+
+.PHONY: install
+install: ## Install npm dependencies
+	npm install
+
+.PHONY: prettify
+prettify: ## Format HTML, SCSS, TypeScript, and JavaScript files with Prettier
+	npx prettier --write 'src/**/*.{ts,js,html,scss,css,json}'
+
+.PHONY: check-prettify
+check-prettify: ## Check if files are formatted with Prettier
+	npx prettier --check 'src/**/*.{ts,js,html,scss,css,json}'
+
+.PHONY: start
+start: ## Start the development server
+	npm start
+
+.PHONY: build
+build: ## Build the frontend for production
+	npm run build:prod
+
+.PHONY: test
+test: ## Run Cypress tests
+	npm run tests
+
+.PHONY: test-headless
+test-headless: ## Run Cypress tests in headless mode
+	npm run tests:headless
+
+.PHONY: clean
+clean: ## Clean build artifacts and node_modules
+	rm -rf dist node_modules
+
+.PHONY: rebuild
+rebuild: clean install build ## Clean, reinstall dependencies, and rebuild

frontend/package-lock.json

@@ -19,7 +19,9 @@
     "sentry:sourcemaps": "sentry-cli sourcemaps inject --org openmina-uv --project openmina ./dist/frontend/browser && sentry-cli sourcemaps upload --org openmina-uv --project openmina ./dist/frontend/browser",
     "copy-env": "cp dist/frontend/browser/assets/environments/webnode.js dist/frontend/browser/assets/environments/env.js",
     "deploy": "npm run prebuild && npm run build:prod && npm run copy-env && firebase deploy",
-    "deploy:leaderboard": "npm run prebuild && npm run build:prod && cp dist/frontend/browser/assets/environments/leaderboard.js dist/frontend/browser/assets/environments/env.js && firebase deploy"
+    "deploy:leaderboard": "npm run prebuild && npm run build:prod && cp dist/frontend/browser/assets/environments/leaderboard.js dist/frontend/browser/assets/environments/env.js && firebase deploy",
+    "prettify": "make prettify",
+    "check-prettify": "make check-prettify"
   },
   "private": true,
   "dependencies": {
@@ -84,6 +86,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "prettier": "^3.6.2",
     "terser-webpack-plugin": "^5.3.10",
     "typescript": "~5.8.3",
     "webpack": "^5.88.2",