Task Drop-Down Menu

Let's start by changing the markup for each task item. In the file app/views/users/projects/_tasks.html.erb replace the "Edit / Delete" code with the following:

<div x-data="{ open: false }" class="h-5 flex items-center relative hover:bg-zinc-700 rounded">
  <%= heroicon 'ellipsis-horizontal',
      options: {
        class: 'h-8 w-8 text-slate-100 cursor-pointer',
        '@click' => 'open = true',
        '@click.outside' => 'open = false'
      }
  %>

  <div x-show="open" x-cloak class="absolute top-6 right-0 min-w-[200px] z-10 rounded-xl border border-zinc-600 bg-zinc-800">
    <div class="divide-y divide-zinc-700">
      <div class="px-1.5 py-1.5">
        <%= link_to edit_users_project_task_path(@project, task), class: 'flex gap-2 items-center text-[13px] py-2 px-3 hover:bg-zinc-700 rounded' do %>
          <%= heroicon 'pencil-square', options: { class: 'h-5 w-5 text-slate-100' } %>
          <span>Edit</span>
        <% end %>
      </div>

      <div class="px-1.5 py-1.5">
        <%= link_to users_project_task_path(@project, task), class: 'flex gap-2 items-center text-[13px] py-2 px-3 hover:bg-zinc-700 rounded', data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } do %>
          <%= heroicon 'trash', options: { class: 'h-5 w-5 text-slate-100' } %>
          <span>Delete</span>
        <% end %>
      </div>
    </div>
  </div>
</div>

This bit of code relies on AlpineJS attributes to handle the showing and hiding of the action menu. Some notes:

• The x-data="{ open: false }" attribute sets up localized data scoped to the element and its children. This data can be read and changed by the children for different purposes.

• The '@click' => 'open = true' attribute assigns a click handler to the element that will set the data variable open to true when clicked.

• The '@click.outside' => 'open = false' attribute assigns a click handler to any element that is outside of the element (not itself or its children) that will set the data variable open to false when clicked.

• The x-show="open" attribute will only show the element when the data variable open is true.

• The x-cloak attribute initially hides the element using CSS to prevent the brief flicker of visibility that will occur before the JS is fully loaded on the page.

To make the x-cloak attribute work correctly we must add code to the file app/assets/stylesheets/application.css:

[x-cloak] { display: none !important; }

The task drop-down menu should now look like this:

Project Drop-Down Menu

Next let's add the same drop-down functionality to the project list. Let's start by moving the project list from the layout template into its own partial so that we stay organized. Create the file app/views/layouts/users/_projects.html.erb and add the following code:

<% active_list = is_active_link?(users_projects_path, :exact) %>
<% active_list_classes = class_names(
  'bg-[#472525]' => active_list
) %>
<div class="flex justify-between items-center mb-1 rounded-lg <%= active_list_classes %>">
  <%= link_to 'My Projects', users_projects_path, class: 'grow p-2' %>

  <div class="mr-2">
    <%= link_to new_users_project_path, data: { turbo_frame: 'modal' } do %>
      <%= heroicon 'plus', options: { class: 'text-white w-4 h-4' } %>
    <% end %>
  </div>
</div>

<div data-sortable-projects>
  <% projects.each do |project| %>
    <% active_project = is_active_link?(users_project_path(project)) %>
    <% classes = class_names(
        'bg-[#472525] text-red-300' => active_project,
        'hover:bg-zinc-700/25' => !active_project
       )
    %>

    <div x-data="{ open: false }" class="group mb-1 relative flex justify-between items-center rounded-lg <%= classes %>" data-project-id="<%= project.id %>">
      <%= link_to project.name,
          users_project_path(project),
          class: 'block grow p-2'
      %>

      <div class="group-hover:hidden text-[12px] text-zinc-500 mr-3.5">
        <% tasks_count = project.active_tasks.count %>
        <%= tasks_count if tasks_count > 0 %>
      </div>

      <div class="group-hover:flex hidden h-5 items-center relative hover:bg-zinc-700 rounded mr-2 text-white">
        <%= heroicon 'ellipsis-horizontal',
            options: {
              class: 'h-6 w-6 text-zinc-100 cursor-pointer',
              '@click' => 'open = !open; $event.preventDefault();',
              '@click.outside' => 'open = false'
            }
        %>
      </div>

      <div x-show="open" x-cloak class="absolute top-10 right-0 min-w-[200px] z-10 rounded-xl border border-zinc-600 bg-zinc-800 text-zinc-300">
        <div class="divide-y divide-zinc-700">
          <div class="px-1.5 py-1.5">
            <%= link_to edit_users_project_path(project), class: 'flex gap-2 items-center text-[13px] py-2 px-3 hover:bg-zinc-700 rounded', data: { turbo_frame: 'modal' } do %>
              <%= heroicon 'pencil-square', options: { class: 'h-5 w-5 text-slate-100' } %>
              <span>Edit</span>
            <% end %>
          </div>

          <div class="px-1.5 py-1.5">
            <%= link_to users_project_path(project), class: 'flex gap-2 items-center text-[13px] py-2 px-3 hover:bg-zinc-700 rounded', data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } do %>
              <%= heroicon 'trash', options: { class: 'h-5 w-5 text-slate-100' } %>
              <span>Delete</span>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</div>

This code contains the same functionality as the task drop-down menus: it uses AlpineJS attributes (x-data, x-show, @click) to toggle the visibility of the drop-down menu. This code also contains new styles to correctly match the project list that is found in the Todoist app.

Be sure to render the new partial in the app/views/layouts/users.html.erb file like so:

...
<div class="bg-zinc-800 text-white text-sm p-5 min-w-[300px]">
  <div class="mb-10">
    <div><%= current_user.email %></div>
    <div><%= link_to 'Logout', destroy_user_session_path, data: { turbo_prefetch: false } %></div>
  </div>

  <%= render 'layouts/users/projects', projects: @projects %>
</div>
...

After adding the above code the projects list should now look like so:

Summary

In this article we did the following:

• Moved "Edit" / "Delete" task actions to a drop-down menu

• Moved "Edit" / "Delete" project actions to a drop-down menu

• Added styles to the project list to match the look and feel of Todoist

• Install a frontend sorting library

• Install a backend sorting library

• Save the new record order on sort

Install Frontend Sorting

