DEV Community: Michael Messerli

What apps have you built using Flutter?

Michael Messerli — Fri, 07 Aug 2020 02:01:15 +0000

Have you developed an awesome app using Flutter? I want to see it.

I like browsing apps and websites built using a specific stack. It's a great way to get inspiration while developing your own app. And once you've created your app it's a great way to show-off your creation.

If you've developed an app with flutter and want to share it: Submit it to Built with Flutter.

Update: I built a tool to help me manage my job search

Michael Messerli — Thu, 30 Jul 2020 16:19:11 +0000

In December of last year I posted about an open-source job tracking app I built.

I built a tool to help me keep track of my job hunt - JobHuntBuddy

Michael Messerli ・ Dec 10 '19

#showdev #vue

I got great feedback here on DEV and from a couple other sources. Since then, I decided to try and build a real product around the idea and expand on some features.

Why I built it (What I tried before)

I've tried a lot of ways to stay organized while I'm applying for jobs across multiple job sites. Something always falls through the cracks.

Trello or Spreadsheets

Trello is great for a big picture overview to see what status a given job application is in (application sent, interviewing, etc), but it requires doing a lot of formatting to keep information easy to read.

Notes

Usually, what I do when I send a new application is create a note (I like to use Bear) that holds all relevant info that might be useful later.

If the application has a questionnaire I jot down the question/answers. This is useful as a reference while writing a cover letter, or to take snippets from when other applications have similar questions.
Prepare questions I want to ask during the interview
Link to job posting to review (again for cover letter or interview prep)
Any other relevant data: salary, location, contract-type, etc.

Having the notes is super useful, but they lack the general overview of seeing what status each application is in.

So that's what I built

I wanted to marry the two strategies that worked for me in an application that does both. Plus, I wanted to add a couple features that go beyond the Kanban board and note taking:

Email Discovery: Let JobHuntBuddy help you find email addresses at the company you're applying to. It helps to know who's reviewing your application
Document storage: Upload your resumes and cover letters to a central place and always have access to them.

Thank you DEV

I want to thank the community here for the great feedback, criticisms, and ideas I've received from DEV.

I know a lot of readers here are looking for their first dev job and others who have been affected by current world events and that's why I created a free plan to help people get started.

And as a special thank you to DEV.to I want to offer a coupon code for those that decide upgrade to a premium plan: DEV-2

You can check it out here 👉 JobHuntBuddy.co

The original JobHuntBuddy will remain free and open source and can be found here:

Follow me on Twitter @michaelmesserli to connect and see my ramblings about tech, travel, and gaming.

Get early app feedback on 🔥Roast my App

Michael Messerli — Wed, 08 Jul 2020 12:27:23 +0000

We spend weeks and months building projects we're excited about but start developing tunnel vision. That's when it's great to get an outside perspective. We think:

Of course this feature make sense
This is plenty clear; You click here then this happens

Why build this?

I started building Roast my App this past weekend when I accidentally stumbled on the domain (roastmy.app) while looking for something else, but I couldn't let it sit 😅. I dropped everything and started working on this.

I'm working on another SaaS product and I know how hard it is to find beta testers and feedback. You also don't want to spam places like dev.to, indiehackers.com, etc every time you make adjustments.

Isn't this just a crappy Product Hunt?

A Product Hunt launch can be stressful and important, so this is a great place to get early feedback before you launch.

Technical Stuff

Read on if you care about the tech stack. Otherwise, skip it and submit your app to be roasted!

This app was a ton of fun to build. The main stack is (TALL):

Laravel
Laravel Livewire
Alpine.JS
TailwindCSS

If you have any questions about the stack or how certain things we built I'd love to answer any questions

So. Only thing left to do it 🔥 Roast my App (let me have it)

Follow me on Twitter @michaelmesserli

Build your own Kanban board with Laravel & VueJS

Michael Messerli — Fri, 29 May 2020 13:12:38 +0000

Part 1 - Setting up our project and building the Kanban board

Kanban boards are a great way to manage your tasks, projects, or your life. They use columns to represent the flow of a task. They’re also a popular agile project management tool. If you’ve used Trello you’ll know exactly what I’m talking about.

So let’s build our own Trello-style Kanban board!

Getting Started

Let’s start setting up all of the boiler plate for a new project.

Laravel install and set up

Start by creating a new laravel project. In your terminal navigate to where you want to create your project and run one of the following commands



# with the laravel installer
laravel new kanban-board

# or using composer
composer create-project --prefer-dist laravel/laravel kanban-board

Now create a new database and configure your connection in .env. For me that looks like this:



DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=kanban
DB_USERNAME=root
DB_PASSWORD=

Using TailwindCSS for UI & authentication scaffolding

We won’t worry too much about authentication in this guide, let’s just let Laravel handle the scaffolding. Also, we’re going to use Tailwind CSS as our CSS framework.

Luckily @michaeldyrynda made this awesome laravel/ui preset. to initialize all the scaffolding. You can check it out here:laravel-frontend-presets/tailwindcss.

// Detect dark theme var iframe = document.getElementById('tweet-1255848108707115008-37'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1255848108707115008&theme=dark" }

Install the dependencies and run migrations:



# install laravel/ui from composer
composer require laravel-frontend-presets/tailwindcss --dev

# then generate the scaffolding including authentication
php artisan ui tailwindcss --auth

# install npm dependencies
npm install && npm run dev

# ready to migrate
php artisan migrate

Great! We’ve got the authentication scaffolding done, our databases are set up, and everything looks great using Tailwind. Navigate to your local site in the browser and create your user account 👉 http://kanban-board.test

Creating our Tasks and Statuses

We know we want to create tasks and track them through different columns (we’ll call these statuses) so let’s start create the models in Laravel

A Task should have the following:

Title — Needs to have a title
Description — Optional extra details to add
Order — Should know where in the column it lives
Status Id — We want to track what status the task is currently in
User ID — A task should belong to a single user

A Status should have the following:

