diff --git a/.github/label-pr.yml b/.github/label-pr.yml
new file mode 100644
index 0000000..89bfecf
--- /dev/null
+++ b/.github/label-pr.yml
@@ -0,0 +1,10 @@
+- regExp: ".*\\.ts+$"
+  labels: ["typescript"]
+- regExp: ".*\\.sql+$"
+  labels: ["database", "critical"]
+- regExp: ".*\\.md+$"
+  labels: ["documentation"]
+- regExp: "^(pom\\.xml|package\\.json|build\\.gradle)$"
+  labels: ["dependencies"]
+- regExp: ".*\\.(zip|jar|war|ear)+$"
+  labels: ["artifact", "invalid"]
\ No newline at end of file
diff --git a/.github/workflows/blank.yml b/.github/workflows/1-setup_automated_build.yml
similarity index 63%
rename from .github/workflows/blank.yml
rename to .github/workflows/1-setup_automated_build.yml
index 1210dd8..68d696b 100644
--- a/.github/workflows/blank.yml
+++ b/.github/workflows/1-setup_automated_build.yml
@@ -1,15 +1,15 @@
 # This is a basic workflow to help you get started with Actions
 
-name: Blank
+name: 1- 🔎 Get Started
 
 # Controls when the workflow will run
 on:
   # Triggers the workflow on push or pull request events but only for the "main" branch
   push:
-    branches: [ "demo-step1" ]
+    branches: [ "demo-ci" ]
   pull_request:
-    branches: [ "demo-step1" ]
- 
+    branches: [ "demo-ci" ]
+
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
@@ -17,32 +17,23 @@ on:
 jobs:
   # This workflow contains a single job called "build"
   build:
-    name: 🐳 Build me (Wild School Session)
+    name: 🐳 Build
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v3
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
 
       # Runs a single command using the runners shell
-      - name: Run a one-line script
+      - name: 👟 Run a one-line script
         run: echo Hello, world!
 
       # Runs a set of commands using the runners shell
-      - name: Run a multi-line script
+      - name: 🏃🏼🏃🏼 Run a multi-line script
         run: |
           echo Add other actions to build,
           echo test, and deploy your project.
 
-      # Runs  a test workflow
-      - name: Run markdown lint
-        run: |
-          npm install remark-cli remark-preset-lint-consistent
-          npx remark . --use remark-preset-lint-consistent --frail
-
-      - uses: actions/upload-artifact@main
-        with:
-          name: remark-lint-report
-          path: public/
diff --git a/.github/workflows/10-prettier.yml b/.github/workflows/10-prettier.yml
new file mode 100644
index 0000000..3d5ddb4
--- /dev/null
+++ b/.github/workflows/10-prettier.yml
@@ -0,0 +1,40 @@
+name: 10- 💄 Prettier & Formatting code 
+on:
+  push:
+    branches:
+      - demo-ci
+  pull_request: {}
+permissions:
+  actions: write
+
+jobs:
+  lint:
+    name: 💄 Prettier
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.9.1
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: 💄 Prettier
+        run: npm run format
+
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: "fix format!"
+          commit_user_name: akiroussama
+          commit_user_email: akir.oussama@gmail.com
+          branch: demo-ci
+
diff --git a/.github/workflows/13-labeler.yml b/.github/workflows/13-labeler.yml
new file mode 100644
index 0000000..28d1652
--- /dev/null
+++ b/.github/workflows/13-labeler.yml
@@ -0,0 +1,16 @@
+# Workflow to associate labels automatically
+name: 13- 🔖labeler
+# Trigger the workflow on pull request events
+on: [pull_request]
+jobs:
+  label:
+    runs-on: ubuntu-18.04
+    steps:
+      # We need to checkout the repository to access the configured file (.github/label-pr.yml)
+      - uses: actions/checkout@v2
+      - name: Labeler
+        uses: docker://decathlon/pull-request-labeler-action:2.0.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # Here we can override the path for the action configuration. If none is provided, default one is `.github/label-pr.yml`
+          CONFIG_PATH: ${{ secrets.GITHUB_WORKSPACE }}/.github/label-pr.yml
\ No newline at end of file
diff --git a/.github/workflows/14-create-release.yml b/.github/workflows/14-create-release.yml
new file mode 100644
index 0000000..a004aa8
--- /dev/null
+++ b/.github/workflows/14-create-release.yml
@@ -0,0 +1,27 @@
+name: 13- 🚢Create Release
+on:
+  push:
+    branches:
+      - release
+
+jobs:
+  build:
+    name: Create Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: Release ${{ github.ref }}
+          body: |
+            Changes in this Release
+            - First Change
+            - Second Change
+          draft: false
+          prerelease: false
\ No newline at end of file
diff --git a/.github/workflows/deploy.yml b/.github/workflows/15-deploy.yml
similarity index 96%
rename from .github/workflows/deploy.yml
rename to .github/workflows/15-deploy.yml
index 4128983..8f5ff61 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/15-deploy.yml
@@ -4,6 +4,7 @@ on:
     branches:
       - main
       - dev