For the frontend draggable sorting we will use an oldie but goodie: jQueryUI Sortable (https://jqueryui.com/sortable/). To install it add the following script tags to the head of app/views/layouts/users.html.erb:

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js" integrity="sha256-sw0iNNXmOJbQhYFuC9OF2kOlD5KQKe1y5lfBn4C9Sjg=" crossorigin="anonymous"></script>

Now let's initialize sorting for tasks. In the bottom of the file app/views/users/projects/_tasks.html.erb add the following code:

<script>
  $('[data-sortable-tasks]').sortable({
    handle: '[data-handle]',
    placeholder: 'sortable-placeholder',

    update(event, ui) {
      const index = ui.item.index();
      const taskId = ui.item.data('task-id');

      fetch(`/app/projects/<%= @project.id %>/tasks/${taskId}/update_weight`, {
        method: 'POST',
        body: JSON.stringify({ weight: index + 1 }),
        headers: {
          "Content-Type": "application/json",
        }
      });
    }
  })
</script>

This does some things:

• We call .sortable on the container of the items that we'd like to sort. In this case we'll be adding data-sortable-tasks to the parent of the task items.

• We use the handle: '[data-handle]' option to sort items only when the "move" icon is clicked and dragged (not the entire row).

• We use placeholder: 'sortable-placeholder' to give us a specific classname that we can target so we can add custom styling to the empty space left when dragging an element.

• We use the update(event, ui) callback to save the new order by making an AJAX request to the backend with the task ID and position.

Next we need to add the new attributes and elements to the task list partial:

<div class="mb-3" data-sortable-tasks>
  <% tasks.each do |task| %>
    <%= turbo_frame_tag "#{dom_id(task)}_edit", class: 'group block bg-zinc-900 border-b border-b-zinc-700 relative flex justify-between items-center py-2', data: { task_id: task.id } do %>
      <div class="opacity-0 group-hover:opacity-100 absolute -left-[25px] pr-[5px]">
        <%= heroicon 'bars-3', options: { class: 'h-5 w-5 cursor-move text-zinc-300', data_handle: true } %>
      </div>

      ...
    <% end %>
  <% end %>
</div>

Finally let's add the styles to make everything look like nice. In the file app/assets/stylesheets/application.tailwind.css add the following code:

.sortable-placeholder {
  @apply h-[40px] bg-zinc-800 block border-t-2 border-red-600;
}

.ui-sortable-helper {
  @apply px-4;
}

.ui-sortable-helper [data-handle] {
  @apply opacity-0 cursor-grabbing;
}

Install Backend Sorting

To enable easy sorting of records on the backend we can use the Positioning gem (https://github.com/brendon/positioning). After installing the gem we setup the Task model to use positioning:

class Task < ApplicationRecord
  belongs_to :project
  positioned on: :project, column: :weight
end

The line positioned on: :project, column: :weight does the following:

• It scopes our sorting of tasks to a project. This will ensure that tasks get proper positioning per project.

• It defines which column to store the position data (weight).

Next lets add the route that will be used to save our sort data. In the file config/routes.rb inside the tasks member block add the following route: post :update_weight, action: :update_weight. Next in our tasks controller add the following action:

def update_weight
  @project = current_user.projects.find(params[:project_id])
  @task = current_user.tasks.find(params[:id])
  @task.update!(weight: params[:weight])
end

Because we are using the Positioning gem, we only have to specify one task's new position and all the other task positions in the same project will be adjusted accordingly.

Our task sorting should now look like this:

Apply Sorting to Projects

Let's use the same method to apply sorting to projects. At the bottom of the file app/views/layouts/users.html.erb add the following code:

<script>
  $('[data-sortable-projects]').sortable({
    placeholder: 'sortable-placeholder',

    update(event, ui) {
      const index = ui.item.index();
      const projectId = ui.item.data('project-id');

      fetch(`/app/projects/${projectId}/update_weight`, {
        method: 'POST',
        body: JSON.stringify({ weight: index + 1 }),
        headers: {
          "Content-Type": "application/json",
        }
      });
    }
  })
</script>

Next update the project list markup to include data-sortable-projects and data-project-id like so:

<div data-sortable-projects>
  <% @projects.each do |project| %>
    <div class="mb-1" data-project-id="<%= project.id %>">
      <%= active_link_to project.name,
          users_project_path(project),
          class: 'block p-2 rounded-lg',
          class_active: 'bg-[#472525] text-red-300',
          class_inactive: 'hover:bg-zinc-700'
      %>
    </div>
  <% end %>
</div>

Next setup positioning on the Project model:

class Project < ApplicationRecord
  ...

  belongs_to :user
  positioned on: :user, column: :weight

  ...
end

Note that this will scope project sorting per user.

Finally add the new route and controller actions to handle saving the new project positions. In the routes file add a new member block under projects:

member do
  post :update_weight, action: :update_weight
end

In the projects controller add the following action:

def update_weight
  @project = current_user.projects.find(params[:id])
  @project.update!(weight: params[:weight])
end

Project sorting should now look like this:

Summary

In this article we did the following:

• Installed and setup jQueryUI Sortable to enable frontend draggable sorting.

• Installed and setup the Positioning gem to enable backend record sorting with proper scoping.

• Connected the frontend to the backend using simple AJAX requests.

• Enabled sorting for both Tasks and Projects.

Create the Task Model

Run the following command to generate the Task model and DB migration:

bin/rails g model Task user_id:integer project_id:integer name description:text is_completed:boolean weight:integer

Run bin/rails db:migrate to create the tasks DB table.

Next, the Project and User models will each have ownership over a Task so let's add has_many :tasks to each model.

Add the Routes and Controller

Let's add all the routes that we'll need for managing tasks. In config/routes.rb add resources :tasks, except: [:index] nested under projects like so:

Rails.application.routes.draw do
  namespace :users, path: 'app' do
    resources :projects do
      resources :tasks, except: [:index] do
        member do
          post :complete, action: :complete
        end
      end
    end
  end

  devise_for :users
  root 'pages#home'
end

We want tasks nested under projects so that every route we access for managing tasks includes the parent project ID. A task cannot exist without a parent project; this route structure enforces this relationship. An example nested route looks like this:

/app/projects/:project_id/tasks/new

The line resources :tasks, except: [:index] gives us the following routes:

• New

• Create

• Edit

• Update

• Show

• Destroy

We use except: [:index] since we will not be needing a list page for tasks - that will be handled by the project's "show" route.

Also note the post :complete, action: :complete line inside the member do block. This creates a route at POST /app/projects/:project_id/tasks/:id/complete which will be used to mark a task as "completed".

Next add the tasks controller. Add the file app/controllers/users/tasks_controller.rb with the following contents:

class Users::TasksController < Users::ApplicationController
  def new
    @project = current_user.projects.find(params[:project_id])
    @task = Task.new
  end

  def edit
    @project = current_user.projects.find(params[:project_id])
    @task = current_user.tasks.find(params[:id])
  end

  def create
    @project = current_user.projects.find(params[:project_id])
    @task = current_user.tasks.new(task_params)
    @task.project_id = @project.id

    if @task.save
      @tasks = @project.active_tasks
      @new_task = Task.new
    else
      render 'new', status: :unprocessable_entity
    end
  end

  def update
    @project = current_user.projects.find(params[:project_id])
    @task = current_user.tasks.find(params[:id])

    if @task.update(task_params)
      @tasks = @project.active_tasks
      @new_task = Task.new
    else
      render 'edit', status: :unprocessable_entity
    end
  end

  def destroy
    @project = current_user.projects.find(params[:project_id])
    @tasks = @project.active_tasks
    @task = current_user.tasks.find(params[:id])
    @task.destroy
  end

  def complete
    @project = current_user.projects.find(params[:project_id])
    @tasks = @project.active_tasks
    @task = current_user.tasks.find(params[:id])
    @task.update!(is_completed: true)
  end

  private

  def task_params
    params.require(:task).permit(:name, :description)
  end
end

Note: we'll go over each action in detail as we implement the view code.

Install the turbo-rails gem

So far we've only used the Turbo "Drive" features of Turbo which provides refresh-less page transitions for simple links. We will now want to be using Turbo frames and streams for submitting forms and updating parts of the page after successful submissions. The easiest way to use these features in a Rails app is to install the turbo-rails gem (https://github.com/hotwired/turbo-rails).

The gem gives us the following features:

• Adds useful view helpers: turbo_frame_tag, turbo_stream and dom_id.

• Automatically adds the request type of TURBO_STREAM to any form or link that submits from within a turbo frame.

• Adds a response format type .turbo_stream that allows us to update parts of the DOM in response to a TURBO_STREAM request.

List Tasks with a Partial

Let's first add the code that will display the list of tasks that belong to the current project. We will use a partial since we'll be re-rendering this list from inside the create task controller action (details below).

In the file app/views/users/projects/_tasks.html.erb add the following code:

<div id="tasks">
  <% if tasks.any? %>
    <div class="mb-3">
      <% tasks.each do |task| %>
        <%= turbo_frame_tag "#{dom_id(task)}_edit" do %>
          <div class="flex justify-between items-center py-3 border-b border-b-slate-700">
            <div class="flex items-center gap-2">
              <%= link_to complete_users_project_task_path(@project, task), data: { turbo_method: :post }, class: 'group w-[18px] h-[18px] rounded-full border border-slate-400' do %>
                <%= heroicon 'check', options: { class: 'group-hover:opacity-100 opacity-0 transition-opacity duration-200 text-slate-400 w-3 h-3 mt-[2px] ml-[2px]' } %>
              <% end %>

              <div class="text-sm text-slate-200">
                <%= task.name %>
              </div>
            </div>

            <div class="flex gap-2">
              <div>
                <%= link_to 'Edit', edit_users_project_task_path(@project, task), class: 'text-sm' %>
              </div>

              <div>
                <%= link_to 'Delete', users_project_task_path(@project, task), class: 'text-sm', data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } %>
              </div>
            </div>
          </div>
        <% end %>
      <% end %>
    </div>
  <% end %>
</div>

In the file app/views/users/projects/show.html.erb render the partial just below the project title like this:

<h1 class="font-semibold text-2xl max-w-xl mb-4">
  <%= @project.name %>
</h1>

<%= render 'tasks', tasks: @tasks %>

The _tasks partial contains all the code for editing, deleting, and completing a task. We'll go into detail about each one coming up.

Create New Task

Now let's add a way to create new tasks. Let's start by having a simple link that reads "Add Task". When clicked we'll want the link to turn into a form for adding a task. We can create a "new" route and file (that displays the form) and then use Turbo to swap out the link when clicked. And because the link will be prefetched on hover the swap should be near instant.

First let's create the "new" template. Add the file app/views/users/tasks/new.html.erb with the following contents:

<%= turbo_frame_tag 'new_task_frame' do %>
  <%= render 'users/tasks/new/form', task: @task, project: @project %>
<% end %>

Next add the partial file app/views/users/tasks/new/_form.html.erb with the following contents:

<%= form_for(task, url: users_project_tasks_path, data: { turbo_frame: '_top' }) do |f| %>
  <div class="rounded-xl border border-slate-600">
    <div class="p-2 border-b border-b-slate-700">
      <%= f.label :name, class: 'sr-only' %>

      <%= f.text_field :name,
          placeholder: 'Task name',
          autofocus: true,
          required: true,
          class: 'w-full bg-transparent border-none p-1 text-sm focus:outline-none focus:ring-0'
      %>

      <%= f.text_area :description,
          placeholder: 'Description',
          class: 'w-full bg-transparent border-none p-1 text-sm focus:outline-none focus:ring-0'
      %>
    </div>

    <div class="flex justify-end gap-3 p-2">
      <%= link_to 'Cancel',
          users_project_path(project),
          class: 'bg-zinc-800 py-1.5 px-4 rounded text-sm'
      %>

      <%= f.button 'Add Task', class: 'bg-red-500 py-1.5 px-4 rounded text-sm' %>
    </div>
  </div>
<% end %>

Now let's add the "Add Task" code that will perform the swapping. In app/views/users/projects/show.html.erb add the following code at the bottom:

<%= turbo_frame_tag 'new_task_frame' do %>
  <%= link_to new_users_project_task_path(project_id: @project.id), class: 'group' do %>
    <div class="flex gap-2">
      <%= heroicon 'plus', options: { class: 'text-red-500 w-5 h-5 rounded-full group-hover:text-white group-hover:bg-red-500' } %>

      <div class="text-sm text-gray-500 group-hover:text-red-500">
        Add Task
      </div>
    </div>
  <% end %>
<% end %>

Because the "Add Task" link is inside of a <turbo-frame> any clicked link will make an AJAX request to its destination. The link will then replace its own <turbo-frame> with the matching <turbo-frame> from the response. Therefore since the "new" route is wrapped in a matching #new_task_frame, it will be injected into the existing #new_task_frame that previously contained the link.

Next let's look at the "create" route. After a task is successfully created we want to perform two updates to our page (without a refresh):

• Update the task list to show the new task

• Reset the new task form to contain empty fields

We can make this happen by responding to the form submission using a "turbo stream" response. Create the file app/views/users/tasks/create.turbo_stream.erb and add the following code:

<%= turbo_stream.replace "tasks" do %>
  <%= render 'users/projects/tasks', tasks: @tasks %>
<% end %>

<%= turbo_stream.update "new_task_frame" do %>
  <%= render 'users/tasks/new/form', task: @new_task, project: @project %>
<% end %>

The first statement turbo_stream.replace "tasks" will find the DOM element with ID "tasks" and replace the entire element with the provided block (the task list).

The second statement turbo_stream.update "new_task_frame" will find the DOM element with ID "new_task_frame" and update the inner HTML with the provided block (an empty new task form).

Edit a Task

Let's implement the ability to edit a task. Add the file app/views/users/tasks/edit.html.erb with the following code:

<%= turbo_frame_tag "#{dom_id(@task)}_edit" do %>
  <%= form_for(@task, url: users_project_task_path(@project, @task)) do |f| %>
    <div class="rounded-xl border border-slate-600">
      <div class="p-2 border-b border-b-slate-700">
        <%= f.label :name, class: 'sr-only' %>

        <%= f.text_field :name,
            placeholder: 'Task name',
            autofocus: true,
            required: true,
            class: 'w-full bg-transparent border-none p-1 text-sm focus:outline-none focus:ring-0'
        %>

        <%= f.text_area :description,
            placeholder: 'Description',
            class: 'w-full bg-transparent border-none p-1 text-sm focus:outline-none focus:ring-0'
        %>
      </div>

      <div class="flex justify-end gap-3 p-2">
        <%= link_to 'Cancel',
            users_project_path(@project),
            class: 'bg-zinc-800 py-1.5 px-4 rounded text-sm'
        %>

        <%= f.button 'Save', class: 'bg-red-500 py-1.5 px-4 rounded text-sm' %>
      </div>
    </div>
  <% end %>
<% end %>

Notice that this template wraps the form in the following turbo frame tag:

<%= turbo_frame_tag "#{dom_id(@task)}_edit" do %>

The dom_id helper generates a string from the passed model's name and ID that can be used as a unique DOM element ID (ex. task_12). Remember that in our task list partial we wrapped each task element in the same turbo frame ID so that when we click the "Edit" link the entire task element will be replaced with the edit form.

Next create the file app/views/users/tasks/update.turbo_stream.erb and add the code:

<%= turbo_stream.replace "tasks" do %>
  <%= render 'users/projects/tasks', tasks: @tasks %>
<% end %>

On successful task update the above code will replace the task list with an updated list.

Delete a Task

Notice in the task list partial we use the following code to display the "Delete" link:

<%= link_to 'Delete', users_project_task_path(@project, task), class: 'text-sm', data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } %>

