Kyle Anderson

This is Part 1 of a multi-part series where I cover how I built and host this site. In this part, I'll cover the tech stack and additional tools I'm using to build and maintain the site.

For the site's technology stack, I've chosen to use the TALL stack. If you aren't familiar, the TALL stack is comprised of the following:

In this stack, Laravel is the underlying web framework - that is doing most of the heavy-lifting on the backend. Out of the box, Laravel provides lots of full-stack functionality. With the Laravel Starter-Kits, you can have a fully-working web application up and running in just a few minutes.

mind blown

Laravel is a great framework choice for building full-fledged web applications. It has top-notch documentation, a robust set of first-party packages, and a great community of developers who have developed and maintain some great third-party software.

Most developers are familiar with Tailwind. It's a widely-used utility-first CSS framework that allows you to define your styles directly in your HTML. Although there are mixed opinions on this approach, as a developer who has used Tailwind in many projects over several years, I can say confidently that it provides a great solution to the age-old problem of organizing front-end styles, especially when building your frontend in a component-based manner.

And then there's Livewire and Alpine. While I could describe these two separately, they are so commonly used in tandem, that it makes sense to describe them together. They are both built and maintained by the same developer (shoutout Caleb Porzio). And they are so tightly-coupled that, when installing Livewire v3 into your project, Alpine is included automatically. I like to think of Livewire as a "Full-Stack Frontend" framework. I realize that's a bit of an oxymoron, but allow me to explain. Livewire provides an easy way to build frontend components, with robust backend functionality, without leaving PHP and HTML/Blade. So, for example, to build a simple Counter component, your backend component could looks something like:

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public $count = 1;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function decrement()
    {
        $this->count--;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

And your view could be as simple as:

<div>
    <h1>{{ $count }}</h1>
 
    <button wire:click="increment"> + </button>
 
    <button wire:click="decrement"> - </button>
</div>

The important part the above is the wire:click directive on the buttons. That tells the frontend code which method to run when the button is clicked. It's the simplest way I've found to write frontend and backend code that are able to communicate with each other fluently.

However, there are times when the frontend doesn't need to communicate with the backend. For example, maybe you're building a simple accordion. That can be accomplished with just HTML and JS (really, it could be accomplished with HTML only, but JS can make it more visually appealing). This is where AlpineJS really shines. AlpineJS provides a simple means to include sprinkles of Javascript within your HTML. Following along with the accordion example:

<div x-data="{ open: false }">
    <button @click="open = !open">
        <span>Accordion Item 1</span>
    </button>
    <div x-show="open">
        <p>lorem ipsum</p>
    </div>
</div>
<div x-data="{ open: false }">
    <button @click="open = !open">
        <span>Accordion Item 2</span>
    </button>
    <div x-show="open">
        <p>lorem ipsum</p>
    </div>
</div>

I've removed some bits from the above example to keep it short and simple. The important parts are the x-data="{ open: false }" on the containing divs and the @click="open = !open on the button elements. With just those two bits, we're able to define and mutate some basic frontend state.

As a fun side-project, I'm working on building out a library of UI components designed specifically for use in the TALL stack - you can check out my project page for it on this site at https://kylekanderson.com/projects/tallui or visit the actual site itself at https://tallui.com.

So, those are the tools that I've used to build this site. However, with this site, as with many sites, there's a need to manage the site's content in an easy way. For this, I commonly turn to Filament. Filament is an excellent admin panel option for Laravel applications, built on the TALL Stack. It provides beautiful out-of-the-box components that can be used both in your admin panel(s) or on the frontend of your site. It also provides the ability for developers to customize every aspect of the admin panel, and has a wide variety of first- and third-party plugins.

In the next part of this series, I plan on writing about how the site is version-controlled, built, and hosted.

How I Built This Site