SPAGHUTTi Svelte Themes

Spaghutti

The goal of this scaffolding is to quickly start a production-ready codebase using SvelteKit, Hasura, Auth.js, Postgres, TypeScript, GraphQL and more.

SPAGHUTTi

SPAGHUTTi stands for SvelteKit, Postgres, Auth.js, GraphQL, Hasura, URQL, TypeScript, Tailwind. The goal of this scaffolding is to quickly start a production-ready codebase.

DEMO


Technology Stack 🔥

  • Svelte/Kit (V1 with proper flow & structure)
  • Hasura (GraphQL & REST)
  • Postgres (through Neon free tier)
  • Auth.js (Next Authentication)
  • URQL (GraphQL client both for frontend and Svelte server)
  • Tailwind (already with Mobile menu)
  • TypeScript
  • Prettier
  • ESLint
  • Vercel
  • Email API (SendGrid or MailJet not_yet_implemented)
  • Vitest (not_yet_implemented)
  • Stripe (not_yet_implemented, svelte-stripe package)

Getting Started (Reminder) 👀

  • Create your own Hasura account and then create a Postgres DB through Neon. You can do that all inside Hasura.
  • Create a "user" schema in Hasura and set "email" to unique. Please check /src/routes/api/post/mutate/user/+server.ts file to check the shape of data that are being sent.
  • Check Auth.js documentation if you want to have an overview of Svelte implementation. But all you have to do is put your Provider ID and Secret Key in the .env file.
    • You can also go directly here if you want to follow the guide for adding Google provider.
    • You can also go directly here if you want to follow the guide for adding Facebook provider.
    • You can also go directly here if you want to follow the guide for adding GitHub provider.
  • Rename sample.env to .env and fill with your Auth providers data and Hasura key and more

Note 🧬

  • Demo link has no real provider ID/Keys yet (but already tested it with real ones, locally), so please get your own ID and Secret Keys for the Auth providers you choose
  • If deployed add the environment variables from your .env file in to your server platform

TODOs 🕵🏼‍♀️

  • Implement the remaining stacks
  • Choose between SendGrid or MailJet then implement using the free tier. This will allow us to send free email confirmations, resets, etc.
  • Prepare (implement) Stripe just in case using svelte-stripe.
  • Add option (implement) for media storage (uploads) where they can choose between DigitalOcean Space or S3.
  • Add some starter tests using Vitest.

Top categories

Loading Svelte Themes