+      - demo-ci
   pull_request: {}
 permissions:
   actions: write
@@ -119,7 +120,7 @@ jobs:
   build:
     name: 🐳 Build
     # only build/deploy main branch on pushes
-    if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
+    if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/demo-ci') && github.event_name == 'push' }}
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
@@ -180,7 +181,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: [lint, typecheck, vitest, cypress, build]
     # only build/deploy main branch on pushes
-    if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
+    if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/demo-ci') && github.event_name == 'push' }}
 
     steps:
       - name: 🛑 Cancel Previous Runs
diff --git a/.github/workflows/16-auto_approve_pull_request.yml b/.github/workflows/16-auto_approve_pull_request.yml
new file mode 100644
index 0000000..8d0def2
--- /dev/null
+++ b/.github/workflows/16-auto_approve_pull_request.yml
@@ -0,0 +1,15 @@
+name: 16- 🔥Auto approve PR
+
+on:
+  pull_request
+
+jobs:
+  auto-approve:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    steps:
+    - uses: hmarr/auto-approve-action@v2
+      if: github.actor == 'akiroussama'
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
diff --git a/.github/workflows/multiOs.yml b/.github/workflows/2-multi_os.yml
similarity index 63%
rename from .github/workflows/multiOs.yml
rename to .github/workflows/2-multi_os.yml
index 7635afb..8e0d093 100644
--- a/.github/workflows/multiOs.yml
+++ b/.github/workflows/2-multi_os.yml
@@ -1,14 +1,14 @@
   # This is a basic workflow to help you get started with Actions
-
-name: Multi Versions
+  # and how use multi OS & Versions
+name: 2- 🦑 Multi OS & Versions
 
 # Controls when the workflow will run
 on:
   # Triggers the workflow on push or pull request events but only for the "main" branch
   push:
-    branches: [ "demo-step1" ]
+    branches: [ "demo-ci" ]
   pull_request:
-    branches: [ "demo-step1" ]
+    branches: [ "demo-ci" ]
  
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -16,7 +16,7 @@ on:
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
     exemple_multi_version:
-        name: ⚡️ Use many os & node versions
+        name: 🐙 Use many os & node versions
         strategy:
           # continuer à excuter les autres workflow si un échoue !!! :)
           fail-fast: false 
@@ -27,11 +27,21 @@ jobs:
               - os: windows-latest
                 node: 16
                 npm: 6
+
         runs-on: ${{ matrix.os }}
         steps:
-          - uses: actions/setup-node@v3
+          - name: ⚙️ Setup node
+            uses: actions/setup-node@v3
             with:
               node-version: ${{ matrix.node }}
-          - if: ${{ matrix.npm }}
+        
+          - name: 🔧 only install on windows & node version is 16
+            if: ${{ matrix.npm }}
             run: npm install -g npm@${{ matrix.npm }}