Two interesting attributes are present:

• data-turbo-method="delete" instructs Turbo to make a DELETE request instead of the default GET request.

• data-turbo-confirm="Are you sure?" shows a JS confirm dialog before executing the link (if "cancel" is clicked the link does not follow through).

Next create the file app/views/users/tasks/destroy.turbo_stream.erb with the following code:

<%= turbo_stream.replace "tasks" do %>
  <%= render 'users/projects/tasks', tasks: @tasks %>
<% end %>

The above code works identically to the edit / update code: on success the task list is replaced with an updated list of tasks.

Complete a Task

Finally let's add the ability to mark a task as "completed". The following code exists in the task list partial:

<%= link_to complete_users_project_task_path(@project, task), data: { turbo_method: :post }, class: 'group w-[18px] h-[18px] rounded-full border border-slate-400' do %>
  <%= heroicon 'check', options: { class: 'group-hover:opacity-100 opacity-0 transition-opacity duration-200 text-slate-400 w-3 h-3 mt-[2px] ml-[2px]' } %>
<% end %>

Note that it is simply a link with a POST request type. Create the file app/views/users/tasks/complete.turbo_stream.erb with the following code:

<%= turbo_stream.replace "tasks" do %>
  <%= render 'users/projects/tasks', tasks: @tasks %>
