Frontend Architecture

---

The App frontend architecture is server-first.

Pages are server-rendered Django templates styled using TailwindCSS.

Where necessary we use AlpineJS and HTMX to add interaction to the page and HTMX.

Django templates with AlpineJS and HTMX

• Using server-side rendered Django templates allows us to leverage a lot of Django's value i.e. views, templates, forms, sessions, and authentication.
• A lot can be achieved using HTMX, but the templates have to be well organized for the project to scale. See the Django templates

TailwindCSS

• TailwindCSS is a utility-first library that allows you to build beautiful interfaces quickly and effortlessly.
• One downside of TailwindCSS is that it does not abstract away the creation of components e.g. cards or dropdowns. Initially, this can take some getting used to if you are coming from UI Kit frameworks like Bootstrap or Bulma.
• The project includes basic core components that you can reuse, eg. form inputs, buttons, and checkboxes.
• There are also several open-source tailwind component libraries to get you started. See here for a full listing.

For most projects, this setup will be MORE THAN sufficient to build a solid product in record time. The Vanty Starter Kit can also serve other modern javascript frameworks e.g React/Svelte or flutter.

Adding a Client-side framework

The backend includes all exposes all the core endpoints via an API. You can easily plug in any modern client-side javascript framework. See the following pages for more info:

• Modern Javascript docs on how to add Modern Javascript framework components to your project.
• Headless API docs if you want to completely replace Django's templates with a SPA.