SvelteKit - Project Template++

Info

This template is an extended version of sveltekit-projecttemplate-hobby.

Tech Stack

Frontend & Testing

• JS-Framework: SvelteKit
• CSS-Utility-Class-Library: TailwindCSS
  • @tailwindcss/typography
  • @tailwindcss/aspect-ratio
  • @tailwindcss/container-queries
• Form-Validation: sveltekit-superforms & zod
• Icons: iconify
• UI-Components: shadcn-svelte
• Commits: commitizen/cz-conventional-changelog
• Testing:
  • Unit: Vitest
  • Browser: Playwright
• Code-Formatting: Prettier
• Code-Linting: Eslint

---

Backend & Database

• Authentication: Lucia
• Database (view supported): Planetscale.
  • ORM: Prisma

Supported Databases

Any database Prisma supports. For example MySQL, PostgreSQL or MongoDB.

• list of existing lucia auth database adapters (including prisma adapter)
• list of supported databases for prisma ORM

---

Other Included Packages

• Developer Experience
  • Styling: sass
• Performance:
  • HTML/CSS/JS Minifier: html-minifier
• Accessibility:
  • CSS: autoprefixer
  • Font: rtlcss
• Progressive Web App
  • icons/favicons: pwa-asset-generator
• CI/CD
  • Parallel NPM: pnpm-run-all
  • Git Hooks: husky
  • Commit Helper: commitizen

---

Assets

How-To-Write-SCSS: bem
Fonts (google fonts but privacy-friendly): api.fonts.coollabs.io

Development

Important Commands

# install dependencies
pnpm i

# run development sever
pnpm run all

# or start the server and open the app in a new browser tab
pnpm run all -- --open

# build project
pnpm run build

# preview build
pnpm run preview

# skip husky
<git-command> --no-verify

Contributing

Install commitizen

pnpm add -g commitizen

Usage

Use pnpm run commit or npx cz instead of git commit -m "..."
Use pnpm run prepare before committing the first time.