<% end %>

Again, this code works identically to the update and delete routes: on successful request the task list is replaced with an updated list.

Here is what our app currently looks like:

Demo: https://dolistapp.org

Summary

In this article we did the following things:

• Created the Task model

• Added the ability to create, edit, delete and complete a task

• Installed the turbo-rails gem

• Used turbo frames to match the Todoist UX (without page refreshes)

Create the Project Model

Let's first create the Project model:

• bin/rails g model Project user_id:integer name weight:integer color

• bin/rails db:migrate

This creates a DB table named projects with the following columns:

• User ID

• Name

• Weight (used for custom ordering)

• Color

Our User model will own Project records, so let's add a "has many" relationship to the app/models/user.rb file so that it looks like this:

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  has_many :projects
end

Setup the CRUD Pages

Routes

So that our URL matches the URL structure of the Todoist app, let's change the pathname of our protected routes from dashboard to app. Also let's add all the necessary routes for the project CRUD pages using the resources helper. Make config/routes.rb match the following:

Rails.application.routes.draw do
  namespace :users, path: 'app' do
    resources :projects, except: [:destroy] do
      member do
        get '/delete', action: :destroy
      end
    end
  end

  devise_for :users
  root 'pages#home'
end

Note that we are defining our own GET /delete route. The resources helper creates RESTful routes for each CRUD action; therefore it creates the /delete route using the DELETE route method. Since our Rails 7 app has no way (yet) of easily making DELETE requests from a basic link, we add our own GET /delete route so that a link can make this request.

Controllers

Next let's create the controller for the CRUD pages at app/controllers/users/projects_controller.rb:

class Users::ProjectsController < Users::ApplicationController
  def index
  end

  def new
    @project = Project.new
  end

  def edit
    @project = current_user.projects.find(params[:id])
  end

  def create
    @project = current_user.projects.new(project_params)

    if @project.save
      redirect_to users_projects_path
    else
      render 'new'
    end
  end

  def update
    @project = current_user.projects.find(params[:id])

    if @project.update(project_params)
      redirect_to users_projects_path
    else
      render 'new'
    end
  end

  def show
    @project = current_user.projects.find(params[:id])
  end

  def destroy
    @project = current_user.projects.find(params[:id])
    @project.destroy
    redirect_to users_projects_path
  end

  private

  def project_params
    params.require(:project).permit(:name)
  end
