From 74463c75fc39b27bfa9a49bbb3b568eb6af5bd17 Mon Sep 17 00:00:00 2001
From: Max Wardeh <max@wardeh.org>
Date: Thu, 21 Nov 2024 11:05:01 +0100
Subject: [PATCH] Add skills

---
 assets/js/app.js                              |   8 +-
 assets/js/combobox.js                         |  56 +++++
 lib/maker_passport/accounts.ex                |   1 -
 lib/maker_passport/maker.ex                   | 168 ++++++++++++++-
 lib/maker_passport/maker/profile.ex           |   6 +
 lib/maker_passport/maker/profile_skill.ex     |  22 ++
 lib/maker_passport/maker/skill.ex             |  22 ++
 .../components/core_components.ex             |  20 +-
 .../profile_form_component.html.heex          | 105 ++++-----
 .../live/profile_live/show.ex                 |  74 ++++++-
 .../live/profile_live/show.html.heex          | 104 ++++++---
 .../profile_live/skills_form_component.ex     |  23 ++
 .../live/profile_live/typeahead_component.ex  | 204 ++++++++++++++++++
 .../20241004232834_create_skills.exs          |  26 +++
 14 files changed, 735 insertions(+), 104 deletions(-)
 create mode 100644 assets/js/combobox.js
 create mode 100644 lib/maker_passport/maker/profile_skill.ex
 create mode 100644 lib/maker_passport/maker/skill.ex
 create mode 100644 lib/maker_passport_web/live/profile_live/skills_form_component.ex
 create mode 100644 lib/maker_passport_web/live/profile_live/typeahead_component.ex
 create mode 100644 priv/repo/migrations/20241004232834_create_skills.exs

diff --git a/assets/js/app.js b/assets/js/app.js
index 9d0a497..b1a365f 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -22,12 +22,18 @@ import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 import Uploaders from "./uploaders"
+import {Combobox, ComboboxOption} from "./combobox"
+
+let Hooks =  {}
+Hooks.Combobox = Combobox
+Hooks.ComboboxOption = ComboboxOption
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {_csrf_token: csrfToken},
-  uploaders: Uploaders
+  uploaders: Uploaders,
+  hooks: Hooks
 })
 
 // Show progress bar on live navigation and form submits
diff --git a/assets/js/combobox.js b/assets/js/combobox.js
new file mode 100644
index 0000000..c1abfe3
--- /dev/null
+++ b/assets/js/combobox.js
@@ -0,0 +1,56 @@
+export const Combobox = {
+    mounted() {
+      const wrapperEl = this.el.closest('div')
+      const toggleButton = wrapperEl.querySelector('button[phx-click="toggle-options"]')
+      const myself = this.el.getAttribute('phx-target')
+  
+      this.el.addEventListener('keydown', event => {
+        if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
+          // Prevent cursor-move from first to last character
+          event.preventDefault()
+        }
+  
+        if (event.key === 'Enter' && document.activeElement === this.el) {
+          // Prevent Submit when combobox is focused
+          event.preventDefault()
+  
+          const listEl = wrapperEl.querySelector('ul')
+          const value = listEl && listEl.dataset.focusedOption || null
+  
+          // The focused value are stored in a data attribute.
+          // So, send the selected value to the component.
+          this.pushEventTo(myself, "select-option", {option: value})
+        }
+      })
+  
+      this.el.addEventListener('keyup', event => {
+        if (['Enter', 'Tab', 'Escape', 'ArrowUp', 'ArrowDown'].includes(event.key)) return
+  
+        // Push the search phrase to the LiveComponent
+        this.pushEventTo(myself, "filter-options", {search_phrase: this.el.value})
+      })
+  
+      toggleButton && toggleButton.addEventListener('click', event => {
+        this.el.focus()
+      })
+  
+      this.handleEvent("set-input-value", data => {
+        // This is sent to all instances of this hook so we need to compare id:s
+        if (data.id !== this.el.id) return
+        this.el.value = data.label
+      })
+    }
+  }
+  
+  export const ComboboxOption = {
+    mounted() {
+      this.el.addEventListener('mouseover', event => {
+        const el = event.target
+        const value = el.getAttribute('phx-value-option')
+        const target = el.getAttribute('phx-target')
+  
+        this.pushEventTo(target, "set-focus-to", {value: value})
+      })
+    }
+  }
+  
\ No newline at end of file
diff --git a/lib/maker_passport/accounts.ex b/lib/maker_passport/accounts.ex
index efca55a..8909ad0 100644
--- a/lib/maker_passport/accounts.ex
+++ b/lib/maker_passport/accounts.ex
@@ -4,7 +4,6 @@ defmodule MakerPassport.Accounts do
   """
 
   import Ecto.Query, warn: false
-  import Ecto.Changeset
 
   alias MakerPassport.Repo
   alias MakerPassport.Maker.Profile
diff --git a/lib/maker_passport/maker.ex b/lib/maker_passport/maker.ex
index 1ce2acb..5c5fddc 100644
--- a/lib/maker_passport/maker.ex
+++ b/lib/maker_passport/maker.ex
@@ -7,7 +7,7 @@ defmodule MakerPassport.Maker do
   alias MakerPassport.Accounts
   alias MakerPassport.Repo
 
-  alias MakerPassport.Maker.Profile
+  alias MakerPassport.Maker.{Profile, Skill, ProfileSkill}
 
   @doc """
   Returns the list of profiles.
