What is this?

• A SvelteKit template for SaaS projects

• Tech stack: SvelteKit, TailwindCSS, Supabase, Vercel, DaisyUI, Stripe

• Home page is statically generated

• Login page can be statically generated

• After login, all Dashboard pages should use TRPC or api routes to fetch data

create-svelte

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

HELP

• Generate supabase types

  • npx supabase gen types typescript --project-id [DB_PASSWORD] --schema public > types/supabase.ts

• Change content in static/robots.txt

• Generate sitemap

  • npx svelte-add sitemap

• Update icons

• Update SEO component

Images

• Resize and convert images to webp using Squoosh

Icons

• Get the icons from:
  • Heroicons
  • Lucide
  • Icons8

SEO

• Primary keywords should appear in title tag, meta description and heading tags to help Search Engines to properly identify the topic of this webpage.

• Add Structured Data:

  • Article
  • Breadcrumb
  • FAQ
  • SiteLinks Search Box
  • How-to
  • Product

• Check social sharing via OG tags

• Check and Optimise SEO

Launch

• Publish to Indie Hackers
• Publish to Product Hunt
• Publish to Reddit
• Publish to Webwiki