Title — Status should have a descriptive title
Slug — Slugified version of title, useful as keys and prettier URLs
Order — Even more important with columns, should have a defined order of statuses
User ID — Allow users to create their own statuses and workflow

Create the Task and Status model, migration, and controller:



php artisan make:model -mc Task
php artisan make:model -mc Status

Note the -mc flags; This will create a migration and controller for our model.

Migrations

Some



// database/migrations/XXXX_create_tasks_table.php
class CreateTasksTable extends Migration
{
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description')->nullable();
            $table->smallInteger('order')->default(0);
            $table->unsignedInteger('user_id');
            $table->unsignedInteger('status_id');
            $table->timestamps();
        });
    }
}

// database/migrations/XXXX_create_statuses_table.php
class CreateStatusesTable extends Migration
{
    public function up()
    {
        Schema::create('statuses', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('slug');
            $table->smallInteger('order')->default(0);
            $table->unsignedInteger('user_id');
        });
    }
}

As per our little spec above we’ve created all of the columns we need. Let’s run the migration:



php artisan migrate

Models

We need to define each model’s relationships and tell Laravel which attributes can be mass assigned. We’ll come back and add to this when we need to, but this will get us started.

User

Add the relationships to tasks and statuses. Note we can tell the relationship to always return our records in the order from the order attribute.



// app/User.php

// ...
class User extends Authenticatable
{
    protected $fillable = [
        'name', 'email', 'password',
    ];

    protected $hidden = [
        'password', 'remember_token',
    ];

    public function tasks()
    {
        return $this->hasMany(Task::class);
    }

    public function statuses()
    {
        return $this->hasMany(Status::class)->orderBy('order');
    }
}

Task



// app/Task.php

// ...
class Task extends Model
{
    protected $fillable = [‘title’, ‘description’, ‘order’, ‘status_id’];

    public function user()
    {
        return $this->belongsTo(User::class);
    }

    public function status()
    {
        return $this->belongsTo(Status::class);
    }
}

Status

Since we removed the timestamps from our migration we need to tell Laravel not to try to touch them when creating/updating a record. Again, we add a default orderBy to the relationship to tasks.



// app/Status.php

// ...
class Status extends Model
{
    protected $fillable = [‘title’, ‘slug’, ‘order’];

    public $timestamps = false;

    public function tasks()
    {
        return $this->hasMany(Task::class)->orderBy('order');
    }

    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

Routes & Controllers

Let’s think about which actions we need to take and the routes & controller methods we need

Tasks

Get all tasks — GET tasks — TaskController@index
Add a new task — POST tasks — TaskController@store
Update a task — PUT tasks/{task} — TaskController@update

Statuses

Add a new status — POST statuses — StatusController@store
Update a status — PUT statuses — StatusController@update

To keep things simple for now let’s just redirect the /home route to /tasks.

Update your /routes/web.php file to match the following:



// routes/web.php

// Update our 'home' route to redirect to /tasks
Route::get('/home', function () {
    return redirect()->route('tasks.index');
})->name('home');

Route::group(['middleware' => 'auth'], function () {
    Route::get('tasks', 'TaskController@index')->name('tasks.index');
    Route::post('tasks', 'TaskController@store')->name('tasks.store');
    Route::put('tasks/sync', 'TaskController@sync')->name('tasks.sync');
    Route::put('tasks/{task}', 'TaskController@update')->name('tasks.update');
});

Route::group(['middleware' => 'auth'], function () {
    Route::post('statuses', 'StatusController@store')->name('statuses.store');
    Route::put('statuses', 'StatusController@update')->name('statuses.update');
});

You can run php artisan route:list to see all of the routes that are available

Update the TaskController

Let’s think about the data we’re expecting on the Kanban board; A user has many tasks that also belong to a status. What if we return this data structured exactly like that?

Instead of just returning an array of a user’s tasks, we’ll return an array of a user’s statuses that then includes an array of the tasks in that status.

Update the index() method on our TaskController:



// app/Http/Controllers/TaskController.php

// ...
class TaskController extends Controller
{
    public function index()
    {
        $tasks = auth()->user()->statuses()->with('tasks')->get();

        return view('tasks.index', compact('tasks'));
    }

    // ...
}

Create the view where the Kanban will live

Create a new Blade template in /resources/views/tasks named index.blade.php and add the following boilerplate:



<!-- resources/views/tasks/index.blade.php -->

@extends('layouts.app')

@section('content')
<div class="md:mx-4 relative overflow-hidden">
    <main class="h-full flex flex-col overflow-auto">
        <!-- Our Kanban Vue component will go here -->
    </main>
</div>
@endsection

Default Columns

To get started more quickly create some default statuses that every new user will get. Using the User’s booted method we can create and append statuses when a new user is created.

Add this to your User.php model:



// app/User.php

protected static function booted()
    {
        static::created(function ($user) {
            // Create default statuses
            $user->statuses()->createMany([
                [
                    'title' => 'Backlog',
                    'slug' => 'backlog',
                    'order' => 1
                ],
                [
                    'title' => 'Up Next',
                    'slug' => 'up-next',
                    'order' => 2
                ],
                [
                    'title' => 'In Progress',
                    'slug' => 'in-progress',
                    'order' => 3
                ],
                [
                    'title' => 'Done',
                    'slug' => 'done',
                    'order' => 4
                ]
            ]);
        });
    }

Wrapping up the initial backend

What have we done so far?

Installed Laravel and the Composer dependencies we need
Authentication scaffolding
Created the resources for Status and Task
Return users’ tasks to the view
Create some default statuses when a user is created

That’s all the initial back end boilerplate and scaffolding done, let’s move on to some front end code.

Building the Kanban board

Let’s break down what we need to do to get our first component up and running:

Set up Vue
Create our Kanban component
Add new tasks
Implement drag-and-drop
Update the order and status of a task when it’s been moved

Install Vue

Because we didn’t use Laravel’s Vue scaffolding we’ll need to set it up ourselves. Grab it from npm:



npm install vue

Once Vue is installed we can initialize it in our resources/js/app.js file:



require("./bootstrap");

window.Vue = require("vue");

// Register our components (in the next step)

const app = new Vue({
    el: "#app"
});

That’s it! Our Laravel app now has Vue hooked up and we can start taking advantage of everything it has to offer. Run npm run dev and check the site in your browser, the console should now be warning you that you’re running Vue in development mode, that’s good.

Tip:
Before we move on; I recommend grabbing the Vue devtools for whichever browser you’re using. This let’s your debug and dive into your Vue components to see the state.

Register the Kanban component

Create a new file called KanbanBoard.vue in the components folder located in resources/js/components/ and register it in your app.js file:



// resources/js/app.js

// Register our components
Vue.component("kanban-board", require("./components/KanbanBoard.vue").default);

Add the component to our Blade view:



// resources/views/tasks/index.blade.php

<main class="h-full flex flex-col overflow-auto">
    <kanban-board :initial-data="{{ $tasks }}"></kanban-board>
</main>

To avoid having to npm run dev every time we make a change in our component use:



npm run watch

Let’s build it

I know… Finally!

Big chunk incoming, but most of this is just HTML scaffolding and applying TailwindCSS classes. We’ll break down the important bits



<template>
  <div class="relative p-2 flex overflow-x-auto h-full">