@@ -52,7 +52,7 @@ defmodule MakerPassport.Maker do
       ** (Ecto.NoResultsError)
 
   """
-  def get_profile!(id), do: Repo.get!(Profile, id) |> Repo.preload(:user)
+  def get_profile!(id), do: Repo.get!(Profile, id) |> Repo.preload(:user) |> Repo.preload([:skills])
 
   def get_profile_by_user_id!(user_id) do
     user =
@@ -61,6 +61,17 @@ defmodule MakerPassport.Maker do
 
     Repo.get!(Profile, user.profile.id)
     |> Repo.preload(:user)
+    |> Repo.preload([:skills])
+  end
+
+  def get_profile_with_skills_by_user_id!(user_id) do
+    user =
+      Accounts.get_user!(user_id)
+      |> Repo.preload(:profile)
+
+    Repo.get!(Profile, user.profile.id)
+    |> Repo.preload(:user)
+    |> Repo.preload([:skills])
   end
 
 
@@ -129,4 +140,157 @@ defmodule MakerPassport.Maker do
   def change_profile(%Profile{} = profile, attrs \\ %{}) do
     Profile.changeset(profile, attrs)
   end
+
+   @doc """
+  Returns the list of skills.
+
+  ## Examples
+
+      iex> list_skills()
+      [%Skill{}, ...]
+
+  """
+  def list_skills do
+    Repo.all(Skill)
+  end
+
+  @doc """
+  Gets a single skill.
+
+  Raises `Ecto.NoResultsError` if the Skill does not exist.
+
+  ## Examples
+
+      iex> get_skill!(123)
+      %Skill{}
+
+      iex> get_skill!(456)
+      ** (Ecto.NoResultsError)
+
+  """
+  def get_skill!(id), do: Repo.get!(Skill, id)
+
+  @doc """
+  Creates a skill.
+
+  ## Examples
+
+      iex> create_skill(%{field: value})
+      {:ok, %Skill{}}
+
+      iex> create_skill(%{field: bad_value})
+      {:error, %Ecto.Changeset{}}
+
+  """
+  def create_skill(attrs \\ %{}) do
+    %Skill{}
+    |> Skill.changeset(attrs)
+    |> Repo.insert()
+  end
+
+  @doc """
+  Updates a skill.
+
+  ## Examples
+
+      iex> update_skill(skill, %{field: new_value})
+      {:ok, %Skill{}}
+
+      iex> update_skill(skill, %{field: bad_value})
+      {:error, %Ecto.Changeset{}}
+
+  """
+  def update_skill(%Skill{} = skill, attrs) do
+    skill
+    |> Skill.changeset(attrs)
+    |> Repo.update()
+  end
+
+  @doc """
+  Deletes a skill.
+
+  ## Examples
+
+      iex> delete_skill(skill)
+      {:ok, %Skill{}}
+
+      iex> delete_skill(skill)
+      {:error, %Ecto.Changeset{}}
+
+  """
+  def delete_skill(%Skill{} = skill) do
+    Repo.delete(skill)
+  end
+
+  @doc """
+  Returns an `%Ecto.Changeset{}` for tracking skill changes.
+
+  ## Examples
+
+      iex> change_skill(skill)
+      %Ecto.Changeset{data: %Skill{}}
+
+  """
+  def change_skill(%Skill{} = skill, attrs \\ %{}) do
+    Skill.changeset(skill, attrs)
+  end
+
+  def add_skill(profile, skill_text) when is_binary(skill_text) do
+    skill =
+      case Repo.get_by(Skill, %{name: skill_text}) do
+        nil ->
+          %Skill{} |> Skill.changeset(%{name: skill_text}) |> Repo.insert!()
+
+        skill ->
+          skill
+      end
+
+    add_skill(profile, skill.id)
+  end
+
+  def add_skill(%Profile{} = profile, skill_id) do
+    add_skill(profile.id, skill_id)
+  end
+
+  def add_skill(profile_id, skill_id) do
+    ProfileSkill.changeset(%ProfileSkill{}, %{profile_id: profile_id, skill_id: skill_id})
+    |> Repo.insert()
+  end
+
+  def remove_skill(%Profile{} = profile, skill_id) do
+    profile_skill = Repo.get_by(ProfileSkill, %{profile_id: profile.id, skill_id: skill_id})
+    Repo.delete(profile_skill)
+  end
+
+  def search_skills(""), do: []
+
+  def search_skills(search_text) do
+    Repo.all(from s in Skill, where: ilike(s.name, ^"%#{search_text}%"))
+  end
+
+  def to_skill_list(skills) do
+    skills
+    |> Enum.map(&to_skill_tuple/1)
+    |> Enum.sort_by(&elem(&1, 0))
+  end
+
+  def to_skill_list(skills, profile_id) do
+    profile_skills = Repo.all(from ps in ProfileSkill, where: ps.profile_id == ^profile_id)
+    skill_ids_to_exclude = Enum.map(profile_skills, & &1.skill_id)
+    skills = Enum.reject(skills, &(&1.id in skill_ids_to_exclude))
+    skills
+    |> Enum.map(&to_skill_tuple/1)
+    |> Enum.sort_by(&elem(&1, 0))
+  end
+
+  defp to_skill_tuple(skill) do
+    {skill.name, skill.id}
+  end
+
+  def has_skill?(profile, skill_id) do
+    # Check if the profile has the skill by querying the database
+    Repo.exists?(from s in ProfileSkill,
+      where: s.profile_id == ^profile.id and s.skill_id == ^skill_id
+    )
+  end
 end
diff --git a/lib/maker_passport/maker/profile.ex b/lib/maker_passport/maker/profile.ex
index 3868e75..3585daf 100644
--- a/lib/maker_passport/maker/profile.ex
+++ b/lib/maker_passport/maker/profile.ex
@@ -7,6 +7,7 @@ defmodule MakerPassport.Maker.Profile do
   import Ecto.Changeset
 
   alias MakerPassport.Accounts.User
+  alias MakerPassport.Maker.Skill
 
   schema "profiles" do
     field :bio, :string
@@ -15,6 +16,10 @@ defmodule MakerPassport.Maker.Profile do
 
     belongs_to :user, User
 
+    many_to_many :skills, Skill,
+    join_through: "profile_skills",
+    on_replace: :delete
+
     timestamps(type: :utc_datetime)
   end
 
@@ -35,4 +40,5 @@ defmodule MakerPassport.Maker.Profile do
       # Add other required fields
   end
   def profile_complete?(_user), do: false
+
 end
diff --git a/lib/maker_passport/maker/profile_skill.ex b/lib/maker_passport/maker/profile_skill.ex
new file mode 100644
index 0000000..08f4f5a
--- /dev/null
+++ b/lib/maker_passport/maker/profile_skill.ex
@@ -0,0 +1,22 @@
+defmodule MakerPassport.Maker.ProfileSkill do
+  @moduledoc false
+  use Ecto.Schema
+  import Ecto.Changeset
+
+  alias MakerPassport.Maker.{Profile, Skill}
+
+  schema "profile_skills" do
+
+    belongs_to :profile, Profile
+    belongs_to :skill, Skill
+
+    timestamps(type: :utc_datetime)
+  end
+
+  @doc false
+  def changeset(profile_skill, attrs) do
+    profile_skill
+    |> cast(attrs, [:profile_id, :skill_id])
+    |> validate_required([:profile_id, :skill_id])
+  end
+end
diff --git a/lib/maker_passport/maker/skill.ex b/lib/maker_passport/maker/skill.ex
new file mode 100644
index 0000000..71b15a7
--- /dev/null
+++ b/lib/maker_passport/maker/skill.ex
@@ -0,0 +1,22 @@
+defmodule MakerPassport.Maker.Skill do
+  @moduledoc false
+  use Ecto.Schema
+  import Ecto.Changeset
+
+  alias MakerPassport.Maker.Profile
+
+  schema "skills" do
+    field :name, :string
+
+    many_to_many :profiles, Profile, join_through: "profile_skills"
+
+    timestamps(type: :utc_datetime)
+  end
+
+  @doc false
+  def changeset(skill, attrs \\ %{}) do
+    skill
+    |> cast(attrs, [:name])
+    |> validate_required([:name])
+  end
+end
diff --git a/lib/maker_passport_web/components/core_components.ex b/lib/maker_passport_web/components/core_components.ex
index 4e2f959..75568bc 100644
--- a/lib/maker_passport_web/components/core_components.ex
+++ b/lib/maker_passport_web/components/core_components.ex
@@ -231,8 +231,7 @@ defmodule MakerPassportWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "phx-submit-loading:opacity-75 btn",
         @class
       ]}
       {@rest}
@@ -269,6 +268,7 @@ defmodule MakerPassportWeb.CoreComponents do
       <.input name="my-input" errors={["oh no!"]} />
   """
   attr :id, :any, default: nil
