
aMaDrOfSvelte
SvelteKit / Prisma / PlanetScale / Lucia / Tailwind / Flowbite
Description
My decisive full-stack SvelteKit template featuring: Prisma, Planetscale (MySQL), Lucia auth w/ GitHub oAuth, & Tailwind w/ Flowbite components
NOTE: Demo was built using PlanetScale's free tier, which is no
longer available. Demo no longer works, but you can still set it up yourself with your
PlanetScale account.
I'm working on a new version that will use Svelte 5, SvelteKit 2, Drizzle (instead of Prisma),
and Turso or Vercel Postgres as the free database solution.
Overview
This is my go-to stack for building apps and websites at the moment. I'm using a PlanetScale (MySQL) database for the flexibility of SQL, with the nearly infinite free tier offered by PlanetScale. I'm using Prisma to manage data relationships, so I can make use of Prisma Studio directly from my editor, and so I can write shorter queries.
Since SvelteKit has been pushing us towards using forms for interacting with APIs, I'm using Lucia Auth (which uses enhanced forms) with GitHub oAuth for authentication. This can make things a little tricky, because it means sticking forms into unusual places, such as the navbar for the "Sign out" button. It also makes it more difficult to use notification/toast libraries because you have to toast after a redirect.
All routes are protected except for the "Components?" route; you must sign up and sign in to view them. You can sign up using any random username you'd like, there's no email or email verification.
I added and configured Tailwind and Flowbite (which is based on Tailwind) so users will have some components to play around with. I generally use Tailwind by itself, but this is better for demonstration.
Both the "Projects" route and "Blog" route are querying PlanetScale for data, returning JSON containing title, image, and description data, and Svelte is looping over the data and rendering it into card components.
I added a service-worker and web-manifest, turning the app into a Progressive Web App. Users in most Chromium browsers will be prompted to install the site as a PWA.
Out of commission now that PlanetScale removed their free tier. I'm working on a updated version. You can still check out the GitHub for reference.