react router v7 as a framework (SPA mode) rewrite

README.md

@@ -12,13 +12,14 @@ The goal is to standardize how we build web projects in the company.
 
 ## Packages
 
+- [React router v7 as a framework](https://reactrouter.com/start/framework/installation) using the `default` template and SPA mode
 - [Vite](https://vitejs.dev/) using the `react-ts` installation
 - [MUI](https://mui.com/material-ui/getting-started/) for our components library
-- [React router](https://reactrouter.com/en/main) for the pages routing
 - [Axios](https://axios-http.com/docs/intro) for API calls
+- [React query](https://tanstack.com/query/latest/docs/framework/react/overview) for server-state management
+- [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) for client-state management
 - [i18next](https://www.i18next.com/) for internationalization
 - [Yup](https://github.com/jquense/yup?tab=readme-ov-file) for schema validation
-- [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) for global store
 
 ## License
 

azure-pipeline/build_frontend.yml

@@ -28,15 +28,15 @@ jobs:
       - script: |
           cd frontend
           corepack enable
-          yarn set version stable
+          yarn set version 4.6
           yarn
           yarn build
-        displayName: "Install and Build using Yarn"
+        displayName: "Install and Build using Yarn 4.6"
 
       - task: CopyFiles@2
         displayName: "Copy files to build folder"
         inputs:
-          sourceFolder: "$(System.DefaultWorkingDirectory)/frontend/dist"
+          sourceFolder: "$(System.DefaultWorkingDirectory)/frontend/build/client"
           targetFolder: "$(Build.ArtifactStagingDirectory)"
           cleanTargetFolder: true
 

frontend/.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

frontend/.editorconfig

@@ -1,9 +1,7 @@
-root = true
-
 [*]
+charset = utf-8
+end_of_line = lf
 indent_size = 2
 indent_style = space
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
 insert_final_newline = true
+max_line_length = 80

frontend/example.env → frontend/.env.example

@@ -1,7 +1,6 @@
-VITE_PORT=8080
+VITE_PORT=8000
 VITE_GENERATE_SOURCEMAP=true
 VITE_ENV=local
 VITE_VERSION_NUMBER=v0.0.1
-VITE_API_URL=<API_URL>
 VITE_GA_TRACKING_ID=<GA_TRACKING_ID>
-VITE_DOCKER=false
+VITE_API_URL=https://dummyjson.com

frontend/.gitattributes

@@ -0,0 +1,217 @@
+## GITATTRIBUTES FOR WEB PROJECTS
+#
+# These settings are for any web project.
+#
+# Details per file setting:
+#   text    These files should be normalized (i.e. convert CRLF to LF).
+#   binary  These files are binary and should be left untouched.
+#
+# Note that binary is a macro for -text -diff.
+######################################################################
+
+# Auto detect
+##   Handle line endings automatically for files detected as
+##   text and leave all files detected as binary untouched.
+##   This will handle all files NOT defined below.
+*                 text=auto
+
+# Source code
+*.bash            text eol=lf
+*.bat             text eol=crlf
+*.cmd             text eol=crlf
+*.coffee          text
+*.css             text diff=css
+*.htm             text diff=html
+*.html            text diff=html
+*.inc             text
+*.ini             text
+*.js              text
+*.mjs             text
+*.cjs             text
+*.json            text
+*.jsx             text
+*.less            text
+*.ls              text
+*.map             text -diff
+*.od              text
+*.onlydata        text
+*.php             text diff=php
+*.pl              text
+*.ps1             text eol=crlf
+*.py              text diff=python
+*.rb              text diff=ruby
+*.sass            text
+*.scm             text
+*.scss            text diff=css
+*.sh              text eol=lf
+.husky/*          text eol=lf
+*.sql             text
+*.styl            text
+*.tag             text
+*.ts              text
+*.tsx             text
+*.xml             text
+*.xhtml           text diff=html
+
+# Docker
+Dockerfile        text
+
+# Documentation
+*.ipynb           text eol=lf
+*.markdown        text diff=markdown
+*.md              text diff=markdown
+*.mdwn            text diff=markdown
+*.mdown           text diff=markdown
+*.mkd             text diff=markdown
+*.mkdn            text diff=markdown
+*.mdtxt           text
+*.mdtext          text
+*.txt             text
+AUTHORS           text
+CHANGELOG         text
+CHANGES           text
+CONTRIBUTING      text
+COPYING           text
+copyright         text
+*COPYRIGHT*       text
+INSTALL           text
+license           text
+LICENSE           text
+NEWS              text
+readme            text
+*README*          text
+TODO              text
+
+# Templates
+*.dot             text
+*.ejs             text
+*.erb             text
+*.haml            text
+*.handlebars      text
+*.hbs             text
+*.hbt             text
+*.jade            text
+*.latte           text
+*.mustache        text
+*.njk             text
+*.phtml           text
+*.svelte          text
+*.tmpl            text
+*.tpl             text
+*.twig            text
+*.vue             text
+
+# Configs
+*.cnf             text
+*.conf            text
+*.config          text
+.editorconfig     text
+.env              text
+.gitattributes    text
+.gitconfig        text
+.htaccess         text
+*.lock            text -diff
+package.json      text eol=lf
+package-lock.json text eol=lf -diff
+pnpm-lock.yaml    text eol=lf -diff
+.prettierrc       text
+yarn.lock         text -diff
+*.toml            text
+*.yaml            text
+*.yml             text
+browserslist      text
+Makefile          text
+makefile          text
+# Fixes syntax highlighting on GitHub to allow comments
+tsconfig.json     linguist-language=JSON-with-Comments
+
+# Heroku
+Procfile          text
+
+# Graphics
+*.ai              binary
+*.bmp             binary
+*.eps             binary
+*.gif             binary
+*.gifv            binary
+*.ico             binary
+*.jng             binary
+*.jp2             binary
+*.jpg             binary
+*.jpeg            binary
+*.jpx             binary
+*.jxr             binary
+*.pdf             binary
+*.png             binary
+*.psb             binary
+*.psd             binary
+# SVG treated as an asset (binary) by default.
+*.svg             text
+# If you want to treat it as binary,
+# use the following line instead.
+# *.svg           binary
+*.svgz            binary
+*.tif             binary
+*.tiff            binary
+*.wbmp            binary
+*.webp            binary
+
+# Audio
+*.kar             binary
+*.m4a             binary
+*.mid             binary
+*.midi            binary
+*.mp3             binary
+*.ogg             binary
+*.ra              binary
+
+# Video
+*.3gpp            binary
+*.3gp             binary
+*.as              binary
+*.asf             binary
+*.asx             binary
+*.avi             binary
+*.fla             binary
+*.flv             binary
+*.m4v             binary
+*.mng             binary
+*.mov             binary
+*.mp4             binary
+*.mpeg            binary
+*.mpg             binary
+*.ogv             binary
+*.swc             binary
+*.swf             binary
+*.webm            binary
+
+# Archives
+*.7z              binary
+*.gz              binary
+*.jar             binary
+*.rar             binary
+*.tar             binary
+*.zip             binary
+
+# Fonts
+*.ttf             binary
+*.eot             binary
+*.otf             binary
+*.woff            binary
+*.woff2           binary
+
+# Executables
+*.exe             binary
+*.pyc             binary
+# Prevents massive diffs caused by vendored, minified files
+**/.yarn/releases/**   binary
+**/.yarn/plugins/**    binary
+
+# RC files (like .babelrc or .eslintrc)
+*.*rc             text
+
+# Ignore files (like .npmignore or .gitignore)
+*.*ignore         text
+
+# Prevents massive diffs from built files
+dist/*            binary