SvelteKit Starter Template

This starter template is designed for developers looking to jumpstart their SvelteKit projects. It comes pre-configured with a suite of tools in aim to enforce best practices and ensure high-quality, maintainable code.

To speed up initial setup and not have deployment hassles, the unit and end-to-end (2e2) starter tests and GitHub action workflows have been removed from the main branch but retained in the with_tests branch for reference. This branch is not maintained and outdated.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Ensure you have pnpm installed on your system for efficient package management. For installation instructions, visit the official pnpm installation guide.

Installation

To install the dependencies, run the following command:

pnpm install

Development

To start the development server, run:

pnpm dev

This will start the server and open the app in a new browser tab, and navigate to: http://localhost:5173/. Changes in the code will automatically rebuild the app and refresh the page.

Build

To build the application for production, use:

pnpm build

Features

Language and Typing

• 📘 TypeScript: Static types for JavaScript.
• 🔧 TS Reset: Improved TypeScript type checking.

Styling and UI

• 🎨 PostCSS Preset Env: Facilitates the use of modern CSS features.
• 🧩 Shadcn-svelte: Accessible and customizable component library.
• 🌓 Theme Toggler: Supports for light and dark mode themes. Users can easily switch between the two modes.
• 💨 Tailwind CSS: Utility-first CSS framework for rapid UI development.
• 🤝 Tailwind Merge & clsx: Allows you to merge classes together.

Icons and Progress Indicators

• 🎨 Iconify: Extensive SVG icons.
• ⏳ Svelte Progress: Loading indicators components.

Feedback and Communication

• 📧 Nodemailer: Allows sending emails directly from the application, enabling feedback and contact features.

Analytics and SEO

• 📈**@vercel/analytics**: Analytics for Vercel projects.
• 🌐 svelte-meta-tags: This project uses svelte-meta-tags for managing SEO meta tags.

Components and Utilities

• 🔔 Toast Notifications: Toast notifications for user feedback and alerts.

Validation and Sanitization

• 📝 SvelteKit Superforms: A comprehensive solution for server and client validation, and client-side display of forms.
• 🛡️ Zod: TypeScript-first schema validation with static type inference.
• 🧼 DOMPurify: Sanitizes HTML and prevents XSS attacks.

Database and ORM

• 🌧️ Drizzle ORM: Headless TypeScript ORM

Code Quality and Testing

• 🗑️ Knip: Finds unused files, dependencies, and exports in projects.
• 🛠️ ESLint & ✨ Prettier: Code quality tools.
• 🧪 Testing: Unit tests with Vitest, E2E tests with Playwright.
• Component tests with Testing Library for Svelte.
• 📜 JSDOM: Simulates the DOM for testing.

Plugins

• @sveltejs/enhanced-img: Experimental image optimization.
• vite-plugin-kit-routes: Automatically updates route references in SvelteKit projects.

Additions to the default SvelteKit TSConfig

• noUnusedLocals: Avoids unused variable declarations.
• moduleDetection: Enhanced module detection.
• noUnusedParameters: Checks for unused function parameters.
• verbatimModuleSyntax: Preserves module syntax upon import.
• noUncheckedIndexedAccess: Enforces checks on indexed access.
• types: Includes Vitest's global type definitions.
• noImplicitReturns: Ensures all code paths in a function return a value.
• exactOptionalPropertyTypes: Treats optional property types as exact, not allowing undefined when not specified.
• noImplicitOverride: Requires method overrides to be explicitly marked with override.
• noPropertyAccessFromIndexSignature: Requires that properties accessed using an index signature are explicitly declared.

Checklist

When you use this template, try follow the checklist to update your info properly

• Update GitHub action workflows as necessary
• Update LICENSE as you see fit
• Change the favicon in static dir
• Add sitemap to static dir
• Update README.md
• Update project name in package.json
• Update site name in static/site.webmanifest
• Add your email information to .env under SECRET_GMAIL_PASS and SECRET_GMAIL_USERNAME for Nodemailer configuration

Contributing

I welcome contributions to this project! Here are some ways you can contribute:

• Issues: Feel free to open an issue if you find a bug or want to suggest a feature. Please provide as much context as possible.
• Pull Requests: If you're able to fix an issue or implement a feature, I'd love to see a pull request. Please ensure your code follows the existing style for this project.

License

This project is licensed under the MIT License. This means you are free to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software, under the conditions that you include the original copyright notice and disclaimers in any copies of the software or substantial portions of it. For more details, please see the LICENSE file.