    <!-- Columns (Statuses) -->
    <div
      v-for="status in statuses"
      :key="status.slug"
      class="mr-6 w-4/5 max-w-xs flex-1 flex-shrink-0"
    >
      <div class="rounded-md shadow-md overflow-hidden">
        <div class="p-3 flex justify-between items-baseline bg-blue-800 ">
          <h4 class="font-medium text-white">
            {{ status.title }}
          </h4>
          <button class="py-1 px-2 text-sm text-orange-500 hover:underline">
            Add Task
          </button>
        </div>
        <div class="p-2 flex-1 flex flex-col h-full overflow-x-hidden overflow-y-auto bg-blue-100">

          <!-- Tasks -->
          <div
            v-for="task in status.tasks"
            :key="task.id"
            class="mb-3 p-3 h-24 flex flex-col bg-white rounded-md shadow transform hover:shadow-md cursor-pointer"
          >
            <span class="block mb-2 text-xl text-gray-900">
              {{ task.title }}
            </span>
            <p class="text-gray-700 truncate">
              {{ task.description }}
            </p>
          </div>
          <!-- ./Tasks -->

          <!-- No Tasks -->
          <div
            v-show="!status.tasks.length"
            class="flex-1 p-4 flex flex-col items-center justify-center"
          >
            <span class="text-gray-600">No tasks yet</span>
            <button
              class="mt-1 text-sm text-orange-600 hover:underline"
            >
              Add one
            </button>
          </div>
          <!-- ./No Tasks -->
        </div>
      </div>
    </div>
    <!-- ./Columns -->