-          - run: npm --version
\ No newline at end of file
+
+          - name: 👀 Read npm version 
+            run: npm --version
+
+          #error, should use -v
+          - name: 🔖 Read node version 
+            run: node -v
\ No newline at end of file
diff --git a/.github/workflows/3-Linting_Typecheck.yml b/.github/workflows/3-Linting_Typecheck.yml
new file mode 100644
index 0000000..50a60b7
--- /dev/null
+++ b/.github/workflows/3-Linting_Typecheck.yml
@@ -0,0 +1,56 @@
+name: 3- 🔬 Linting & TypeCheck 🔎
+on:
+  push:
+    branches:
+      - demo-ci
+  pull_request: {}
+permissions:
+  actions: write
+  contents: read
+
+jobs:
+  lint:
+    name: ⬣ ESLint
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.9.1
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: 🔬 Lint
+        run: npm run lint
+
+  typecheck:
+    name: ʦ TypeScript
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.9.1
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: 🔎 Type check
+        run: npm run typecheck --if-present
diff --git a/.github/workflows/4-caching.yml b/.github/workflows/4-caching.yml
new file mode 100644
index 0000000..445cd7a
--- /dev/null
+++ b/.github/workflows/4-caching.yml
@@ -0,0 +1,38 @@
+name: 4- 🪄 Caching ✨magic✨
+on:
+  push:
+    branches:
+      - demo-ci
+  pull_request: {}
+permissions:
+  actions: write
+  contents: read
+
+jobs:
+  withcache:
+    name: 🪄 With Cache !
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 14
+          cache: 'npm'
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - run: npm ci
+      - run: npm run test
+  
\ No newline at end of file
diff --git a/.github/workflows/upload.yml b/.github/workflows/5-save_artifact.yml
similarity index 87%
rename from .github/workflows/upload.yml
rename to .github/workflows/5-save_artifact.yml
index 7154bcb..e1a9e9b 100644
--- a/.github/workflows/upload.yml
+++ b/.github/workflows/5-save_artifact.yml
@@ -1,14 +1,14 @@
 # This is a basic workflow to help you get started with Actions
 
-name: upload artifact
+name: 5- 💾 Save artifacts
 
 # Controls when the workflow will run
 on:
   # Triggers the workflow on push or pull request events but only for the "main" branch
   push:
-    branches: [ "main", "dev", "demo-step1" ]
+    branches: ["demo-ci" ]
   pull_request:
-    branches: [ "main", "dev", "demo-step1" ]
+    branches: [ "demo-ci" ]
  
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
diff --git a/.github/workflows/conditions.yml b/.github/workflows/6-conditions.yml
similarity index 84%
rename from .github/workflows/conditions.yml
rename to .github/workflows/6-conditions.yml
index f59886c..3bf254f 100644
--- a/.github/workflows/conditions.yml
+++ b/.github/workflows/6-conditions.yml
@@ -1,14 +1,14 @@
 # This is a basic workflow to help you get started with Actions
 
-name: conditions
+name: 6- 🎌 conditions
 
 # Controls when the workflow will run
 on:
   # Triggers the workflow on push or pull request events but only for the "main" branch
   push:
-    branches: [ "main", "dev" ]
+    branches: [ "demo-ci" ]
   pull_request:
-    branches: [ "main", "dev" ]
+    branches:  [ "demo-ci" ]
  
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -21,7 +21,7 @@ jobs:
       runs-on: ubuntu-latest
       steps:
         - name: 🚀 Deploy Staging
-          if: ${{ github.ref == 'refs/heads/dev' }}
+          if: ${{ github.ref == 'refs/heads/demo-ci' }}
           run: echo deploying in staging !
 
         - name: 🚀 Deploy Production
diff --git a/.github/workflows/dependencies.yml b/.github/workflows/7-dependencies.yml
similarity index 98%
rename from .github/workflows/dependencies.yml
rename to .github/workflows/7-dependencies.yml
index f955087..1937df8 100644
--- a/.github/workflows/dependencies.yml
+++ b/.github/workflows/7-dependencies.yml
@@ -1,6 +1,6 @@
 # This is a basic workflow to help you get started with Actions
 