end

Things to note:

• This class must inherit from Users::ApplicationController so that we get the correct layout template and forced user authentication.

• We use current_user.projects.find(params[:id]) to prevent one user accessing another user's project records. Event though this is a rudimentary form of authorization, it works well for a basic app.

We will be rendering the projects list in the base layout template's sidebar so we need to assign the user's projects in the base controller app/controllers/users/application_controller.rb:

class Users::ApplicationController < ApplicationController
  layout 'users'
  before_action :authenticate_user!
  before_action :set_projects

  private

  def set_projects
    @projects = current_user.projects
  end
end

Views

Next we need to create the template files for each of CRUD pages:

• app/views/users/projects/index.html.erb

• app/views/users/projects/new.html.erb

• app/views/users/projects/edit.html.erb

• app/views/users/projects/show.html.erb

Match the file contents with the following:

index.html.erb

<div class="flex flex-col items-center">
  <div class="w-full max-w-3xl mt-10">
    <h1 class="font-semibold text-2xl max-w-xl mb-10">
      My Projects
    </h1>

    <% if @projects.any? %>
      <div class="border-zinc-800 border-b text-sm py-2 my-4 font-semibold">
        <%= pluralize(@projects.count, 'Project') %>
      </div>

      <% @projects.each do |project| %>
        <div class="flex items-center justify-between hover:bg-zinc-800 rounded-lg pr-4">
          <%= link_to project.name,
              users_project_path(project),
              class: 'py-4 px-4 text-sm block grow'
          %>

          <div>
            <%= link_to 'Edit',
                edit_users_project_path(project),
                class: 'text-sm'
            %>

            <%= link_to 'Delete',
                delete_users_project_path(project),
                onclick: 'return confirm("Are you sure?")',
                class: 'text-sm'
            %>
          </div>
        </div>
      <% end %>
    <% else %>
      <div>
        No projects.
      </div>
    <% end %>
  </div>
</div>

new.html.erb:

<div class="font-semibold text-lg mb-5">
  Add Project
</div>

<div>
  <%= form_for(@project, url: users_projects_path) do |f| %>
    <div class="mb-5">
      <%= f.label :name, class: 'block text-sm mb-1' %>
      <%= f.text_field :name, class: 'bg-transparent border-zinc-700 p-1 text-sm rounded' %>
    </div>

    <div class="flex gap-3">
      <%= link_to 'Cancel', users_projects_path, class: 'bg-zinc-800 py-1.5 px-4 rounded text-sm' %>
      <%= f.button 'Add', class: 'bg-red-500 py-1.5 px-4 rounded text-sm' %>
    </div>
  <% end %>
</div>

edit.html.erb:

<div class="font-semibold text-lg mb-5">
  Edit
</div>

<div>
  <%= form_for(@project, url: users_project_path(@project)) do |f| %>
    <div class="mb-5">
      <%= f.label :name, class: 'block text-sm mb-1' %>
      <%= f.text_field :name, class: 'bg-transparent border-zinc-700 p-1 text-sm rounded' %>
    </div>

    <div class="flex gap-3">
      <%= link_to 'Cancel', users_projects_path, class: 'bg-zinc-800 py-1.5 px-4 rounded text-sm' %>
      <%= f.button 'Save', class: 'bg-red-500 py-1.5 px-4 rounded text-sm' %>
    </div>
  <% end %>
</div>

show.html.erb:

<div class="flex flex-col items-center">
  <div class="w-full max-w-3xl mt-10">
    <h1 class="font-semibold text-2xl max-w-xl mb-10">
      <%= @project.name %>
    </h1>
  </div>
</div>

Lastly let's update app/views/layouts/users.html.erb to add the sidebar layout styles:

<!DOCTYPE html>
<html class="h-full">
  <head>
    <title>DoList: A free and open source alternative to Todoist</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "application" %>
  </head>

  <body class="h-full">
    <div class="flex h-full">
      <div class="bg-zinc-800 text-white text-sm p-5 min-w-[300px]">
        <div class="mb-10">
          <div><%= current_user.email %></div>
          <div><%= link_to 'Logout', destroy_user_session_path %></div>
        </div>

        <div class="flex justify-between mb-4">
          <div>
            <%= link_to 'My Projects', users_projects_path %>
          </div>

          <div>
            <%= link_to new_users_project_path do %>
              <%= heroicon 'plus', options: { class: 'text-white w-5 h-5' } %>
            <% end %>
          </div>
        </div>

        <div>
          <% @projects.each do |project| %>
            <div class="mb-1">
              <%= active_link_to project.name,
                  users_project_path(project),
                  class: 'block p-2 rounded-lg',
                  class_active: 'bg-red-900/25 text-red-300',
                  class_inactive: 'hover:bg-zinc-700'
              %>
            </div>
          <% end %>
        </div>
      </div>

      <div class="bg-zinc-900 text-white grow p-5">
        <%= yield %>
      </div>
    </div>
  </body>
</html>

This now adds a standard CRUD flow with full page refreshes (no Turbo yet). The flow looks like this:

Install Turbo

Its now time to add Turbo. It is often easiest to build out the UI first using the standard method of server-side page refreshes. Once this is in place it is fairly easy to add Turbo and make the flow use modals and no page refreshes.

Since we don't want to use a JS bundler (ex. Webpack) we can install Turbo by simply including a script tag in the head of our layout file (app/views/layouts/users.html.erb):

<script src="https://unpkg.com/@hotwired/turbo@8.0.5/dist/turbo.es2017-umd.js"></script>

By including this script tag we get the following for free:

• All links are now handled by making an AJAX request to the href value and then replacing the body of the document with the response.

• When links are hovered (just before they are clicked), the href is prefetched so that when the link is actually clicked the document body replacement happens instantly.

"New Project" Modal

Our next goal will be to make the "New" and "Edit" forms appear in a modal and to update the display without a page refresh on form submit. We will make this happen by performing the following:

• Add a <turbo-frame id="modal"> tag to our base layout

• Add a data-turbo-frame="modal" attribute tag to the "+" link (new project)

• Wrap the "New" form in a <turbo-frame id="modal"> tag

Adding the above will load the "New" form via AJAX into the <turbo-frame> tag. Once we have that working we can add styling to the "New" form to make it appear as a modal. Let's go through these steps in more detail.