+  attr :class, :string, default: ""
   attr :name, :any
   attr :label, :string, default: nil
   attr :value, :any
@@ -318,7 +318,7 @@ defmodule MakerPassportWeb.CoreComponents do
           name={@name}
           value="true"
           checked={@checked}
-          class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
+          class="checkbox" <> @class
           {@rest}
         />
         <%= @label %>
@@ -335,7 +335,7 @@ defmodule MakerPassportWeb.CoreComponents do
       <select
         id={@id}
         name={@name}
-        class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
+        class="select select-bordered w-full max-w-xs" <> @class
         multiple={@multiple}
         {@rest}
       >
@@ -355,9 +355,9 @@ defmodule MakerPassportWeb.CoreComponents do
         id={@id}
         name={@name}
         class={[
-          "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem]",
-          @errors == [] && "border-zinc-300 focus:border-zinc-400",
-          @errors != [] && "border-rose-400 focus:border-rose-400"
+          "textarea textarea-bordered w-full",
+          @errors != [] && "textarea-error",
+          @class
         ]}
         {@rest}
       ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
@@ -377,9 +377,9 @@ defmodule MakerPassportWeb.CoreComponents do
         id={@id}
         value={Phoenix.HTML.Form.normalize_value(@type, @value)}
         class={[
-          "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
-          @errors == [] && "border-zinc-300 focus:border-zinc-400",
-          @errors != [] && "border-rose-400 focus:border-rose-400"
+          "w-full input input-bordered",
+          @errors != [] && "input-error",
+          @class
         ]}
         {@rest}
       />
