Skip to main content
Yates Design Boilerplate

The stack, explained simply

Every tool that powers this app — and what each one actually does, in plain language.

SvelteKit

Full-stack framework

The toolkit that turns a pile of pages into a real website. It decides what shows up at each web address and handles talking to the server.
Svelte 5

Runes & reactivity

How we build the things you see — buttons, cards, menus. When the data changes, the screen redraws itself automatically.
TypeScript

Typed JavaScript

JavaScript with a spell-checker. It catches mistakes — like using a value the wrong way — before anyone ever loads the page.
Vite

Build tool & dev server

The fast helper that stitches all our code together and shows changes on screen the instant we save them.
Tailwind CSS

Utility-first styling

A big box of ready-made styling stickers. Instead of writing styles from scratch, we add little labels to make things look right.
shadcn-svelte

UI components

A set of good-looking, pre-built pieces — buttons, dialogs, menus — that we drop in so we don't have to reinvent them.
Better Auth

Authentication

The bouncer at the door. It checks who you are, lets you log in (email or Google), and keeps the private pages private.
Drizzle ORM

Typed SQL & migrations

A translator between our code and the database. We ask for data in plain code and it writes the database language for us.
PostgreSQL

Relational database

The big filing cabinet where all the information lives — users, posts, everything — kept safe and organized.
Superforms

Form handling

The helper that makes web forms behave: it remembers what you typed, shows errors nicely, and sends it to the server safely.
Formsnap

Accessible form fields

Teams up with Superforms to make each form field tidy and easy to use with a keyboard or screen reader.
Zod

Schema validation

The rule-checker for data. It makes sure an email looks like an email and a required box isn't empty before we trust it.
Nodemailer

SMTP email

The mail carrier. When the app needs to send you an email — like a welcome note — this delivers it.
TanStack Table

Data tables

The brains behind big data tables — sorting, paging, and filtering rows without the mess.
LayerChart

Charts & visualization

The crayon box for charts. It draws the graphs and visualizations you see on the dashboard.
Bigger Picture

Image galleries

The photo viewer. Tap an image and it opens up big in a smooth, zoomable gallery.
Vitest

Unit & component tests

A little robot that quickly checks small pieces of our code still work every time we change something.
Playwright

End-to-end tests

A robot that clicks through the whole website like a real person to make sure nothing is broken.
TipTap

Rich-text editor

The word processor inside the post editor. Headings, links, images and text blocks — written like a doc, saved as clean content.
Sharp

Image processing

The darkroom. Every uploaded image gets resized and optimized on the server so pages stay fast and photos look right at any size.
S3 storage

Media file storage

The warehouse for uploaded files. Images and media live in S3-compatible cloud storage instead of on the web server itself.
Sentry

Error monitoring

The smoke detector. When something breaks for a real user, it records what went wrong so it can be fixed — opt-in, off by default.
Coming soon
Chatwoot

Live chat & support

A help desk for your site. Visitors chat with you in real time and every message lands in one shared inbox.
Coming soon
Listmonk

Email marketing

A newsletter machine. Build mailing lists and send campaigns to your subscribers — self-hosted and fast.