In app/views/layouts/users.html.erb add the following tag on line 53:

<turbo-frame id="modal"></turbo-frame>

Next in the same file add the data-turbo-frame="modal" attribute to our "New Project" link, making it look like this:

<div>
  <%= link_to new_users_project_path, data: { turbo_frame: 'modal' } do %>
    <%= heroicon 'plus', options: { class: 'text-white w-5 h-5' } %>
  <% end %>
</div>

Finally in app/views/users/projects/new.html.erb add a <turbo-frame id="modal"> tag around the entire contents like this:

<turbo-frame id="modal">
  <div class="font-semibold text-lg mb-5">
    Add Project
  </div>

  <div>
    <%= form_for(@project, url: users_projects_path) do |f| %>
      <div class="mb-5">
        <%= f.label :name, class: 'block text-sm mb-1' %>
        <%= f.text_field :name, class: 'bg-transparent border-zinc-700 p-1 text-sm rounded' %>
      </div>

      <div class="flex gap-3">
        <%= link_to 'Cancel', users_projects_path, class: 'bg-zinc-800 py-1.5 px-4 rounded text-sm' %>
        <%= f.button 'Add', class: 'bg-red-500 py-1.5 px-4 rounded text-sm' %>
      </div>
    <% end %>
  </div>
</turbo-frame>

We should now see the following:

Interesting, but not useful. While the form is appearing and submitting via AJAX (without a page refresh) we need the display to be updated once the form has been submitted. We can do this by adding an attribute to the form: data-turbo-frame="_top". This instructs Turbo to follow the successful redirect by replacing the entire body ("_top") with the new response.

In app/views/users/projects/new.html.erb add the new attribute to the form_for tag like this:

<%= form_for(@project, url: users_projects_path, data: { turbo_frame: '_top'}) do |f| %>

Our app should now function like so:

Now let's style the form so that it looks like a modal. We will create a partial so that we can reuse the modal code for other forms. Create the file app/views/shared/_modal.html.erb with the following contents:

<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="fixed inset-0 bg-black bg-opacity-75 transition-opacity" aria-hidden="true"></div>

  <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
      <div class="relative transform overflow-hidden rounded-lg bg-zinc-900 border border-zinc-700 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
        <%= yield %>
      </div>
    </div>
  </div>
</div>

Now wrap the "New Project" form useing the partial like so:

<turbo-frame id="modal">
  <%= render 'shared/modal' do %>
    <div class="font-semibold text-lg mb-5">
      Add Project
    </div>

    <div>
      <%= form_for(@project, url: users_projects_path, data: { turbo_frame: '_top'}) do |f| %>
        <div class="mb-5">
          <%= f.label :name, class: 'block text-sm mb-1' %>

          <%= f.text_field :name,
              autofocus: true,
              class: 'w-full bg-transparent border-zinc-700 p-1 text-sm rounded'
          %>
        </div>

        <div class="flex gap-3">
          <%= button_tag 'Cancel',
              type: 'button',
              class: 'bg-zinc-800 py-1.5 px-4 rounded text-sm',
              'x-on:click' => '$("#modal").html("").removeAttr("src")'
          %>

          <%= f.button 'Add', class: 'bg-red-500 py-1.5 px-4 rounded text-sm' %>
        </div>
      <% end %>
    </div>
  <% end %>
</turbo-frame>

Notice the new attribute added to the "Cancel" button:

'x-on:click' => '$("#modal").html("").removeAttr("src")'

This is a combination of AlpineJS and jQuery code that will close our modal when clicking the "Cancel" button. We need to include those two libraries in our layout file to make this work.

In app/views/users/projects/new.html.erb add the following to the head:

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Let's explain how this works: the x-on:click attribute assigns an event listener to the respective element. The value of the attribute will be executed on the declared event. The attribute value $("#modal").html("").removeAttr("src") is jQuery code that will clear the contents of <turbo-frame id="modal"> and remove the src attribute. This essentially reverts the action that is performed when clicking the "New Project" (+) link.

"Edit Project" Modal

Let's now make the "Edit" control work by copying everything we've done over to app/views/users/projects/edit.html.erb:

<turbo-frame id="modal">
  <%= render 'shared/modal' do %>
    <div class="font-semibold text-lg mb-5">
      Edit
    </div>

    <div>
      <%= form_for(@project, url: users_project_path(@project), data: { turbo_frame: '_top' }) do |f| %>
        <div class="mb-5">
          <%= f.label :name, class: 'block text-sm mb-1' %>

          <%= f.text_field :name,
              autofocus: true,
              class: 'w-full bg-transparent border-zinc-700 p-1 text-sm rounded'
          %>
        </div>

        <div class="flex gap-3">
          <%= button_tag 'Cancel',
              type: 'button',
              class: 'bg-zinc-800 py-1.5 px-4 rounded text-sm',
              'x-on:click' => '$("#modal").html("").removeAttr("src")'
          %>

          <%= f.button 'Save', class: 'bg-red-500 py-1.5 px-4 rounded text-sm' %>
        </div>
      <% end %>
    </div>
  <% end %>
</turbo-frame>

Note that the above code does the following:

• Adds a <turbo-frame id="modal"> tag

• Adds the <%= render 'shared/modal' do %> partial code

• Adds the data-turbo-frame="_top" attribute to the form

We need to add the data-turbo-frame="modal" attribute to the "Edit" link. In app/views/users/projects/index.html.erb make the "Edit" link look like this:

<%= link_to 'Edit',
    edit_users_project_path(project),
    class: 'text-sm',
    data: { turbo_frame: 'modal' }
%>

Our app should now look like this:

"Delete" Links

Now that we have Turbo installed we can change the "Delete" links to work according to the default Rails pattern (by using a DELETE request). First, let's revert the change the we made in our routes file that added the custom GET /delete route.

Change config/routes.rb to match the following:

Rails.application.routes.draw do
  namespace :users, path: 'app' do
    resources :projects
  end

  devise_for :users
  root 'pages#home'
end

Next in app/views/users/projects/index.html.erb change the "Delete" links to look like the following:

<%= link_to 'Delete',
    users_project_path(project),
    class: 'text-sm',
    data: {
      turbo_method: :delete,
      turbo_confirm: 'Are you sure?'
    }
%>

This does two things:

• data-turbo-method is used when we want a link to send a non-GET request (in this case a DELETE request)

• data-turbo-confirm is a helper method for the native JS alert popup (the click is cancelled if "Cancel" is clicked in the alert).

