Published Sep 2, 2023

Moving from a custom CRUD dashboard to Filament

Categories: Laravel

Tags: #FilamentPHP , #CRUD , #Dashboards

Moving from my custom dashboard to Filament has been quite the ride.

First, let me say this website is my baby. It's pretty much the only side project I throw any spare time at, so this is where all the experimenting happens.

Everything was CRUDy before

I'd heard of panel builders before, but I wanted to avoid them. This project doesn't need much, especially nothing like an SPA or super-fancy dashboard. I also like learning concepts, not just vomiting out decent-looking stuff because it can be done fast.

With all that in mind, I decided to roll my own. I wanted to get down in the CRUD. And it was a good experience! Difficult at times with what I wanted to do, but good!

So...

Why Filament?

I'd actually heard about Filament a few times before. It looked pretty awesome, and I was already kinda interested in the stack.

Benefits

The most obvious benefit is, it's a dashboard toolbox—a very large toolbox at that. It just makes throwing together unified dashboard pages and model-based forms easier without having to write all the markup and CRUD yourself. There's some CRUD still, but not a ton for everything.

The next benefit for me was, it's built on Tailwind. I know Tailwind already, and I don't have to load in another CSS framework to tweak the appearance of the dashboard.

The last benefits for me involve it being built on Livewire. You can build pages with embedded custom Livewire components that even contain Filament forms and make the Filament form call Livewire component methods.

What about Statamic?

I'd heard good things about Statamic too. Statamic is a CMS out of the box, so it sounds like a nice idea and there are devs who love it.

I didn't go with it because it already has its own idea of content structure, and what I wanted was to build my own dashboard around my content and features, not the other way around.

Mistakes were made

Now, I had in my head that Filament looks so easy to use, I could easy replace my existing dashboard with it. No problem

So what did I do? Exactly that: start replacing the whole freakin' custom dashboard. And 80-something commits (plus lots of hair-pulling) later, it's done! 🥴

But why did it take so long?

New paradigms + challenges

As usual with drastic changes, there are a lot of underlying implications I was not prepared for.

With Filament, it was so easy to whip up pages matching normal RESTful choices in dealing with models. And for simple things, it just works out of the box—creating, editing, deleting etc.

I guess I let myself be decieved into thinking the...rest 😎...would be almost as easy right away—like relationships (including polymorphic many-to-many ones 😖), and file uploads to a custom media gallery. They ended up being alright to work with, but it took some time to get the hang of.

Lessons learned

If I could go back, the first thing I would do is: don't replace it all at once.

Something a colleague taught me is, keep PRs small if possible; they're easier to deal with. This dashboard replacement was the perfect candidate for applying this advice and I missed it.

The existing dashboard features worked well. I could've easily created the new Filament dashboard with 1 or 2 modules, then migrated the rest module-by-module. Having both dashboards around temporarily for this project wouldn't have been so bad.

Summary

  • Rushing bad
  • Don't fall in love with tools (as awesome as some are)
  • Builders are good, even if you like going down a level or 2
  • Keep learning, especially from your own mistakes

Thanks for reading! 🙂