Sveltekit Startup Plus

This project is a starter kit for SvelteKit designed to help developers quickly build modern, scalable, and maintainable websites.
It comes with a ready-to-use structure, built-in localization (localized URLs), a flexible theming system, and an example project structure that follows best practices.

A notable feature is its modular validation system. Each validator (e.g., max-length, min-number, no-space) is implemented separately in TypeScript, allowing you to easily extend, reuse, or combine validation rules based on your project's needs. This makes the starter kit highly flexible and developer-friendly.

The goal of this starter kit is to save you time and effort by providing a solid foundation where you can immediately start coding your website, without worrying about repetitive setup tasks. Whether you are building a personal project, a blog, or a production-ready application, this boilerplate gives you the essentials out of the box.

Key Features

• 🌍 Localization support with localized URLs for multilingual websites.
• 🎨 Theme management system to easily switch or extend design themes.
• 📂 Clean and organized file structure that follows best practices.
• ⚡ SvelteKit powered – fast, modern, and highly flexible.
• ✅ Modular validation system – extendable, reusable, and easy to integrate in your forms.
• 🛠 Ready to extend – add your own routes, components, or APIs with minimal effort.

With this project, developers can focus more on building features and less on configuration. It's a perfect starting point for anyone who wants to kickstart their journey with SvelteKit and create professional-grade websites.

Usage

Follow these steps to get started with the project:

1. Install Dependencies

Before running the project, install all necessary dependencies:

npm install
# or shorthand
npm i

This command will download and install all the packages listed in package.json.

2. Run the Development Server

Start the project locally and see your changes in real-time:

npm run dev

After running this command, open your browser at:

http://localhost:5173

3. Build for Production

When your project is ready to be deployed, build an optimized version with:

npm run build

This will create a build folder containing all the necessary files for production.

4. Build for Production

Preview the Production Build

npm run preview

This allows you to verify that your project works as expected in a production-like environment.

Systems Overview

This section provides a step-by-step guide on how to use the main systems of the project, along with examples for each.

Validator System

Purpose: Ensures data integrity and validates input according to predefined rules.

Usage Example:

import { MaxLengthValidation, MinLengthValidation, NoSpaceValidation, Validator } from "$utils/validator";

const validation = new Validator([
    new MaxLengthValidation("value", 16, "returned error message from maxlength"),
    new MinLengthValidation("value", 8, "returned error message minlength"),
    new NoSpaceValidation("v a l u e", "returned error message from no-space"),
    // btc...
]);

const result = validation.validate();

or using solo:

import { MaxLengthValidation } from "$utils/validator";

const validationMaxLength = new MaxLengthValidation("value", 16, "returned error message from maxlength");
const resultValidationMaxLength = validationMaxLength.isValidate;

Using Localize URL System

Follow these steps to properly create and configure a localized page using the Localize URL system:

1. Create the Localized Route

Inside the routes folder, open the [[lang=lang]] directory.
Create a new folder for your page using square brackets and an equals sign.

Example: [login=login]

Inside this folder, create a +page.svelte file for your page content.

2. Create the Params File

In the same directory as your routes folder, open the params folder.
Create a TypeScript file named after the page you just created.

Example: params/login.ts

Inside this file, add the following code:

import { localizePageList } from "$configs/localize-page/localize-page-list.config";
import localizePageManager from "$managers/localize-page.manager";
import type { ParamMatcher } from "@sveltejs/kit";

export const match: ParamMatcher = (param) => localizePageManager.matchParam(param, localizePageList["login"]);

This connects your page to the LocalizePageManager and allows it to match URL parameters dynamically.

3. Configure the Page in Localize Page List

Open the configuration file: $config/localize-page/localize-page-list.config.ts

Add a new entry for your page. The value of the object should be the name of the page you just created.

{
  // ...other page settings
  login: new LocalizePage({ localizePaths: { en: "login", tr: "giris-yap" } })
}

This defines the localized paths for your page in different languages.

✅ Your localized page is now set up and ready to use. The Localize URL system will automatically handle dynamic routing and language-specific URLs.

Example Usage and URL Behavior

Assume the base language of the site is tr. Here is how the Localize URL system handles different URLs:

• ../giris-yap → Accepted, URL remains the same.
• ../login → Accepted, URL is automatically updated to /giris-yap.
• ../en/login → Accepted, URL remains the same.
• ../en/giris-yap → Accepted, URL is automatically updated to /en/login.

Additionally, when a user visits the site for the first time:

• If the user’s language is different from the site’s default language, they are automatically redirected to the corresponding localized home page.
• Example: If the default language is tr and a user with en language preference visits example.com, they will be redirected automatically to example.com/en.

Theme System

The project includes a flexible Theme System that allows you to manage styles dynamically across your SvelteKit project.

1. Default Theme

The default theme is defined in the configuration file: $config > theme.config.ts

Inside, you’ll find an object called staticTheme. This object contains all default style variables.

• You can access these variables in your HTML elements using CSS custom properties:

// Example staticTheme
{
  // ...other styles
  "card-background-color": "#ff00ff"
}

and can you use:

<div class="card" style="background-color: var(--card-background-color);">
  Card
</div>

Here, var(--card-background-color) will use the value #ff00ff defined in the staticTheme object.

2. Creating a New Theme

import { Theme } from "$themes/theme.model";

const theme = new Theme();

3. Activating a Theme

To apply the new theme and clear previous variables:

theme.loadAndClearVaribles();

This can be done in layout files (e.g., +layout.svelte) to apply the theme globally.

4. Advanced Usage

• You can load theme variables dynamically from a database.
• You can define multiple themes and switch between them using the Theme class.
• This allows full flexibility for multi-theme support and runtime theme changes.

Finish

You have now completed the setup and configuration guide for this project.

All core systems, including Validator, Localize URL, User Management, Configurations, and Theme System, are ready to use.

You can now:

• Start developing new pages and components.
• Customize themes and configurations.
• Extend the project with your own features.

Thank you for using this project! Contributions, feedback, and suggestions are always welcome.