diff --git a/lib/maker_passport_web/live/profile_live/profile_form_component.html.heex b/lib/maker_passport_web/live/profile_live/profile_form_component.html.heex
index 4f79dff..d7684f6 100644
--- a/lib/maker_passport_web/live/profile_live/profile_form_component.html.heex
+++ b/lib/maker_passport_web/live/profile_live/profile_form_component.html.heex
@@ -1,61 +1,64 @@
 <div>
-    <.simple_form
-        for={@form}
-        id="profile-form"
-        phx-target={@myself}
-        phx-change="validate"
-        phx-submit="save"
-    >
-        <.input field={@form[:name]} type="text" label="Name" />
-        <.input field={@form[:bio]} type="textarea" label="Bio" />
+  <.simple_form
+      for={@form}
+      id="profile-form"
+      phx-target={@myself}
+      phx-change="validate"
+      phx-submit="save"
+  >
+    <.input field={@form[:name]} type="text" label="Name" class="" />
+    <.input field={@form[:bio]} type="textarea" label="Bio" class="h-48" />
 
-        <div class="flex gap-3">
-          <%= unless @profile.profile_image_location == nil || @profile.profile_image_location == "" do %>
-            <div class="avatar flex items-center justify-center">
-              <div class="w-24 rounded-full shadow-2xl">
-                <img src={@profile.profile_image_location} alt="#{@profile.name}'s profile image" />
-              </div>
-            </div>
-          <% end %>
-          <div>
-            <div phx-drop-target={@uploads.profile_image.ref} class="border border-dashed border-slate-400 rounded p-4">
-              <.live_file_input upload={@uploads.profile_image} class="file-input file-input-bordered w-full max-w-sm mr-1" />
-              <p class="text-center">or drag and drop here</p>
-            </div>
-            <div class="mt-1">
-              Max file size <%= trunc(@uploads.profile_image.max_file_size / 1_000_000) %> MB
-            </div>
+    <div class="flex gap-3">
+      <%= unless @profile.profile_image_location == nil || @profile.profile_image_location == "" do %>
+        <div class="avatar flex items-center justify-center">
+          <div class="w-24 rounded-full shadow-2xl">
+            <img src={@profile.profile_image_location} alt="#{@profile.name}'s profile image" />
           </div>
         </div>
+      <% end %>
+      <div>
+        <div phx-drop-target={@uploads.profile_image.ref} class="border border-dashed border-slate-400 rounded p-4">
+          <.live_file_input upload={@uploads.profile_image} class="file-input file-input-bordered w-full max-w-sm mr-1" />
+          <p class="text-center">or drag and drop here</p>
+        </div>
+        <div class="mt-1">
+          Max file size <%= trunc(@uploads.profile_image.max_file_size / 1_000_000) %> MB
+        </div>
+      </div>
+    </div>
 
-        <.error :for={err <- upload_errors(@uploads.profile_image)}>
-          <%= Phoenix.Naming.humanize(err) %>
-        </.error>
+    <.error :for={err <- upload_errors(@uploads.profile_image)}>
+      <%= Phoenix.Naming.humanize(err) %>
+    </.error>
 
-        <div :for={entry <- @uploads.profile_image.entries}>
-          <div class="flex flex-nowrap items-center gap-4 h-36">
-            <div class="flex-none avatar">
-              <div class="w-36">
-                <.live_img_preview class="rounded w-36" entry={entry} />
-              </div>
-            </div>
-            <div class="flex-none w-14">
-            <%= entry.progress %>%
-            </div>
-            <div class="flex-1">
-            <progress class="progress progress-primary" value={"#{entry.progress}%"} max="100"></progress>
-            </div>
-            <div class="flex-none w-14">
-              <button phx-click="cancel" phx-value-ref={entry.ref} class="btn btn-sm btn-circle btn-ghost">✕</button>
-            </div>
+    <div :for={entry <- @uploads.profile_image.entries}>
+      <div class="flex flex-nowrap items-center gap-4 h-36">
+        <div class="flex-none avatar">
+          <div class="w-36">
+            <.live_img_preview class="rounded w-36" entry={entry} />
           </div>