Our app should now look like this:

Summary

In this article we did the following things:

• Created a Project model and projects DB table

• Added server-side rendered CRUD pages for Projects (with page refreshes)

• Installed Turbo and converted the CRUD pages to modals with no page refreshes

• Styled the app to match the Todoist theme

Install Devise

To begin, perform the following steps:

1. Add gem "devise" to the Gemfile

2. Run bundle install

3. Run bin/rails generate devise:install to generate a config file

To enable emails to be sent from Devise (ex. password reset) perform the following steps:

1. In config/environments/development.rb add

config.action_mailer.default_url_options = { host: 'http://localhost', port: 3000 }

2. In config/application.rb uncomment line 10: require "action_mailer/railtie"

Create the User Model

Let's now create a User DB model that will store information about authenticated users.

Run the following commands:

1. rails generate devise User

2. bin/rails db:migrate

Note that running those commands adds the following line in config/routes.rb: devise_for :users. Adding that line creates all of the routes necessary for user authentication.

To view all defined routes visit http://localhost:3000/rails/info/routes. The page looks like this:

Style the Authentication Views

Be sure to restart your local server before moving forward.

Let's add "Sign Up" and "Sign In" buttons to the homepage. Replace app/views/pages/home.html.erb with:

<div class="container mx-auto mt-28 px-5">
  <h1 class="font-bold text-8xl mb-3 tracking-tighter">DoList.</h1>
  <p class="text-gray-800 text-xl tracking-tight">
    A free and open-source Todoist alternative
  </p>

  <div class="mt-10 flex items-center gap-x-6">
    <%= link_to 'Sign Up',
        new_user_registration_path,
        class: 'rounded-md bg-indigo-600 px-3.5 py-2.5 font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
    %>

    <%= link_to 'Sign In',
        new_user_session_path,
        class: 'rounded-md bg-white px-3.5 py-2.5 font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50'
    %>
  </div>
</div>

The homepage will now look like this:

You'll notice that if you visit either of those links you will see unstyled forms on each page. So that we can customize each of those pages let's run a command that will copy the templates from the Devise library into our app.

Run the following command: bin/rails generate devise:views. You'll now see a new directory: app/views/devise. This directory contains all the views for each authentication component (sign up, sign in, forgot password, etc).

Replace the following files with styled markup:

File: app/views/devise/registrations/new.html.erb

<div class="h-full bg-gray-50">
  <div class="flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
      <% if !flash.empty? %>
        <div class="mb-6">
          <%= render 'layouts/flash_messages' %>
        </div>
      <% end %>

      <%= render "devise/shared/error_messages", resource: resource %>

      <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
        Create a new account
      </h2>

      <p class="mt-2 text-center text-sm text-gray-600">
        Or
        <%= link_to 'login to your account', new_user_session_path, class: 'font-medium text-indigo-600 hover:text-indigo-500' %>
      </p>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
      <div class="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
        <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
          <div class="space-y-6">
            <div>
              <%= f.label :email, class: 'block text-sm font-medium leading-6 text-gray-900' %>
              <div class="mt-2">
                <%= f.email_field :email, required: true, autofocus: false, autocomplete: "email", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6' %>
              </div>
            </div>

            <div>
              <%= f.label :password, class: 'block text-sm font-medium leading-6 text-gray-900' %>
              <div class="mt-2">
                <%= f.password_field :password, required: true, autocomplete: "current-password", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6' %>
              </div>
            </div>

            <div>
              <%= f.label :password_confirmation, class: 'block text-sm font-medium leading-6 text-gray-900' %>
              <div class="mt-2">
                <%= f.password_field :password_confirmation, required: true, autocomplete: "current-password", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6' %>
              </div>
            </div>

            <div>
              <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                Create account
              </button>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

File: app/views/devise/sessions/new.html.erb

<div class="h-full bg-gray-50">
  <div class="flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
      <%= render 'layouts/flash_messages' %>
      <%= render "devise/shared/error_messages", resource: resource %>

      <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
        Sign in to your account
      </h2>

      <% if devise_mapping.registerable? %>
        <p class="mt-2 text-center text-sm text-gray-600">
          Or
          <%= link_to 'create a new account', new_user_registration_path, class: 'font-medium text-indigo-600 hover:text-indigo-500' %>
        </p>
      <% end %>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
      <div class="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
        <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
          <div class="space-y-6">
            <div>
              <%= f.label :email, class: 'block text-sm font-medium leading-6 text-gray-900' %>
              <div class="mt-2">
                <%= f.email_field :email, autofocus: false, autocomplete: "email", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6' %>
              </div>
            </div>

            <div>
              <%= f.label :password, class: 'block text-sm font-medium leading-6 text-gray-900' %>
              <div class="mt-2">
                <%= f.password_field :password, autocomplete: "current-password", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6' %>
              </div>
            </div>

            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <%= f.check_box :remember_me, class: 'h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600' %>
                <%= f.label :remember_me, class: 'ml-2 block text-sm text-gray-900' %>
              </div>

              <div class="text-sm">
                <%= link_to 'Forgot your password?', new_user_password_path, class: 'font-medium text-indigo-600 hover:text-indigo-500' %>
              </div>
            </div>

            <div>
              <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                Sign in
              </button>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

File: app/views/devise/passwords/new.html.erb

<div class="h-full bg-gray-50">
  <div class="flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
      <% if !flash.empty? %>
        <div class="mb-6">
          <%= render 'layouts/flash_messages' %>
        </div>
      <% end %>

      <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
        Reset Password
      </h2>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
      <div class="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
        <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
          <div class="space-y-6">
            <div>
              <%= f.label :email, class: 'block text-sm font-medium leading-6 text-gray-900' %>
              <div class="mt-2">
                <%= f.email_field :email, required: true, autofocus: false, autocomplete: "email", class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6' %>
              </div>
            </div>

            <div>
              <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                Submit
              </button>
            </div>
          </div>
        <% end %>

        <div class="mt-6 flex justify-center">
          <%= link_to 'Cancel', new_session_path(resource_name), class: 'font-medium text-indigo-600 hover:text-indigo-500' %>
        </div>
      </div>
    </div>
  </div>
</div>

Here is what the sign up page looks like now:

Lastly lets add styling to the flash messages that appear when a validation has failed or an error has occurred. First, add the following file: app/layouts/_flash_messages.html.erb and add the contents:

