docs: 📝 update readme

README.md

@@ -14,26 +14,51 @@ Develop an app for the law enforcement forces where they just need to take a pho
 * 2021/09/13: the Direction of Numeric of French Ministy of the Interior hires [a developer and a data scientist](https://eig.etalab.gouv.fr/defis/basegun/) to develop a Minimum Viable Product for 10 months.
 * 2022/03: first prototype in production (basegun.fr)
 * 2022/09: tests with real users from police and gendarmerie
-* 2024/02: solution deployed to all professional mobile phones of gendarmerie forces in France on basegun.interieur.gouv.fr
+* 2024/02: solution deployed to all professional mobile phones of gendarmerie forces in France on https://basegun.interieur.gouv.fr
 
-## Technical details
+## Technical Stack
+[![Static Badge](https://img.shields.io/badge/Vue%203-4FC08D?style=for-the-badge&logo=vuedotjs&logoColor=white)](https://vuejs.org/) 
+[![Static Badge](https://img.shields.io/badge/FastAPI-009485?style=for-the-badge&logo=fastapi&logoColor=white)](https://fastapi.tiangolo.com/) 
+[![forthebadge made-with-vue](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/) 
+[![Static Badge](https://img.shields.io/badge/Python-FFDF76?style=for-the-badge&logo=python)](https://www.python.org/) 
+[![Static Badge](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)](https://vitejs.dev/) 
+[![Static Badge](https://img.shields.io/badge/Pinia-ffd859?style=for-the-badge)](https://pinia.vuejs.org/) 
+[![forthebadge made-with-vue](https://img.shields.io/badge/UnoCSS-CC6699?style=for-the-badge&logo=unocss)](https://vue-chartjs.org/)
+
+### Linter
+[![Generic badge](https://img.shields.io/badge/RUFF-4C4C4C?style=for-the-badge&logo=ruff)](https://github.com/astral-sh/ruff) 
+[![Generic badge](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)](https://eslint.org/) 
+[![Generic badge](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)](https://prettier.io/)
+
+### DSFR (French State Design System)
+
+[![Generic badge](https://img.shields.io/badge/Vue-DSFR-%23180880?style=for-the-badge&logo=vuedotjs&logoColor=white&labelColor=4FC08D)](https://vue-ds.fr/)
 
 ### Requirements
-Dependancies:
-* make
-* docker
-* docker-compose
-* pnpm
+Dependancies :
+
+[![Generic badge](https://img.shields.io/badge/PNPM-4C4C4C?style=for-the-badge&logo=pnpm)](https://pnpm.io/) 
+
+[![Generic badge](https://img.shields.io/badge/PIP-4C4C4C?style=for-the-badge&logo=pypi)](https://packaging.python.org/en/latest/tutorials/installing-packages/) 
+
+[![Generic badge](https://img.shields.io/badge/Make-4C4C4C?style=for-the-badge&logo=ankermake&logoColor=orange)](https://www.gnu.org/software/make/manual/make.html) 
+
+[![Generic badge](https://img.shields.io/badge/Docker-4C4C4C?style=for-the-badge&logo=docker)](https://www.docker.com/) 
+
+[![Generic badge](https://img.shields.io/badge/Docker-Compose-4C4C4C?style=for-the-badge&logo=docker)](https://docs.docker.com/compose/) 
 
 See also [Debugging](https://github.com/dnum-mi/Basegun/blob/develop/backend/README.md#debugging) section for all the env variables needed for the website to work fully operationally.
-### Install
+
+## Setup project for development
+
+### Build containers
 
 ```bash
 # install in dev mode
 make build
 ```
 
-### Launch the website
+### Launch containers
 ```bash
 # run
 make up
@@ -42,26 +67,28 @@ make up
 make down
 ```
 
-### Authentication
+### Setup frontend and launch using Vite
+Use ``pnpm install`` on ``frontend`` folder
+
+Use ``pnpm run start`` for start the website with Vite
+
+### Lints and fixes files
+Use ``pre-commit run --all-files`` for linting on frontend and backend folders
 
-1. Login into keycloak
-2. Go to the Basegun realm
-3. Then in "Realm settings", go to "Keys"
-4. Copy the RS256 public key and paste it in the docker compose.
 
 ## Debugging
 
-* If the interface of the website does not appear on localhost:3000, there is an issue with frontend. In terminal, run `docker logs basegun-frontend`
+* If the interface of the website does not appear on ``http://localhost:5173``, there is an issue with frontend. In terminal, run `docker logs basegun-frontend`
 
 * If the interface shows up properly but there is a bug at image upload, there is an issue with the backend. Try to find error log:
     * In terminal, run `docker logs basegun-backend`
-    * If you cannot access terminal or don't see anything, go to `localhost:5000/logs` to see latest logs.
+    * If you cannot access terminal or don't see anything, go to `http://localhost:5000/logs` to see latest logs.
 
 * Beside frontend and backend services, we use some containers in dev which simulate some services provided by our cloud provider: s3 storage, mail server... See our [infrastructure repo](https://github.com/dnum-mi/basegun-infra) for more info about app architecture.
 
 ## Testing the website like you were a police or gendarme user with Keycloak
 1. Set your User Agent to 'SAID'
-2. Click on the button 'Contacter un expert' on the result page or go to localhost:5173/expert-contact
+2. Go to ``http://localhost:5173/expert-contact``.
 This will redirect you to a login page where you have two options :
 * If you want to test the police path, use `police` as username and `password` as password.
 * For the gendarmerie path, use `gendarmerie` as username and `password` as password.

frontend/README.md

@@ -9,7 +9,7 @@ pnpm run start
 
 ## How to run automated tests ?
 
-1. Make sure the bakend stack is running by running `docker compose up -d` in the backend folder.
+1. Make sure the backend stack is running by running `docker compose up -d` in the backend folder.
 2. Make sure all the dependencies are installed by running `pnpm install` in the frontend folder.
 3. Make sure the frontend is running : `pnpm run start`
 
@@ -19,7 +19,7 @@ pnpm run test:e2e-ci
 
 ## How to check code coverage ?
 
-Open ./frontend/coverage/lcov-report/index.html or run `npx nyc report`
+Open `./frontend/coverage/lcov-report/index.html` or run `npx nyc report`
 
 ## Where to find all availables commands ?