Frontend overview
Introduction
Publica.la offers a multi-domain frontend built with the TALL stack (Tailwind CSS, Alpine.js, Laravel, Livewire) plus legacy Vue 2/Bootstrap code that is being migrated. This document gives developers a high-level map of the entire frontend so they can quickly locate the right technology, guideline or component before diving deeper.
This overview links directly to rule files such as frontend-guidelines.mdc and to the detailed guides within this folder.
Scope
- Describe which technologies live in each product area (Storefront, Reader, Dashboard).
- List global conventions developers must follow.
- Point to deeper documentation for Tailwind, Blade components, Livewire grid, icons and Alpine.js.
Product areas & technology stack
| Area | Primary Framework(s) | Styling | JavaScript layer | Notes |
|---|---|---|---|---|
| Storefront | Livewire v2 | Tailwind 3 (prefix tw-) | Alpine v2 | Migrating from Bootstrap 4; mobile-first |
| Reader | Vue 2 | Tailwind 3 | — | Uses SVG icon pack in volpe/_shared_/images/icons |
| Dashboard | Vue 2 + Livewire (select pages) | Tailwind 3 | Alpine v2 | Desktop-optimised |
| Emails | Blade Mailable | Tailwind Mail (custom) | — | Build with yarn tailwind-mail |
Tip: when you spot legacy
<div class="row">or<i class="ion-…">, check the migration checklist before opening a MR.
Global conventions (quick reference)
- Prefix Tailwind classes with
tw-until Bootstrap is fully removed. - Use semantic HTML and follow the accessibility rules.
- Prefer Blade components (
<x-component.*>) over raw HTML snippets. - Use
x-on:instead of@clickinside#Appto avoid Vue conflicts. - Do not write complex logic in Blade; move it to component classes or Livewire properties.
Quick links
- Responsive design
- Tailwind CSS setup
- Blade components
- Livewire grid & embeddables
- Iconography
- Alpine.js guidelines
- Storefront service architecture
- Add new localization guide
- Storefront component index
- Frontend FAQ
Last updated: 2025-07-14