<% if flash[:alert].present? %>
  <div class="rounded-md bg-red-50 p-4 mb-8 border border-red-300">
    <div class="flex">
      <div class="flex-shrink-0">
        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3">
        <div class="text-sm text-red-700">
          <%= flash[:alert] %>
        </div>
      </div>
    </div>
  </div>
<% end %>

<% if flash[:notice].present? %>
  <div class="rounded-md bg-green-50 p-4 mb-8 border border-green-400">
    <div class="flex">
      <div class="flex-shrink-0">
        <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3">
        <div class="text-sm text-green-700">
          <%= flash[:notice] %>
        </div>
      </div>
    </div>
  </div>
<% end %>

Next replace the file app/views/devise/shared/_error_messages.html.erb with:

<% if resource.errors.any? %>
  <div class="rounded-md bg-red-50 p-4 mb-8 border border-red-300">
    <div class="flex">
      <div class="flex-shrink-0">
        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3">
        <h3 class="text-sm font-medium text-red-800">
          <%= I18n.t("errors.messages.not_saved", count: resource.errors.count, resource: resource.class.model_name.human.downcase) %>
        </h3>

        <div class="mt-2 text-sm text-red-700">
          <ul role="list" class="list-disc space-y-1 pl-5">
            <% resource.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
          </ul>
        </div>
      </div>
    </div>
  </div>
<% end %>

Now error messages look like this:

Create an Authenticated Area

Next lets create a "Dashboard" section that only authenticated users can see. If an unauthenticated user attempts to view the dashboard they will be redirected to the login page.

First let's create a base controller that all other "user" controllers will inherit from. Create the file app/controllers/users/application_controller.rb with the following contents:

class Users::ApplicationController < ApplicationController
  layout 'users'
  before_action :authenticate_user!
end

Note that layout 'users' instructs Rails to use the file app/views/layouts/users.html.erb as the base template for the controller views.

Also note that before_action :authenticate_user! ensures that the user is authenticated before serving any of the pages. If the user is not authenticated they will be redirected to the login page.

Let's create the layout file that will be used for all the user pages: app/views/layouts/users.html.erb with the following content:

<!DOCTYPE html>
<html class="h-full">
  <head>
    <title>DoList: A free and open source alternative to Todoist</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "application" %>
  </head>

  <body class="h-full p-10">
    <div class="flex gap-4 mb-10">
      <div>
        Welcome <%= current_user.email %>
      </div>

      <div>
        <%= link_to 'Sign Out', destroy_user_session_path %>
      </div>
    </div>

    <%= yield %>
  </body>
</html>

Let's make a quick change to allow "Sign Out" links to work with a GET request instead of the default DELETE request. In the file config/initializers/devise.rb uncomment line 269: config.sign_out_via = :get. Be sure to restart your local server.

Next let's create a placeholder dashboard page that will act as the authenticated area. Run the following generator command:

bin/rails g controller user/dashboard index

This creates two files:

• app/controllers/users/dashboard_controller.rb

• app/views/users/dashboard/index.html.erb

In app/controllers/users/dashboard_controller.rb be sure to change line 1 so that the file contents are:

class Users::DashboardController < Users::ApplicationController
  def index
  end
end

We must inherit from Users::ApplicationController since that is the class that defines the layout and the authentication check.

Finally we must define where the user should be redirected to on sign in and sign out. Replace the contents of the file app/controllers/application_controller.rb with:

class ApplicationController < ActionController::Base
  private

  def after_sign_in_path_for(resource)
    users_dashboard_index_path
  end

  def after_sign_out_path_for(resource)
    new_user_session_path
  end
end

That's it! Trying logging in and out and view the bare-bones dashboard page. It looks like this:

Summary

In this article we accomplished the following tasks:

• Installed and configured the Devise gem

• Styled the authentication screens using Tailwind

• Created a protected dashboard page that only authenticated users can access

Next up we'll get to the fun bits that are the core of the business requirements (adding and completing tasks) and we'll start using Hotwire and Turbo to make a slick UI.

• Rails 7

• Hotwire

• Tailwind

This series assumes that the following tools already exist:

• MacOS

• Ruby 3.1.2

• Bundler

• Postgres

• Heroku account

Install Rails

Use the following command to create a new Rails app:

rails new dolist -d postgresql --css tailwind --minimal

This command sets up Postgres as the DB and installs Tailwind. Note the --minimal flag. This omits most of the non-critical Rails components such as: JS bundler / tooling, ActionCable, ActionMailer, ActionJob, etc. We may need a few of these but we can simply install them as needed.

Next create the databases:

bin/rails db:create

Finally, run the local server:

./bin/dev

Open a browser and visit the following address:

http://localhost:3000

You should see the Rails default homepage.

Create a Homepage

Let's create a new controller and view and set it to be the root page (homepage) of the app. In a new terminal tab run the following command:

bin/rails g controller Pages home

This command creates a controller file: app/controllers/pages.rb and a view template file: app/views/pages/home.html.erb

Next lets set this new page to be our app homepage. In the file config/routes.rb replace the entire contents with the following:

Rails.application.routes.draw do
  root 'pages#home'
end

Refresh the page at http://localhost:3000 and we should see the contents of the view file: home.html.erb

Change the contents of home.html.erb to be the following:

<div>
  <h1 class="font-bold text-8xl mb-3 tracking-tighter">DoList.</h1>
  <p class="text-gray-800 text-xl tracking-tight">
    A free and open-source Todoist alternative
  </p>
</div>

Your homepage should now look like the following:

Deploy to Heroku

From the Heroku dashboard create a new app named dolist-production. Then add the following Add-ons to the Heroku app:

• Heroku Postgres (our DB)

• Papertrail (for easy log viewing)

In the Rails app add a new file named Procfile and add the following contents:

web: bundle exec puma -C config/puma.rb

This file will instruct Heroku how to initialize and run our web server on the web dyno.

Next add the Heroku git remote source so that we can push and deploy:

git remote add heroku https://git.heroku.com/dolist-production.git

Finally commit all changes in our Rails app and push to Heroku:

git commit -am 'Init commit'
git push heroku main

We should now be able to view our app at a Heroku domain (found in the app "Settings" tab). The URL looks something like this:

https://dolist-production-01140a2950b0.herokuapp.com/

The following tasks were completed in this article:

• A new Rails app was created and configured locally.

• A new homepage was created and styled using Tailwind.

• A new Heroku app was created and configured.

• The Rails app was deployed to Heroku.