  </div>
</template>

<script>
export default {
  props: {
    initialData: Array
  },
  data() {
    return {
      statuses: []
    };
  },
  mounted() {
    // 'clone' the statuses so we don't alter the prop when making changes
    this.statuses = JSON.parse(JSON.stringify(this.initialData));
  }
};
</script>

Remember when naming props they should be written in kebab-cased (initial-data) in the HTML, and camelCased (initialData) in the component.

You might have noticed we’re doing some weird JSON parsing to our prop data, this creates a ‘clone’ of the array so we don’t actually alter the data being passed by the prop instead just our copy.

Alternatives
We’re using JSON.parse(JSON.stringify(this.initialData)); instead of something like […this.initialData] because it’s safer when dealing with nested data (like our array of tasks inside of each status object)

In the template we’re using v-for="status in statuses" to iterate over our statuses array to display the columns. Don’t forget to add a key , this is especially important for this project because we want Vue to keep track of the order of our elements.

Similarly, inside of each column we’re then displaying our task cards with another v-for using the list of tasks in the current status.

Add a new task

Create the AddTaskForm component

We’ll create a new Vue component named AddTaskForm.vue in our /resources/js/components directory.

This component will include a form with a title and description field. It’ll send the form data to our server which will create the new task in our database and return it if there’s no validation errors.

We’ll relay that new task up to the KanbanBoard component and add it to the correct column.



// resources/js/components/AddTaskForm.vue

<template>
  <form
    class="relative mb-3 flex flex-col justify-between bg-white rounded-md shadow overflow-hidden"
    @submit.prevent="handleAddNewTask"
  >
    <div class="p-3 flex-1">
      <input
        class="block w-full px-2 py-1 text-lg border-b border-blue-800 rounded"
        type="text"
        placeholder="Enter a title"
        v-model.trim="newTask.title"
      />
      <textarea
        class="mt-3 p-2 block w-full p-1 border text-sm rounded"
        rows="2"
        placeholder="Add a description (optional)"
        v-model.trim="newTask.description"
      ></textarea>
      <div v-show="errorMessage">
        <span class="text-xs text-red-500">
          {{ errorMessage }}
        </span>
      </div>
    </div>
    <div class="p-3 flex justify-between items-end text-sm bg-gray-100">
      <button
        @click="$emit('task-canceled')"
        type="reset"
        class="py-1 leading-5 text-gray-600 hover:text-gray-700"
      >
        cancel
      </button>
      <button
        type="submit"
        class="px-3 py-1 leading-5 text-white bg-orange-600 hover:bg-orange-500 rounded"
      >
        Add
      </button>
    </div>
  </form>
</template>

<script>
export default {
  props: {
    statusId: Number
  },
  data() {
    return {
      newTask: {
        title: "",
        description: "",
        status_id: null
      },
      errorMessage: ""
    };
  },
  mounted() {
    this.newTask.status_id = this.statusId;
  },
  methods: {
    handleAddNewTask() {
      // Basic validation so we don't send an empty task to the server
      if (!this.newTask.title) {
        this.errorMessage = "The title field is required";
        return;
      }

      // Send new task to server
      axios
        .post("/tasks", this.newTask)
        .then(res => {
          // Tell the parent component we've added a new task and include it
          this.$emit("task-added", res.data);
        })
        .catch(err => {
          // Handle the error returned from our request
          this.handleErrors(err);
        });
    },
    handleErrors(err) {
      if (err.response && err.response.status === 422) {
        // We have a validation error
        const errorBag = err.response.data.errors;
        if (errorBag.title) {
          this.errorMessage = errorBag.title[0];
        } else if (errorBag.description) {
          this.errorMessage = errorBag.description[0];
        } else {
          this.errorMessage = err.response.message;
        }
      } else {
        // We have bigger problems
        console.log(err.response);
      }
    }
  }
};
</script>

In the data of this component we’re keeping tracking of a newTask object, which gets its status_id from the props.

Using v-model.trim=“newTask.title” we’re setting up two-way binding between the input and state and telling Vue to trim off any whitespace.

When we submit the form we want to let our parent component know what happened and return the new task. If there’s an error in the response, we’ll show a message to let the user know what went wrong.

Add the new component to KanbanBoard



// resources/js/components/KanbanBoard.vue

<template>
  // ...
  <AddTaskForm
    v-if="newTaskForStatus === status.id"
    :status-id="status.id"
    v-on:task-added="handleTaskAdded"
    v-on:task-canceled="closeAddTaskForm"
  />
  // Add this just above our list of tasks
  <!-- Tasks -->
  //...
  <!-- No Tasks -->
  // Update the placeholder to include a click handler to create a new task
  // and hide it when the form is open
  <div
    v-show="!status.tasks.length && newTaskForStatus !== status.id"
    class="flex-1 p-4 flex flex-col items-center justify-center"
  >
    <span class="text-gray-600">No tasks yet</span>
    <button
      class="mt-1 text-sm text-orange-600 hover:underline"
      @click="openAddTaskForm(status.id)"
    >
      Add one
    </button>
  </div>
  <!-- ./No Tasks -->
</template>

<script>
import AddTaskForm from "./AddTaskForm"; // import the component

export default {
  components: { AddTaskForm }, // register component
  // ...
  data() {
    return {
      statuses: [],

      newTaskForStatus: 0 // track the ID of the status we want to add to
    };
  },
  // ...
  methods: {
    // set the statusId and trigger the form to show 
    openAddTaskForm(statusId) {
      this.newTaskForStatus = statusId;
    },
    // reset the statusId and close form
    closeAddTaskForm() {
      this.newTaskForStatus = 0;
    },
    // add a task to the correct column in our list
    handleTaskAdded(newTask) {
      // Find the index of the status where we should add the task
      const statusIndex = this.statuses.findIndex(
        status => status.id === newTask.status_id
      );

      // Add newly created task to our column
      this.statuses[statusIndex].tasks.push(newTask);

      // Reset and close the AddTaskForm
      this.closeAddTaskForm();
    },
  }
};
</script>

Store new task on server

Back in our laravel app we need to update our TasksController to handle storing a new task.



// app/Http/Controllers/TaskController

public function store(Request $request)
{
    $this->validate($request, [
        'title' => ['required', 'string', 'max:56'],
        'description' => ['required', 'string'],
        'status_id' => ['required', 'exists:statuses,id']
    ]);

    return $request->user()
        ->tasks()
        ->create($request->only('title', 'description', 'status_id'));
}

First, we want to validate the request coming in to make sure the data we’re getting is what we expect, otherwise this will return a 422 response with the validation errors (which we’re already catching and handling 🙌)

If all is good, we can save and attach the new task to our the authenticated user and return it.

Security Note:
Although the task will get added to the authenticated user, we’re not checking if this user owns the status it’s being attached to. We’ll come back to authorization and policies in a later part, just keep this in mind.

Draggin’ and Droppin’

Alright, we have a bunch of columns with some tasks in them and we can create new tasks. Let’s get to the fun part of moving the cards from one column to another using drag-and-drop.

We’re going to be using SortableJS/Vue.Draggable to quickly plug in a drag-and-drop. Use npm to install this:



npm install vuedraggable

# once installed run watch again
npm run watch

Add it to our KanbanBoard component

Now that we have vuedraggable installed, let’s hook it up to our columns and start moving tasks.



// resources/js/components/KanbanBoard.vue

<template>
  // ...
  <div class="p-2 bg-blue-100"> // Update these classes because we're moving them to our transition-group
    <!-- AddTaskForm -->
    // ...
    <!-- ./AddTaskForm -->