-name: dependencies
+name: 7- 🧲 dependencies
 
 # Controls when the workflow will run
 on:
diff --git a/.github/workflows/8-unit_test.yml b/.github/workflows/8-unit_test.yml
new file mode 100644
index 0000000..8d27b54
--- /dev/null
+++ b/.github/workflows/8-unit_test.yml
@@ -0,0 +1,33 @@
+name: 8-🌡️ Unit Test
+on:
+  push:
+    branches:
+      - demo-ci
+  pull_request: {}
+permissions:
+  actions: write
+  contents: read
+
+jobs:
+  vitest:
+    name: ⚡ Vitest
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.9.1
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: ⚡ Run vitest
+        run: npm run test -- --coverage
\ No newline at end of file
diff --git a/.github/workflows/9-E2E_test.yml b/.github/workflows/9-E2E_test.yml
new file mode 100644
index 0000000..c88c8f9
--- /dev/null
+++ b/.github/workflows/9-E2E_test.yml
@@ -0,0 +1,47 @@
+name: 9-⚫️ E2E Test
+on:
+  push:
+    branches:
+      - demo-ci
+  pull_request: {}
+permissions:
+  actions: write
+  contents: read
+
+jobs:
+  cypress:
+    name: ⚫️ Cypress
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.9.1
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: 🏄 Copy test env vars
+        run: cp .env.example .env
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: 🛠 Setup Database
+        run: npx prisma migrate reset --force
+
+      - name: ⚙️ Build
+        run: npm run build
+
+      - name: 🌳 Cypress run
+        uses: cypress-io/github-action@v4
+        with:
+          start: npm run start:mocks
+          wait-on: "http://localhost:8811"
+        env:
+          PORT: "8811"
diff --git a/README.md b/README.md
index ceb02fa..c1d3d4b 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Remix Indie Stack
 
-![The Remix Indie Stack](https://repository-images.githubusercontent.com/465928257/a241fa49-bd4d-485a-a2a5-5cb8e4ee0abf)
+![The Remix Indie Stack](https://www.wildcodeschool.com/assets/wildcodeschool-logo-meta-image-f6f2f7f52b82bfc419f031f6a989020a8b094d7a4e6676ab6f0dff0b0f470da9.png)
 
 Learn more about [Remix Stacks](https://remix.run/stacks).
 
@@ -170,3 +170,12 @@ This project uses ESLint for linting. That is configured in `.eslintrc.js`.
 ### Formatting
 
 We use [Prettier](https://prettier.io/) for auto-formatting in this project. It's recommended to install an editor plugin (like the [VSCode Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) to get auto-formatting on save. There's also a `npm run format` script you can run to format all files in the project.
+
+
+[![🔬 Linting & TypeCheck 🔎](https://github.com/akiroussama/ci-example-using-github-actions/actions/workflows/3-Linting_Typecheck.yml/badge.svg?branch=demo-ci)](https://github.com/akiroussama/ci-example-using-github-actions/actions/workflows/3-Linting_Typecheck.yml)
+
+
+
+
+[![9-⚫️ E2E Test](https://github.com/akiroussama/ci-example-using-github-actions/actions/workflows/9-E2E_test.yml/badge.svg?branch=demo-ci)](https://github.com/akiroussama/ci-example-using-github-actions/actions/workflows/9-E2E_test.yml)
+
diff --git a/app/root.tsx b/app/root.tsx
index 82f033b..3156451 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -15,11 +15,14 @@ import {
 
 import tailwindStylesheetUrl from "./styles/tailwind.css";
 import { getUser } from "./session.server";
+// uncomment me to provoke eslint error for demo purposes
+import { getUserFromSession } from "./session.server";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
 };
 
+//this is just a comment!
 export const meta: MetaFunction = () => ({
   charset: "utf-8",
   title: "WS Notes",