Project Structure

SveltePak operates as a comprehensive monorepo, encompassing a diverse array of applications and packages tailored for seamless integration into your SaaS platforms.

This architectural choice not only facilitates the streamlined addition of new functionalities and features as your project evolves but also simplifies dependency management and fosters a cohesive development environment.

Structure

The SveltePak monorepo is organized into the following directories:

sveltepak/
  src/
    auth/
    db/
    lib/
      actions/
      components/
      stores/
    modules/
      ai/
      analytics/
      billing/
      blog/
      charts/
      i18n/
      mail/
      notifications/
      storage/
    routes/
    trpc/
  app.css
  app.d.ts
  app.html
  hooks.server.ts
  index.test.ts
static/
tests/
.env
.gitignore
.prettierrc
components.json
package.json
playwright.config.ts
postcss.config.js
svite.config.js
tsconfig.json
tailwind.config.js
vite.config.js

A word on the components

The lib/components directory contains all the reusable components that are shared across the various applications and packages within the monorepo. An example of this would be a Button component that is used in multiple routes or the Header component that is used in multiple layouts.

On the other side, inside the routes directory, you will find a routes/(app)/dashboard/(components) directory that contains the components specific to that route. An example of this would be the ChartRevenue component that is only used in the dashboard route.

This separation of components allows for a clear distinction between shared and route-specific components, thereby enhancing the maintainability and scalability of the codebase.