    <!-- Tasks -->
    <draggable
      class="flex-1 overflow-hidden"
      v-model="status.tasks"
      v-bind="taskDragOptions"
      @end="handleTaskMoved"
    >
      <transition-group
        class="flex-1 flex flex-col h-full overflow-x-hidden overflow-y-auto rounded shadow-xs"
        tag="div"
      >
        <div
          v-for="task in status.tasks"
          :key="task.id"
          class="mb-3 p-3 h-24 flex flex-col bg-white rounded-md shadow transform hover:shadow-md cursor-pointer"
        >
          // ... nothing changed in here
        </div>
        <!-- ./Tasks -->
      </transition-group>
    </draggable>
  // ...
  </div>
<template>

<script>
import draggable from "vuedraggable"; // import the vuedraggable component
// ...

export default {
  components: { draggable, AddTaskForm }, // register 
  // ...
  computed: {
    taskDragOptions() {
      return {
        animation: 200,
        group: "task-list",
        dragClass: "status-drag"
      };
    }
  },
  // ...
  methods: {
    // ...
    handleTaskMoved() {
      // Send the entire list of statuses to the server
      axios.put("/tasks/sync", {columns: this.statuses}).catch(err => {
        console.log(err.response);
      });
    }
  }
};
</script>

<style scoped>
.status-drag {
  transition: transform 0.5s;
  transition-property: all;
}
</style>

After importing and registering the draggable component we need to configure it.

The group value in our taskDragOptions tells sortable that even though our elements are spread across different columns they should be grouped together.

Above, in our template we’ve added the <draggable> and the <transition-group> components which gives a better visual feedback as cards move around more smoothly when we drag through the list. Notice the updates we’ve made with the CSS classes too, the components render their own DOM element that we need to consider when using flex to arrange our child elements.

This is also the first time we’re taking advantage of the style section in our Vue component. We’re just adding some transition properties to the draggable element, but you could change the style of the card while it’s actively being dragged. Maybe add a larger shadow?

We can now move tasks within and between columns! We’re pretty close, last thing we need to do is save the order to our database. We’re already making the PUT request to /tasks/sync in our component so we need to create the controller method to handle the request.

Sync the order of tasks in our TaskController

Once we drag a task into a new column we want that change to be reflected in the database. In this part we’re returning the entire list of columns with their tasks and then letting our backend handle how they should be updated.

First let’s add our new route:



// routes/web.php

//..
Route::group(['middleware' => 'auth'], function () {
    Route::get('tasks', 'TaskController@index')->name('tasks.index');
    Route::post('tasks', 'TaskController@store')->name('tasks.store');
    // Important: this needs to be above the /tasks/{task} route
    Route::put('tasks/sync', 'TaskController@sync')->name('tasks.sync');
    Route::put('tasks/{task}', 'TaskController@update')->name('tasks.update');
});

Be sure to add this new route above the update route. This is important because the /tasks/{task} route would otherwise be triggered instead of the /tasks/sync route and our app would look for a task with an ID of ‘sync’.

Add the new method to our controller:



// app/Http/Controllers/TaskController.php

// ...
public function sync(Request $request)
    {
        $this->validate(request(), [
            'columns' => ['required', 'array']
        ]);

        foreach ($request->columns as $status) {
            foreach ($status['tasks'] as $i => $task) {
                $order = $i + 1;
                if ($task['status_id'] !== $status['id'] || $task['order'] !== $order) {
                    request()->user()->tasks()
                        ->find($task['id'])
                        ->update(['status_id' => $status['id'], 'order' => $order]);
                }
            }
        }

        return $request->user()->statuses()->with('tasks')->get();
    }

What we’re doing here is looping through all our columns checking if the order or status has changed for a task. If it has changed we update that task.

Performance Note:
This is not the most performant way to handle syncing the changes, but in a later part we’ll dive in and refactor this, as well as build a more robust API in general.

Now it’s your turn

Right now we can create a new task and move it between our columns, and up and down in the list, but we can’t update or remove a task. Using what we’ve learned try to add this functionality to our Vue component and create the controller methods.

We’ll do it together in the next part and we can compare methods!

Wrapping up

Phew, this part became much longer than I anticipated. If you made it this far congrats! It’s been a lot of fun to build and write up.

If you have any questions, or want to discuss different approaches, leave a comment.

What’s next?

In the next part we’re going to:

Implement Vuex as a state management system
Customize our columns
Update & remove tasks
Refactor our API
Build a repository layer between our Vue components and backend.

If there’s interest we’ll keep diving deeper into how to improve our code, refactor things and add test coverage.

Github repo

Everything in this guide is on Github 👉 GitHub - messerli90/laravel-vue-kanban-tutorial

messerli90 / laravel-vue-kanban-tutorial

Build a Kanban board with Laravel & Vue (Tutorial Series)

I will add a branch for each part of this series. So if you check in the master branch it may look totally different than what we built above.

Plug

A couple months ago I posted this blog:

I built a tool to help me keep track of my job hunt - JobHuntBuddy

Michael Messerli ・ Dec 10 '19

#showdev #vue

Since then I decided to try and build a real product around the idea. It uses a similar Kanban board as we built today to keep track of the status of a job application and offers lots of other features to help you manage your job hunt.

You can check it out here 👉 JobHuntBuddy.co

The original JobHuntBuddy will remain free and open source and can be found here:

Follow me on Twitter @michaelmesserli to connect and see my ramblings about tech, travel, and gaming.

Custom order with sortBy() -- Bonus Livewire implementation

Michael Messerli — Sun, 15 Mar 2020 06:29:42 +0000

I recently ran into an issue where I wanted to order a list of users by their role. The problem is the roles don't have any kind of order built in, and they're not alphabetical.

Problem

Teams have a many-to-many relationship with Users. On the pivot table we have a role attribute.

Users can be one of 4 roles within a Team: Owner, Admin, Moderator, or Member.

We want to list members of a team in the above order.

Solution

In the ->sortBy() return a Closure with the array of keys you'd like to order by, and return their index.

return $this->team->users()->withPivot('role')->get()->sortBy(function ($item, $key) {
    $order = ['owner', 'admin', 'moderator', 'member'];
    return array_search($item['pivot']['role'], $order);
})

Bonus: Building this list in Livewire

// livewire/Teamwork/MemberList.php
class MemberList extends Component
{
    public $team;

    protected $listeners = [
        'membersUpdated' => 'updateList',
        'roleUpdated' => 'updateList'
    ];

    public function mount($team)
    {
        $this->team = $team;
    }

    public function updateList()
    {
        //
    }

