app/assets/stylesheets/application.postcss.css

@@ -1 +1,9 @@
 /* Entry point for your PostCSS build */
+
+/* Import Tailwind using PostCSS */
+@import "tailwindcss";
+
+/** Default text color */
+body {
+    color: #555555;
+}

app/views/components/_header.html.erb

@@ -0,0 +1,123 @@
+<!--
+Note:   The logout method is handled by logout_controller
+        in app/javascript/controllers/logout_controller.js
+-->
+<nav x-data="{ open: false }" class="bg-black border-b border-gray-100">
+  <!-- Primary Navigation Menu -->
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex justify-between h-16">
+      <div class="flex">
+        <!-- Logo -->
+        <div class="shrink-0 flex items-center">
+          <%= link_to "Aperonight", "test", class: "text-white" %>
+        </div>
+
+        <!-- Navigation Links -->
+        <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
+          <!-- Dashboard  -->
+          <%= link_to "Soirées et afterworks", "#",
+            class: "inline-flex
+            items-center px-1 pt-1 border-b-2 border-transparent
+            text-sm font-medium leading-5 text-gray-300
+            hover:text-gray-500 hover:border-gray-300 focus:outline-none
+            focus:text-gray-700 focus:border-gray-300 transition
+            duration-150 ease-in-out" %>
+
+          <!-- Dashboard  -->
+          <%= link_to "Concerts", "#",
+            class: "inline-flex
+            items-center px-1 pt-1 border-b-2 border-transparent
+            text-sm font-medium leading-5 text-gray-300
+            hover:text-gray-500 hover:border-gray-300 focus:outline-none
+            focus:text-gray-700 focus:border-gray-300 transition
+            duration-150 ease-in-out" %>
+        </div>
+      </div>
+
+      <!-- Settings Dropdown -->
+      <div class="hidden sm:flex sm:items-center sm:ms-6">
+        <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
+          <div @click="open = ! open">
+            <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
+              <div>Mon profil</div>
+              <div class="ms-1">
+                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+              </div>
+            </button>
+          </div>
+
+          <div x-show="open"
+               x-transition:enter="transition ease-out duration-200"
+               x-transition:enter-start="opacity-0 scale-95"
+               x-transition:enter-end="opacity-100 scale-100"
+               x-transition:leave="transition ease-in duration-75"
+               x-transition:leave-start="opacity-100 scale-100"
+               x-transition:leave-end="opacity-0 scale-95"
+               class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0"
+               style="display: none;"
+               @click="open = false">
+            <div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white">
+              <%= link_to "Profil", "#", class: "block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" %>
+
+            <!-- Logout -->
+            <%= link_to "Déconnexion", destroy_user_session_path,
+                data: {
+                controller: "logout",
+                action: "click->logout#signOut",
+                logout_url_value: destroy_user_session_path,
+                login_url_value: new_user_session_path,
+                turbo: false
+                },
+                class: "inline-block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" %>
+
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Hamburger -->
+      <div class="-me-2 flex items-center sm:hidden">
+        <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
+          <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+            <path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            <path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Responsive Navigation Menu -->
+  <div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
+    <div class="pt-2 pb-3 space-y-1">
+      <%= link_to "Dashboard", "test", class: "block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out" %>
+    </div>
+
+    <!-- Responsive Settings Options -->
+    <div class="pt-4 pb-1 border-t border-gray-200">
+      <div class="px-4">
+        <div class="font-medium text-base text-gray-800">Test</div>
+        <div class="font-medium text-sm text-gray-500">Test</div>
+      </div>
+
+      <div class="mt-3 space-y-1">
+        <%= link_to "Profile", "test", class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out" %>
+
+        <!-- Logout -->
+        <%= link_to "Déconnexion", destroy_user_session_path,
+            data: {
+              controller: "logout",
+              action: "click->logout#signOut",
+              logout_url_value: destroy_user_session_path,
+              login_url_value: new_user_session_path,
+              turbo: false
+            },
+            class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out" %>
+
+      </div>
+    </div>
+  </div>
+</nav>

app/views/layouts/application.html.erb

@@ -23,6 +23,11 @@
   </head>
 
   <body>
+
+    <div id="header">
+      <%= render "components/header" %>
+    </div><!-- /#header -->
+
     <%= yield %>
   </body>
 </html>

db/schema.rb

@@ -0,0 +1,25 @@
+# This file is auto-generated from the current state of the database. Instead
+# of editing this file, please use the migrations feature of Active Record to
+# incrementally modify your database, and then regenerate this schema definition.
+#
+# This file is the source Rails uses to define your schema when running `bin/rails
+# db:schema:load`. When creating a new database, `bin/rails db:schema:load` tends to
+# be faster and is potentially less error prone than running all of your
+# migrations from scratch. Old migrations may fail to apply correctly if those
+# migrations use external dependencies or application code.
+#
+# It's strongly recommended that you check this file into your version control system.
+
+ActiveRecord::Schema[8.0].define(version: 2025_08_16_145933) do
+  create_table "users", charset: "utf8mb4", collation: "utf8mb4_uca1400_ai_ci", force: :cascade do |t|
+    t.string "email", default: "", null: false
+    t.string "encrypted_password", default: "", null: false
+    t.string "reset_password_token"
+    t.datetime "reset_password_sent_at"
+    t.datetime "remember_created_at"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["email"], name: "index_users_on_email", unique: true
+    t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
+  end
+end

package.json

@@ -1,20 +1,28 @@
 {
   "name": "app",
   "private": true,
-  "devDependencies": {
-    "esbuild": "^0.25.9"
-  },
   "scripts": {
     "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
     "build:css": "postcss ./app/assets/stylesheets/application.postcss.css -o ./app/assets/builds/application.css"
   },
   "dependencies": {
     "@hotwired/stimulus": "^3.2.2",
-    "@hotwired/turbo-rails": "^8.0.16",
+    "@hotwired/turbo-rails": "^8.0.13"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.4",
+    "@types/alpinejs": "^3.13.11",
+    "alpinejs": "^3.14.9",
     "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.6",
+    "cssnano": "^7.0.6",
+    "esbuild": "^0.25.4",
+    "pm2": "^6.0.5",
+    "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.1",
-    "postcss-nesting": "^13.0.2"
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-import": "^16.1.0",
+    "postcss-nested": "^7.0.2",
+    "postcss-nesting": "^13.0.1",
+    "tailwindcss": "^4.1.4"
   }
 }

pm2.sh

@@ -0,0 +1,3 @@
+#!/bin/env bash
+
+npx pm2 start

postcss.config.js

@@ -1,7 +1,19 @@
-module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('postcss-nesting'),
-    require('autoprefixer'),
-  ],
+/**
+ * PostCSS configuration
+ */
+const config = {
+  plugins: [require("postcss-import"), require("@tailwindcss/postcss")],
+};
+
+// Add more modules to production
+if (process.env.RAILS_ENV === "production") {
+  config.plugins.push(
+    require("cssnano")({ preset: "default" }),
+    require("autoprefixer"),
+    require("postcss-nested"),
+    require("postcss-flexbugs-fixes"),
+  );
 }
+
+// Export config file
+module.exports = config;

rubocop.sh

@@ -0,0 +1,3 @@
+#!/bin/env bash
+
+docker compose run --rm rails bash -c "bundle exec rubocop"

server.sh

@@ -0,0 +1,10 @@
+#!/bin/bash -e
+
+if [ -f tmp/pids/server.pid ]; then
+    rm tmp/pids/server.pid
+fi
+
+rails server -b 0.0.0.0
+
+# This will exec the CMD from your Dockerfile, i.e. "npm start"
+exec "$@"