-          <.error :for={err <- upload_errors(@uploads.profile_image, entry)}>
-            <%= Phoenix.Naming.humanize(err) %>
-          </.error>
         </div>
+        <div class="flex-none w-14">
+        <%= entry.progress %>%
+        </div>
+        <div class="flex-1">
+        <progress class="progress progress-primary" value={"#{entry.progress}%"} max="100"></progress>
+        </div>
+        <div class="flex-none w-14">
+          <button phx-click="cancel" phx-value-ref={entry.ref} class="btn btn-sm btn-circle btn-ghost">✕</button>
+        </div>
+      </div>
+      <.error :for={err <- upload_errors(@uploads.profile_image, entry)}>
+        <%= Phoenix.Naming.humanize(err) %>
+      </.error>
+    </div>
 
-        <:actions>
-            <.button phx-disable-with="Saving...">Save Profile</.button>
-        </:actions>
-    </.simple_form>
+    <:actions>
+      <div class="mt-8">
+        <.button phx-disable-with="Saving..." class="btn-primary me-4">Save Profile</.button>
+        <.link class="btn btn-outline" patch={~p"/profiles/#{@profile}"}>Cancel</.link>
+      </div>
+    </:actions>
+  </.simple_form>
 </div>
diff --git a/lib/maker_passport_web/live/profile_live/show.ex b/lib/maker_passport_web/live/profile_live/show.ex
index 93d9379..8637088 100644
--- a/lib/maker_passport_web/live/profile_live/show.ex
+++ b/lib/maker_passport_web/live/profile_live/show.ex
@@ -1,14 +1,18 @@
 defmodule MakerPassportWeb.ProfileLive.Show do
   use MakerPassportWeb, :live_view
 
-  alias MakerPassport.Maker
-
   import MakerPassportWeb.CustomComponents
+  import MakerPassportWeb.ProfileLive.TypeaheadComponent, only: [typeahead: 1]
+
+  alias MakerPassport.Repo
+  alias MakerPassport.Maker
+  alias MakerPassport.Maker.Skill
 
   @impl true
   def mount(_params, _session, socket) do
     user = socket.assigns.current_user
-    profile = Maker.get_profile_by_user_id!(user.id)
+    profile = Maker.get_profile_with_skills_by_user_id!(user.id)
+    skills = ordered_skills(profile)
 
     socket =
       socket
@@ -16,21 +20,81 @@ defmodule MakerPassportWeb.ProfileLive.Show do
       |> assign_new(:form, fn ->
         to_form(Maker.change_profile(profile))
       end)
+      |> assign_new(:skills_form, fn ->
+        to_form(Skill.changeset(%Skill{}))
+      end)
+      |> assign(:skills, skills)
+      |> assign(temporary_assigns: [skills: []])
     {:ok, socket}
+  end
 
+  defp ordered_skills(profile) do
+    profile.skills |> Enum.sort_by(& &1.name)
+  end
+
+  @impl true
+  def handle_info({:typeahead, {skill_name, _}}, socket) do
+    socket =
+      socket
+      |> push_event("set-input-value", %{id: "skills-picker", label: skill_name})
+    {:noreply, socket}
   end
 
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
     profile = Maker.get_profile!(id)
 
-    socket
-      = socket
+    socket =
+      socket
       |> assign(:page_title, page_title(socket.assigns.live_action))
       |> assign(:profile, profile)
     {:noreply, socket}
   end
 
+  @impl true
+  def handle_event("save_skill", %{"search-field" => skill_name}, socket) do
+    save_skill(socket, skill_name, socket.assigns.profile)
+    {:noreply, push_navigate(socket, to: ~p"/profiles/#{socket.assigns.profile.id}/edit-profile")}
+  end
+
+  def handle_event("remove-skill", %{"skill_id" => skill_id}, socket) do
+    remove_skill(socket, String.to_integer(skill_id), socket.assigns.profile)
+    {:noreply, push_navigate(socket, to: ~p"/profiles/#{socket.assigns.profile.id}/edit-profile")}
+  end
+
+  defp save_skill(socket, skill_name, profile) do
+    skill = check_or_create_skill(skill_name)
+    add_or_update_skill(socket, skill, profile)
+    assign(socket, :profile, profile)
+    {:noreply, socket}
+  end
+
+  defp add_or_update_skill(socket, skill, profile) do
+    if Maker.has_skill?(profile, skill.id) do
+      socket
+    else
+      Maker.add_skill(profile, skill.id)
+      socket
+    end
+  end
+
+  defp check_or_create_skill(skill_name) do
+    case Repo.get_by(Skill, name: skill_name) do
+      nil ->
+        %Skill{name: skill_name}
+        |> Skill.changeset()
+        |> Repo.insert!()
+
+      skill ->
+        skill
+    end
+  end
+
+  defp remove_skill(socket, skill_id, profile) do
+    Maker.remove_skill(profile, skill_id)
+    socket
+  end
+
   defp page_title(:show), do: "Show Profile"
   defp page_title(:edit_profile), do: "Edit Profile"
 end