    public function render()
    {
        return view('livewire.teamwork.member-list', [
            'members' => $this->team->users()->get()->sortBy(function ($item, $key) {
                $order = ['owner', 'admin', 'moderator', 'member'];
                return array_search($item['pivot']['role'], $order);
            })
        ]);
    }
}

Wrapping Up

So this works great for me and I was happy to find a way to create a custom order. I'd like to hear from someone with more experience about alternate ways to accomplish this.

I built a tool to help me keep track of my job hunt - JobHuntBuddy

Michael Messerli — Tue, 10 Dec 2019 10:44:11 +0000

Over the past two months I've been looking for a new job and I realized how important it was to keep track of applications.

I was making a list of potential jobs, tracking which applications I've sent, and keeping notes about each lead. Instead of using Excel I wanted a web app and I've been looking for a new project for a while, so I built JobHuntBuddy.co.

It's still quite early, but I believe the core functionality is there:

Add a Lead with a company name, job title, link to job posting, and a few more key pieces of information about the job.
Status - manage the status of an application so you know where in the process you are, and if there's any action you should be taking. Currently either 'Just a prospect', 'Application Sent', 'Interview Set', and 'Rejected'
Notes - I like to keep notes about job listings so I remember what I said in the cover letter, questions I should ask during the interview, or anything else that I don't want to forget (or confuse with a different job listing)

Why?

It scratches my own itch
I wanted to learn Nuxt, so I needed a new project
I wanted to keep it open source as a code example, since most of my recent work is not publicly available.

The Stack

Built with Vue.js / Nuxt (SSR), using Firebase for authentication and data storage, and hosted on Heroku.

Conclusion

This has been a really fun project and I've learned a ton. Coming from mainly using Laravel with some Vue.js components on the front, to creating a complete application with Javascript has been a huge learning experience. I look forward to continue learning and growing with Javascript.

If have any feedback, criticisms, or anything else I look forward to answering comments!

Edit

I'm rebuilding the app using Laravel & Vue.JS. The version I talked about on this post will remain live, open source, and free. It's been moved to FREE.jobhuntbuddy.co

Check it out for yourself: JobHuntBuddy.co

Github: messerli90/jobhuntbuddy

Follow me on Twitter: @michaelmesserli

Build an advanced search and filter with Vuex (in Nuxt)

Michael Messerli — Fri, 06 Dec 2019 08:54:03 +0000

What are we building?

A filter! We want to be able to search through our leads, filter them by status, and change the order. But, we also want all of these filters to work together and chain.

Get Started

So to keep this as short as possible I'll refrain from going through the process of setting up a new Nuxt project. This should also work fine with plain old Vuex.

Here's some assumptions:

You already have a project setup
You have some type of data you want to filter
You know the basics of Vuex and store management

Project structure

For my example I'm using a project I've been working on (did I mention it's open source? 👉 https://github.com/messerli90/jobhuntbuddy).

We have a bunch of job openings (we're calling leads) we'd like to track, but the list is getting long and we want to be able to:

Search by company name and job title
Show only leads in a certain status
Order them by: created date, company name, job title, or status
Not make an API call every time the filter changes, all changes to the list should remain local

Let's get started

Set up the Vuex store

We have a store setup that has our list of leads and current lead in state. We want to add a new list of filteredLeads and an initial filter object to our state.

// ~/store/leads.js
export const state = () => ({
  leads: [],
  filteredLeads: [],
  lead: {},
  filter: {
    search: '',
    status: 'all',
    order: 'createdAt'
  }
})

We want to keep the initial list of leads we get back from the API to remain untouched, so when we clear our filters we can just grab all of our leads again.

Actions

Let's define the actions our Vue component will be able to call when we make changes to our filter.

I've prefixed all these methods with 'filter' so know it all belongs together.

For filterStatus, filterSearch, and filterOrder we first commit a mutation to store them in the filter object we just created. This way, when we can maintain a single source of truth when calling the filterLeads method.

Since we want to make all of our filters be maintained no matter which value we change the final filterLeads action will first narrow down our list to what we want and then order our new list.

// ~/store/leads.js
export const actions = {
// ...
  async filterOrder ({ commit }, order) {
    await commit('setOrder', order)
    await commit('orderLeads')
  },
  async filterStatus ({ commit, dispatch }, status) {
    await commit('setFilterStatus', status)
    dispatch('filterLeads')
  },
  async filterSearch ({ commit, dispatch }, search) {
    await commit('setFilterSearch', search)
    dispatch('filterLeads')
  },
  async filterLeads ({ commit }) {
    await commit('filterLeads')
    await commit('orderLeads')
  },
  // ...
}

Mutations

Now let's look at the mutations we just commited.

setFilteredLeads gets called after applying a new filter so our Vue component shows only the leads we want to see, without losing our initial list.

setFilterStatus, setFilterSearch, and setOrder are only responsible for changing the respective value on the filter object.

filterLeads first makes a local copy of all leads. We reset our filteredLeads list to include all leads. Finally, we call our filter method and store this new list on the state.

Similarly, orderLeads grabs this new list of filteredLeads, passes it on to our ordering method, and saves our new list.

// ~/store/leads.js
import * as Filters from '~/helpers/filters'

export const mutations = {
  // ...
  setFilteredLeads (state, leads) { state.filteredLeads = leads },

  setFilterStatus (state, status) { state.filter.status = status },
  setFilterSearch (state, search) { state.filter.search = search },
  setOrder (state, order) { state.filter.order = order },

  filterLeads (state) {
    const leads = [...state.leads]
    state.filteredLeads = leads
    state.filteredLeads = Filters.filterLeads(state.filter, leads)
  },
  orderLeads (state) {
    const leads = [...state.filteredLeads]
    state.filteredLeads = Filters.orderLeads(state.filter.order, leads)
  }
  // ...
}

And that's all we have to change in our Vuex store. Let's move on to our filtering helper methods

Filter Helpers

This is where the magic happens. We saw in the last step our mutations called Filter.filterLeads(state.filter, leads) and Filter.orderLeads(state.filter.order, leads) so let's create these and do some sorting!

Disclaimer: This works, but I am in no way a javascript rockstar and if you have any tips on how to optimize this I am excited to hear from you!

Recap
Remember what our filter object looks like:

filter: {
  search: '',
  status: 'all',
  order: 'createdAt'
}

filterLeads(filter, leads)

// ~/helpers/filters.js
export function filterLeads (filter, leads) {
  let filteredList = [...leads]

  // Filter status
  if (filter.status !== 'all') {
    const filtered = filteredList.filter(lead => lead.status === filter.status)
    filteredList = filtered
  }

  // Search
  if (filter.search !== '') {
    const searchList = []
    const searchTerm = filter.search.toLowerCase()
    for (let i = 0; i < filteredList.length; i++) {
      if (
        (filteredList[i].companyName !== null && filteredList[i].companyName.toLowerCase().includes(searchTerm)) ||
        (filteredList[i].jobTitle !== null && filteredList[i].jobTitle.toLowerCase().includes(searchTerm))
      ) {
        searchList.push(filteredList[i])
      }
    }
    filteredList = searchList
  }

  return filteredList
}

Read more about includes() on MDN: String.prototype.includes()

Since the search loops through all of our leads to make a text match, we'll do that last to save it from running unnecessary iterations. Let's first first filter through our list to find any leads that match our status filter.

Now that we have this shorter list we can pass that on to the search logic. If the search field is empty we should skip this whole step. (Remember that we reset our filteredLeads list back to our initial leads list before calling this). Otherwise, make sure to use .toLowerCase() on both the search term and the attribute you want to filter because javascript treats 'A' & 'a' differently and the won't match otherwise. Any matches get pushed to our new searchList and then replace our filteredList.

orderLeads(order, leads)

// ~/helpers/filters.js
import moment from 'moment'
export function orderLeads (order, leads) {
  const orderedList = [...leads]

  if (order === 'createdAt') {
    orderedList.sort(function (a, b) {
      const unixA = moment(a.createdAt).unix()
      const unixB = moment(b.createdAt).unix()
      return unixA < unixB ? -1 : 1
    })
  } else {
    orderedList.sort(function (a, b) {
      const nameA = a[order] ? a[order].toLowerCase() : 'zzz'
      const nameB = b[order] ? b[order].toLowerCase() : 'zzz'
      return nameA < nameB ? -1 : 1
    })
  }

  return orderedList
}

Read more about sort() on MDN: Array.prototype.sort()

This is our order method. Since currently we're only ordering by company name, job title, status, and created at we only need two types of ordering functions: Date and String.

So, if the order is 'createdAt', and we know that lead.createdAt is a timestamp we transform it to a unix timestamp so it's easier to compare. I use Moment.js here which may be overkill.

Otherwise, our other ordering methods are all strings so we can treat them the same (assuming our order and object key are equal!). I've also decided that if a lead doesn't have a certain value (i.e. jobTitle) we'll default this to 'zzz' so it gets pushed to the end of the list.

Then we return our orderList (which has already been filtered)

Presentation Layer

Now that all the ground work has been done in our Vuex store, let's move on to the Vue component that puts this all together.

Lead Filter

Our filter component

// ~/components/leads/leadFilter.vue
<template>
  <div>
    <div class="w-full mb-2">
      <input
        :value="search"
        type="search"
        class="h-12 p-4 mb-1 w-full bg-white border-2 border-gray-300 rounded-full"
        placeholder="Search company name or job title"
        aria-label="Search by company name or job title"
        @input="handleSearch"
      >
    </div>
    <div class="mb-4 w-full">
      <div class="flex flex-wrap items-center justify-center md:justify-between w-full text-gray-800">
        <button
          class="bg-gray-400 rounded-full px-3 py-2 font-medium text-center text-sm m-1 hover:bg-gray-500"
          :class="{ 'bg-indigo-700 text-white hover:bg-indigo-800' : status === 'all' }"
          @click="handleStatusFilter('all')"
        >
          All Leads
        </button>
        <button
          class="bg-gray-400 rounded-full px-3 py-2 font-medium text-center text-sm m-1 hover:bg-gray-500"
          :class="{ 'bg-yellow-500 text-white hover:bg-yellow-600' : status === 'prospect' }"
          @click="handleStatusFilter('prospect')"
        >
          Prospects
        </button>
        <button
          class="bg-gray-400 rounded-full px-3 py-2 font-medium text-center text-sm m-1 hover:bg-gray-500"
          :class="{ 'bg-green-500 text-white hover:bg-green-600' : status === 'application-sent' }"
          @click="handleStatusFilter('application-sent')"
        >
          Application Sent
        </button>
        <button
          class="bg-gray-400 rounded-full px-3 py-2 font-medium text-center text-sm m-1 hover:bg-gray-500"
          :class="{ 'bg-blue-500 text-white hover:bg-blue-600' : status === 'interview-set' }"
          @click="handleStatusFilter('interview-set')"
        >
          Interview Set
        </button>
        <button
          class="bg-gray-400 rounded-full px-3 py-2 font-medium text-center text-sm m-1 hover:bg-gray-500"
          :class="{ 'bg-red-500 text-white hover:bg-red-600' : status === 'rejected' }"
          @click="handleStatusFilter('rejected')"
        >
          Rejected
        </button>
      </div>
    </div>
    <div class="flex justify-start">
      <div class="relative mb-3 pr-8">
        <p
          v-click-outside="closeOrderDropDown"
          class="text-gray-700 cursor-pointer flex items-center"
          @click="orderOpen = !orderOpen"
        >
          <fa :icon="['fas', 'sort-amount-down']" class="h-4 mx-1" />
          <span class="mr-1">Order By</span>
          <span v-show="orderChanged" class="font-semibold">{{ orderText }}</span>
        </p>
        <ul v-show="orderOpen" class="bg-white absolute z-20 px-3 py-2 mt-1 rounded shadow-lg text-gray-700 min-w-full">
          <li
            class="cursor-pointer pb-1 hover:text-indigo-600"
            :class="{ 'text-indigo-600 font-semibold' : order === 'createdAt' }"
            @click="handleFilterOrder('createdAt')"
          >
            Created Date
          </li>
          <li
            class="cursor-pointer pb-1 hover:text-indigo-600"
            :class="{ 'text-indigo-600 font-semibold' : order === 'companyName' }"
            @click="handleFilterOrder('companyName')"
          >
            Company Name
          </li>
          <li
            class="cursor-pointer hover:text-indigo-600"
            :class="{ 'text-indigo-600 font-semibold' : order === 'jobTitle' }"
            @click="handleFilterOrder('jobTitle')"
          >
            Job Title
          </li>
          <li
            class="cursor-pointer hover:text-indigo-600"
            :class="{ 'text-indigo-600 font-semibold' : order === 'status' }"
            @click="handleFilterOrder('status')"
          >
            Status
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { debounce } from '~/helpers/index'
export default {
  data () {
    return {
      orderOpen: false,
      orderChanged: false
    }
  },
  computed: {
    search () {
      return this.$store.state.leads.filter.search
    },
    status () {
      return this.$store.state.leads.filter.status
    },
    order () {
      return this.$store.state.leads.filter.order
    },
    orderText () {
      switch (this.order) {
        case 'companyName':
          return 'Company Name'
        case 'jobTitle':
          return 'Job Title'
        case 'status':
          return 'Status'
        default:
          return 'Created Date'
      }
    }
  },
  methods: {
    handleStatusFilter (status) {
      this.$store.dispatch('leads/filterStatus', status)
    },
    handleSearch: debounce(function (e) {
      this.$store.dispatch('leads/filterSearch', e.target.value)
    }, 500),
    handleFilterOrder (orderBy) {
      this.orderOpen = false
      this.orderChanged = true
      this.$store.dispatch('leads/filterOrder', orderBy)
    },
    closeOrderDropDown (e) {
      this.orderOpen = false
    }
  }
}
</script>

I can hear you already: "That's a lot of Tailwind CSS...", I know but we're bootstrapping 😉. Let's look at what we care about:

In computed() we're grabbing the current state of the three filters we care about: search, status, and order. And making our orders readable since we made them === key on the lead.

Our methods() are all very straight forward and only dispatch the actions we created earlier. It's all reactive and gets handled by Vuex!

Lead List

This is our index page listing all of our leads

// ~/pages/leads/index.vue
<template>
  <div id="lead-index-wrapper" class="container pt-4 px-2 w-full md:w-2/3 lg:w-1/2 xl:w-1/3">
    <div>
      <div v-if="leads.length">
        <LeadFilter />
        <nuxt-link v-for="lead in filteredLeads" :key="lead.id" :to="'/leads/' + lead.id">
          <IndexCard :lead="lead" />
        </nuxt-link>
        <NoLeadsCard v-if="!filteredLeads.length" />
      </div>
      <OnboardingCard v-if="!leads.length" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import LeadFilter from '~/components/leads/leadFilter'
import IndexCard from '~/components/leads/IndexCard'
import OnboardingCard from '~/components/leads/onboardingCard'
import NoLeadsCard from '~/components/leads/noLeadsCard'
export default {
  middleware: 'authenticated',
  components: { IndexCard, NoLeadsCard, OnboardingCard, LeadFilter },
  computed: {
    ...mapGetters({
      'leads': 'leads/getLeads',
      'filteredLeads': 'leads/getFilteredLeads',
      'lead': 'leads/getLead'
    })
  },
  async fetch ({ store }) {
    await store.dispatch('leads/fetchAllLeads')
  },
  mounted () {
    if (!this.leads.length) {
      this.$store.dispatch('leads/fetchAllLeads')
    }
  }
}
</script>

Not everything here is relevant to this guide, but let's take a look at what's happening on the front end.

As you can see, besides checking that leads exist, most of our components only care about the filteredLeads which initially are same-same as leads.

We import our LeadFilter component which is really dumb and only cares about the state in our Vuex store.

Wrapping up

That's it, we've seen how we can use actions to commit mutations and dispatch other actions. We talked a bit about sorting() and using includes() in javascript. And mostly, I wanted to demonstrate how to use state to prevent passing multiple arguments to each method and keeping a single source of truth.

I've really enjoyed working with Nuxt and diving deeper into state management using Vuex. I have learned so much over the past couple months and wanted to give back.

JobHuntBuddy

JobHuntBuddy.co
I used a project I'm currently working on as the example. Right now, I'm looking for a new job so this project is killing two bird by helping me manage my job hunt, and giving potential employers an open source code example to look at.

✌️ Happy Coding!

Follow me on Twitter @michaelmesserli

How Tailwind helped me better understand CSS

Michael Messerli — Mon, 18 Nov 2019 11:22:22 +0000

This is my first post on Dev.to, and really anywhere, in an attempt to be more self-critical and share my experiences

I've been building websites for almost 8 years and CSS has always been my biggest weakness.

Like a lot of developers out there I have no eye for design, and for me this was always a big hindrance in really understanding CSS. I could never relate what I was writing in the style sheet with the big picture.

Bootstrap

In comes Bootstrap, what a god-send! I finally felt like I could create some decent looking pages without worrying too much about what's going on under the hood. And I really relied on these predefined components, a lot. After this, I kind of stopped trying to improve my CSS skills and of course ran into issues when I wanted to customize my components.

I stole a lot from https://bootsnipp.com/ and convinced myself that being able to read the CSS and understand it meant I could probably do it myself next time. 🙄

All my apps started to look pretty much alike, so it was time for a change. Bulma looks cool let's learn that. And the cycle continued... I wasn't trying to solve the root of the problem, I just wanted to find a great new CSS framework that would make my design life easier.

TailwindCSS is popping up everywhere. I thought it looked cool and could be my next time saver, so I decided I'd try it out for for my next side project and spun up a new NUXT app, installed Tailwind and started learning.

Tailwind

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Below is the example snippet from their homepage showing the markup with a simple card with an image:

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

So I know there's a lot of people that find all of this styling in the HTML a turn off and say you may as well be using inline style, but this has really helped me learn and understand.

But writing all of these classes I feel like I've finally grasped flex and how to use it as well as a lot of other properties. And the inline responsive helpers really helped me see exactly what is changing and why, like this:

class="w-full md:w-1/2" means full-width on mobile, and half size on any viewport greater than 'medium'. This isn't really revolutionary but for me having it right there like that made all the difference in getting that little switch to flip in my brain.

BTW, you can still create custom components like that lovely .btn from Bootstrap by creating a btn class and using @apply:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

Thank you

This has been my first post, I hope it won't be my last but like CSS I'm not much of a writer 🙂. I'd love any feedback, if you've had a similar experience let me know, if you think I'm wrong -- let me know.