diff --git a/lib/maker_passport_web/live/profile_live/show.html.heex b/lib/maker_passport_web/live/profile_live/show.html.heex
index 3269bc8..2eeece0 100644
--- a/lib/maker_passport_web/live/profile_live/show.html.heex
+++ b/lib/maker_passport_web/live/profile_live/show.html.heex
@@ -1,45 +1,81 @@
 <div
-  class="relative flex size-full min-h-screen flex-col bg-slate-50 justify-between group/design-root overflow-x-hidden"
+  class="relative flex size-full flex-col bg-slate-50 justify-between group/design-root overflow-x-hidden"
   style='font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;'
 >
-  <div>
-    <div>
-      <div class="flex items-center bg-slate-50 p-4 pb-2 justify-between">
-        <div class="text-[#0d151c] text-2xl">
-          My Profile
+  <div class="flex items-center bg-slate-50 pb-2 justify-between">
+    <%= if @current_user && @profile.user.id == @current_user.id do %>
+      <div class="text-[#0d151c] text-2xl">
+        My Profile
+        <.link :if={@live_action != :edit_profile} patch={~p"/profiles/#{@profile}/edit-profile"} phx-click={JS.push_focus()}>
+          <.icon name="hero-pencil-square" class="w-5 h-5 mb-3 hover:text-blue-600" />
+        </.link>
+      </div>
+    <% end %>
+  </div>
+  <div :if={@live_action != :edit_profile} class="flex p-4 @container" id="profile-details">
+    <div class="flex w-full flex-col gap-4 items-center">
+      <div class="flex gap-4 flex-col items-center">
+        <.avatar profile={@profile} size={36} />
+        <div class="">
+          <p class="text-[#0d151c] text-3xl font-bold leading-tight tracking-[-0.015em]"><%= @profile.name %></p>
         </div>
-        <div class="flex items-center justify-end">
-          <%= if @current_user && @profile.user.id == @current_user.id do %>
-            <.link patch={~p"/profiles/#{@profile}/edit-profile"} phx-click={JS.push_focus()}>
-              <.button>Edit Profile</.button>
-            </.link>
-          <% end %>
+        <div>
+          <p class="text-[#0d151c] text-center font-normal leading-normal pb-3 pt-1 px-4">
+              <%= @profile.bio %>
+          </p>
         </div>
-      </div>
-      <div :if={@live_action != :edit_profile} class="flex p-4 @container" id="profile-details">
-        <div class="flex w-full flex-col gap-4 items-center">
-          <div class="flex gap-4 flex-col items-center">
-            <.avatar profile={@profile} size={36} />
-            <div class="">
-              <p class="text-[#0d151c] text-3xl font-bold leading-tight tracking-[-0.015em]"><%= @profile.name %></p>
-            </div>
-            <div>
-              <p class="text-[#0d151c] text-center font-normal leading-normal pb-3 pt-1 px-4">
-                  <%= @profile.bio %>
-              </p>
-            </div>
+        <div class="mt-4">
+          <h3 class="text-lg font-semibold mb-2">Skills</h3>
+          <div class="flex flex-wrap gap-2 justify-center">
+            <%= if @skills != [] do %>              
+              <div :for={skill <- @skills} id={"skill-#{skill.id}"} class="me-4 p-3 text-gray-700 bg-neutral/20 rounded-lg">
+                <%= skill.name %>
+              </div>
+            <% end %>
           </div>
         </div>
       </div>
-      <div :if={@live_action == :edit_profile}>
-        <.live_component
-          module={MakerPassportWeb.ProfileLive.ProfileFormComponent}
-          id={@profile.id}
-          title={@page_title}
-          action={@live_action}
-          profile={@profile}
-          patch={~p"/profiles/#{@profile}"}
-        />
+    </div>
+  </div>
+  <div :if={@live_action == :edit_profile}>
+    <.live_component
+      module={MakerPassportWeb.ProfileLive.ProfileFormComponent}
+      id={@profile.id}
+      title={@page_title}
+      action={@live_action}
+      profile={@profile}
+      patch={~p"/profiles/#{@profile}"}
+    />
+
+    <hr class="h-1 bg-gray-100 border-0 rounded my-4 md:my-10 dark:bg-gray-300" />
+
+    <div>
+        <.simple_form
+        for={@skills_form}
+        id="skills-form"
+        phx-submit="save_skill"
+      >
+        <div id="skills-picker-container" class="mt-4 flex items-center">
+          <.typeahead
+            id="skills-picker"
+            class="w-full rounded-s-lg"
+            placeholder="Add a skill..."
+            on_search={fn search_text ->
+                Maker.search_skills(search_text)
+                |> Maker.to_skill_list(@profile.id)
+            end}
+            on_select={fn skill -> send(self(), {:typeahead, skill}) end}
+          />
+          <button phx-disable-with="Saving..." class="p-3 border-l-0 rounded-e-lg bg-primary text-primary-content font-semibold text-sm">Add Skill</button>
+        </div>
+      </.simple_form>
+      <div id="skills-list" phx-update="append" class="mt-6 flex flex-wrap gap-2">
+        <div :for={skill <- @skills} id={"skill-#{skill.id}"} class="me-4 ps-3 pe-2 py-2 text-gray-700 bg-neutral/20 rounded-lg">
+          <%= skill.name %>
+            <span class="tooltip" data-tip="Remove skill" phx-click="remove-skill" phx-value-skill_id={skill.id}>
+              <.icon name="hero-x-circle" class="w-6 h-6 mb-1 hover:text-red-500 cursor-pointer" />
+            </span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/lib/maker_passport_web/live/profile_live/skills_form_component.ex b/lib/maker_passport_web/live/profile_live/skills_form_component.ex
new file mode 100644
index 0000000..3388800
--- /dev/null
+++ b/lib/maker_passport_web/live/profile_live/skills_form_component.ex
@@ -0,0 +1,23 @@
+defmodule MakerPassportWeb.ProfileLive.SkillsFormComponent do
+  use MakerPassportWeb, :live_component
+
+  alias MakerPassport.Maker.Skill
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+    </div>
+    """
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    {:ok, socket
+    |> assign(assigns)
+    |> assign_new(:skills_form, fn ->
+      to_form(Skill.changeset(%Skill{}))
+    end)}
+  end
+
+end
diff --git a/lib/maker_passport_web/live/profile_live/typeahead_component.ex b/lib/maker_passport_web/live/profile_live/typeahead_component.ex
new file mode 100644
index 0000000..be6514e
--- /dev/null
+++ b/lib/maker_passport_web/live/profile_live/typeahead_component.ex
@@ -0,0 +1,204 @@
+defmodule MakerPassportWeb.ProfileLive.TypeaheadComponent do
+  use MakerPassportWeb, :live_component
+  use Phoenix.Component
+
+  import MakerPassportWeb.CoreComponents
+
+  attr :id, :string, default: "typeahead"
+  attr :label, :string, default: nil
+  attr :class, :string, default: ""
+  attr :rest, :global
+  attr :on_select, :any, default: nil
+  attr :on_search, :any, required: true
+
+  def typeahead(assigns) do
+    ~H"""
+    <.live_component
+      module={__MODULE__}
+      id={@id}
+      label={@label}
+      rest={@rest}
+      class={@class}
+      on_select={@on_select}
+      on_search={@on_search}
+    />
+    """
+  end
+
+  attr :id, :string
+  attr :myself, :any
+  attr :focused_option, :any
+  attr :search_options, :list, default: []
+
+  def dropdown_options(assigns) do
+    ~H"""
+    <div id={@id} class="absolute mt-1 z-10 bg-white rounded-lg shadow w-full dark:bg-gray-700">
+      <ul
+        data-focused-option={@focused_option}
+        class="max-h-60 py-2 overflow-y-auto text-gray-700 dark:text-gray-200"
+        role="listbox">
+        <li
+          :for={{{label, value}, idx} <- @search_options |> Enum.with_index(0)}
+          id={"#{@id}-#{idx}"}
+          class={[
+            "flex items-center px-4 py-2",
+            @focused_option == value && "bg-gray-100 dark:bg-gray-600 dark:text-white"
+          ]}
+          role="option"
+          phx-hook="ComboboxOption"
+          phx-click="select-option"
+          phx-target={@myself}
+          phx-value-option={value}
+        >
+          <span class="block truncate text-sm"><%= label %></span>
+        </li>
+      </ul>
+    </div>
+    """
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="space-y-1">
+      <.label :if={@label} for={@id}><%= @label %></.label>
+      <div class=""
+        phx-click-away="hide-options"
+        phx-target={@myself}>
+        <input
+          type="text"
+          name="search-field"
+          id={@id}
+          autocomplete="off"
+          class={[
+            "block text-grey-700 focus:ring-4 focus:ring-blue-500/5 focus:border-blue-500 phx-no-feedback:border-gray-300",
+            "phx-no-feedback:focus:border-blue-500 phx-no-feedback:focus:ring-blue-500/5",
+            "phx-no-feedback:dark:border-gray-600 phx-no-feedback:dark:focus:border-blue-500 phx-no-feedback:dark:focus:ring-blue-500/5",
+            "#{@class}"
+          ]}
+          role="combobox"
+          phx-keydown="set-focus"
+          phx-target={@myself}
+          phx-hook="Combobox"
+          {@rest}
+        />
+
+        <.dropdown_options
+          :if={@options_visible}
+          myself={@myself}
+          id={"#{@id}-options"}
+          focused_option={@focused_option}
+          search_options={@search_options}
+        />
+      </div>
+    </div>
+    """
+  end
+
+  @impl true
+  def mount(socket) do
+    {:ok, assign_reset(socket)}
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    {
+      :ok,
+      socket
+      |> assign(assigns)
+    }
+  end
+
+  @impl true
+  def handle_event("filter-options", %{"search_phrase" => search_phrase}, socket) do
+    search_options = socket.assigns.on_search.(search_phrase)
+
+    {
+      :noreply,
+      socket
+      |> assign(:search_options, search_options)
+      |> assign(:search_phrase, search_phrase)
+      |> assign(:options_visible, true)
+    }
+  end
+
+  def handle_event("select-option", %{"option" => selected_value}, socket) do
+    {label, value} = find_option_by(selected_value, socket)
+
+    if value && socket.assigns.on_select do
+      socket.assigns.on_select.({label, value})
+    end
+
+    {
+      :noreply,
+      socket
+      |> assign_reset()
+      |> push_event("set-input-value", %{id: socket.assigns.id, label: ""})
+    }
+  end
+
+  def handle_event("set-focus-to", %{"value" => focused_option}, socket) do
+    {:noreply, assign(socket, focused_option: focused_option)} # Send from JS when hovering the list
+  end
+
+  def handle_event("set-focus", %{"key" => "ArrowUp"}, socket) do
+    focused_option = assigns_prev_focus_option(socket.assigns)
+    {:noreply, assign(socket, focused_option: focused_option)}
+  end
+
+  def handle_event("set-focus", %{"key" => "ArrowDown"}, socket) do
+    focused_option = assigns_next_focus_option(socket.assigns)
+    {:noreply, assign(socket, focused_option: focused_option)}
+  end
+
+  def handle_event("set-focus", %{"key" => key}, socket) when key in ~w(Escape Tab) do
+    {:noreply, assign_reset(socket)}
+  end
+
+  # FALLBACK FOR NON RELATED KEY STROKES
+  def handle_event("set-focus", _, socket), do: {:noreply, socket}
+
+  def handle_event("hide-options", _params, socket) do
+    {:noreply, assign_reset(socket)}
+  end
+
+  # Helper functions below
+
+  defp find_option_by(selected_value, _socket) when selected_value in [nil, ""], do: {nil, nil}
+  defp find_option_by(selected_value, %{assigns: %{search_options: search_options}}) do
+    Enum.find(search_options, {nil, nil}, fn {_label, value} -> to_string(value) == to_string(selected_value) end)
+  end
+
+  defp assign_reset(socket) do
+    socket
+    |> assign(:focused_option, nil)
+    |> assign(:search_options, [])
+    |> assign(:options_visible, false)
+  end
+
+  defp assigns_next_focus_option(%{search_options: search_options, focused_option: focused_option}) do
+    search_options
+    |> Enum.map(fn {_, value} -> value end)
+    |> next_option(focused_option)
+  end
+
+  defp assigns_prev_focus_option(%{search_options: search_options, focused_option: focused_option}) do
+    assigns_next_focus_option(%{search_options: Enum.reverse(search_options), focused_option: focused_option})
+  end
+
+  # Base case: Empty list or target not found
+  defp next_option([], _target), do: nil
+
+  # Base case: Last item reached without finding the target
+  # defp next_option([_last], _target), do: nil
+  defp next_option([last], _target), do: last
+
+  # Starting case: no current value
+  defp next_option([first | _], nil), do: first
+
+  # Match when the current item is the target
+  defp next_option([current, next | _], current), do: next
+
+  # Recursive call: Keep traversing the list
+  defp next_option([_ | rest], target), do: next_option(rest, target)
+end
diff --git a/priv/repo/migrations/20241004232834_create_skills.exs b/priv/repo/migrations/20241004232834_create_skills.exs
new file mode 100644
index 0000000..0f7f604
--- /dev/null
+++ b/priv/repo/migrations/20241004232834_create_skills.exs
@@ -0,0 +1,26 @@
+defmodule MakerPassport.Repo.Migrations.CreateSkills do
+  @moduledoc false
+  use Ecto.Migration
+
+  def change do
+    create table(:skills) do
+      add :name, :text
+
+      timestamps(type: :utc_datetime)
+    end
+
+    create unique_index(:skills, [:name])
+
+
+    create table(:profile_skills) do
+      add :profile_id, references(:profiles, on_delete: :nothing)
+      add :skill_id, references(:skills, on_delete: :nothing)
+
+      timestamps(type: :utc_datetime)
+    end
+
+    create index(:profile_skills, [:profile_id])
+    create index(:profile_skills, [:skill_id])
+    create unique_index(:profile_skills, [:profile_id, :skill_id])
+  end
+end