criticalmoments / cmsaasstarter Goto Github PK

A modern SaaS template/boilerplate built with SvelteKit, Tailwind, and Supabase. Includes marketing page, blog, subscriptions, auth, user dashboard, user settings, pricing page, and more.

Home Page: https://saasstarter.work

License: MIT License

JavaScript 2.02% HTML 0.27% Svelte 70.89% CSS 0.24% PLpgSQL 1.58% TypeScript 24.99%

cloudflare saas saas-boilerplate saas-tools supabase svelte sveltekit daisyui tailwind tailwind-css

cmsaasstarter's Introduction

Homepage • Documentation • Issues

Critical Moments

The Mobile Growth SDK.

Our SDK lets you target the right users at the right moment to increase conversion, improve app ratings, and make bugs disappear.

Quick Start 🚀

Read our Quick-Start guide to get up and running in minutes

Homepage 🏠

For information about Critical Moments, pricing, and account login, check out the homepage.

Documentation 👩‍💻

For details on how to use Critical Moments, check out our documentation.

Copyright

cmsaasstarter's People

Contributors

Stargazers

Watchers

Forkers

ghassen-ben-hadid repos-dev owlyone michaelcolenso menduz pywebdesign stetsonwood md-seb jawadqur crypto-genik tootallgavin bbr27 send2cloud moodmnky-llc averrows jeffjose shawncrawford tuangeek elog08 tonedeaf02 wisdom1456 gqadonis timozuerner ravinandan emilianocalzada owenversteeg graileanu danielktaylor maxeuler elucubro cyrusbond seanish techydad05 jpims dskelton-cos owodunni johnmccants002 rubybear christophosaurus mvandermeulen hoge-rileous gonzalde crowdspeak mdrzn wilsonk-src icelandicicecream regi-gouale dnszero sirbots akiarostami azakiio deagil tradestream mrfixitalec dhamaniasad japangor mfaizanzahid estevanramos riviergrullon anndream dg19 imagineer99 rkunnamp micah-roberson amineacher nomideusz klevente indrasaputraidrus cambelau mgenovski scraggelz icosahedron megane999 amazzonna lucho-git thinkdomake klayza dataetc davidevincenzi johanhartono emtona7 tokenchains anandvc thedailyaus nishaanvig kcverde all-mute exiao nandrzej foxtimo lindan-studio harrysra786 aissarmurad felixuhmann biscarrosse timscodebase daniel-hyunho-shin charlbest renkeven jujubalandia

cmsaasstarter's Issues

Upgrade to daisyUI 4

daisyUI is currently at version 4.7.3.

They have an upgrade guide for 3 to 4.

Would you accept a PR to upgrade to daisyUI v4.x?

Stripe webhook missing?

I can't seem to understand how stripe updates the database when there are billing errors. Can you please help me understand.?

Consider addding basic CRUD functionality

First off congrats for this amazing starter kit. ! Basic CRUD funcionality (maybe a simple todo / notes list), would help less experienced devs and would demostrate the right practices for db operations, loading states and even validation. File uploads would also be a great addition.
Again, I for one am grateful for your contribution to the wonderful sveltekit community.

Idea: releases, changesets and upgrade paths

So let's say Bob uses the starter and makes a site and then a month later Alice fixes a bug, or adds a feature, or some other change happens here in this repo. At that point, Bob probably has heavily modified the starter and he can abandon all hope of a clean Git add upstream/fetch/merge, he's probably going to have to manually pick stuff over by hand.

Of course some (many) of those things may not be things Bob wants or needs, so my thought is that it's probably best to have changes broken out individually. Commit-level is too granular and a pain, release-level is too broad, so I propose that each PR adds a simple one-line-of-text changeset that starts with (feature/bugfix/SECURITY/template) and a Github compare link with hashes in URL. Major project restructuring or extreme changes should be a new major release. As part of this, it'd be important that PRs with an important feature or bugfix come in one piece. Five (or ten, or thirty) commits in one PR is fine, but as soon as there are multiple PRs to fix one bug then things get a bit out of hand. This is good practice for other reasons though, so shouldn't be an issue.

I imagine most changes will be template, aka not important to merge for people that use the starter. Here's how I'd see this going:

(Date merged into main) (Type) (Change text) (Compare link)
March 15 2024 - Template - change wording on blog - [changes](https://github.com/CriticalMoments/CMSaasStarter/compare/ffd1a1d...5e831e1)
March 12 2024 - Template - modify homepage colors - [changes]
March 9 2024 - SECURITY - prevent API key leakage - [changes]
March 8 2024 - Template - increase footer padding - [changes]
March 4 2024 - Bugfix - prevent menu collapse on iOS 14 - [changes]

Probably the easiest is just a CHANGES.md that people manually update on each PR? There's this - https://github.com/apps/changeset-bot - but that's more complex and for monorepos.

Thoughts? This is probably the easiest way to let people "get" security and/or feature updates while not making things too complex.

General improvements. Thoughts...

I'm planning on using this starter for one of my projects and there are some things I want to add. Curious to hear if I should encapsulate some of them, that you would be interested in and make a PR(s). Before I do unnecessary work that you don't think fits into this project, here is a rough list I was thinking about.

Daisy UI:

Cookies prompt (toast comp + alert comp + local storage to remember dismissal) eg.
- 🍪 By using this website, you accept our Cookies Policy.
Dark mode (local storage or save theme against logged in user + html attribute for daisyui <html data-theme="dark")

Supabase:

Image uploader (basic type input field. free supabase is only 1GB so upload limit should be extremely small and maybe postgres cron job to clear storage once a week)
Leaked Password Protection (recently released and provides error response that can show custom UI)
Full text search (postgress tsvector extension)
Two factor auth (mfa implementation + account linking)

JS/HTML:

Native share actions (Web share api navigator.share())
Content Security Policy (meta tag + local/prod <meta http-equiv="Content-Security-Policy")

Additional:

Push Notifications (web-push)
PWA (vite-plugin-pwa + add to home screen)
Sentry (@sentry/sveltekit)
i18n (typesafe-i18n)

Feature: Be able to create tables and custom forms

Be able to create tables and custom forms

Demo analytics code

We could/should have a quick example of how to add analytics. We don't need to pick a provider, let's leave that to the user. But for a SvelteKit noob, we can tell them where to put it.

Tasks:

Add comment where the analytics JS code should be injected. Probably app.html? Can be as simple as
Add a step in README guide for replacing that comment with the tracker of your choice, with links to GA, PostHog, Plausible docs for getting your code/ID.

'relation "public.stripe_customers" does not exist'

Hi there! I'm failing to set up billing pages. After the initial set up of stripe and supabase, I am not able to open the billing page and apply for subscription page. When I add further error debug statements, I came to this error: relation "public.stripe_customers" does not exist. Does anybody know a solution or what I might be doing wrong?
I am using test environment in Stripe for the moment if that matters.
Thank you!

Clicking Sign Up sends multiple emails

Clicking the sign up button will send multiple requests/emails. This is probably the case for "forgot password" as well.

Possible solutions:

disable the button after you click it with a 1 minute re-activation
indefinitely disable button (until refresh)
button is still clickable but in the background, debounce and don't send another request within x seconds

Some production things

Thank you for the lovely template. Currently using it for a (currently) closed-source app, but wanted to share some things we ran into while adjusting this for our production use-case.

Resetting the password broke at some point as the amr token didn't seem to be set.
Supabase auth has some updates that spam warnings when using the getsession method on the server side like here. Should be fixed in a new version now.
Discounts. Applying discounts is a common thing but not trivial with the current pricing scheme system (as far as we could see)
Company name and website name should be optional when creating an account
We switched most forms to using superforms to make validation a bit clearer on the DX side (particularly for optional elements)

Happy to expand on things if requested. We're still in the process of smoothing out some bugs so maybe I'll add some more later.

User Emailer & Welcome Email

We should add a method to email a user.

Nice simple API that takes a user, subject, plaintext body, html body, and sends it
Some simple way of doing templating. Ideally just plain old svelte Component.render? Open to ideas here.
Use Resend API like admin_mailer
Demo use case of of a welcome email: show all the above working together in nice clean example.

Managing Subscription Throws a PSE Error

When logged in and clicking on "Manage Subscription" the user gets thrown an error page instead of going to the Stripe page.

Console log shows:

Preloading data for /account/billing/manage failed with the following error: Unknown error (PSE). If issue persists, please contact us. If this error is transient, you can ignore it. Otherwise, consider disabling preloading for this route. This route was preloaded due to a data-sveltekit-preload-data attribute. See https://kit.svelte.dev/docs/link-options for more info

and

GET http://localhost:5173/account/billing/manage 500 (Internal Server Error)

Screenshot:

SvelteKit 2 Upgrade

We should probably do these at the same time. We can keep in a branch until Svelte 5 is released, but some folks will want to start on that branch.

Open to help from any Svelte enthusiasts who want to tackle this.

"Built With SaaS Starter" section

We should list a bunch of example sites using the template in Github README.

Drop the public URLs of projects you'd like listed below. When we have enough to make it a list (and not just 1 😆) we'll add them. 280 forks, I'm assuming some of those have made it to prod.

Internal error viewing home and pricing page

Thanks for your work on this great project.

I've cloned the repo and configured it as per the README. I can create a user account and can see pages at:

http://localhost:5173/blog
http://localhost:5173/contact_us
http://localhost:5173/login
and
http://localhost:5173/account

^ all work correctly

However when I navigate to the home or pricing pages (http://localhost:5173/ or http://localhost:5173/pricing) I get:

"This is embarassing...
There was an error: Internal Error"

In the console I see:

The next HMR update will cause the page to reload
<Root> was created without expected prop 'form'

I haven't made any other changes. Tested with node 18.6.0 and 20.11.1

Any thoughts on what's causing this?

Issue with Profile Creation: Cross-site POST Form Submission Error

Hello,

Firstly, I'd like to thank you for making this project available to the community; it's greatly appreciated.

I've been eager to try it out, but I've encountered an issue during the profile creation phase. After successfully logging in, attempting to create my profile results in the following error:

"message": "Cross-site POST form submissions are forbidden"

Additionally, I observed this response from the server:

Failed to load resource: the server responded with a status of 403 () https://my-url.com/account/api?/updateProfile

I'm wondering if this might be related to a missing or incorrect environment variable configuration, particularly regarding the URL setup. Could you provide some guidance on this issue? If there's any additional information or logs that would be helpful, please let me know, and I'll provide them as soon as possible.

Thanks in advance for your time and assistance!

Best regards,

Svelte 5 Upgrade

We should upgrade to Svelte 5 when it's released and stable.

https://svelte-5-preview.vercel.app/status

Unsubscribe support for email

I added email. I didn't add unsubscribe since there's only 1 email so far, not a long running mailing list. However, others will probably add so this would be good to have.

Add a bool unsubscribed property to the profile table
Update sendUserEmail function to check unsubscribed property, and not send if unsubscribed
In the email section of settings add an "Unsubscribe" button (which changes to "Re-Subscribe" when unsubscribed), which is functional, and sets DB property.
Add unsubscribe link to /account/settings?unsubscribe to email templates

Change Password Bug

When signing up in the demo with an email the change password feature does not seem to work. Based on the feedback given by the site it wrongly identified my account as an OAuth account and thus didn't allow changing the password. Using the forgot password feature did work.

Move site name into code

Several folks have gotten tripped up on the env var approach. Will move into code with a default that’s easy to change instead.

Move to template

We're getting PRs from private forks.

We should make this a template repo: https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository

Idea: Add CMSaasStarter to Vercel templates

In order to facilitate the installation & deployment process, adding this project as a template on Vercel would be great.
https://vercel.com/templates

You can take ideas from this video.
https://www.youtube.com/watch?v=I7CFD99sp1g

New Feature: Admin Emailer

Adding this as a new feature I think we need if anyone wants to take a run at a PR.

Basically: a way for a site owner to get an email when important things happen (contact us form, sign up, purchase). I added this in my private fork and it's super helpful. However, not happy with my library choice, so I'd want a cleaner version here.

Part 1: Mailer

A typescript file that can send emails to the website owner. Basically expose sendAdminsEmail(subject, html_body). No opt if the user hasn't set up correct env configs.

Env config with SMTP creds
Env config with "from/to" email addresses
Probably should use: https://nodemailer.com

I built this into my own fork, but made the mistake of using AWS SES APIs which are overly complex and host specific. SMTP crews and node mailer are way more flexible.

Part 2: Integrate into key places in the app

Add integrations into places where the site admin might want to be notified:

Contact us
Sign up
Create profile
Purchases
Delete account

Also add env var for admin_emails. Defaults to all, but you can override it in env to only get a subset of these.

Part 3: Docs

Document the env vars and integration above in the README

How about shadcn/ui?

Your choices almost match everything I researched except DaisyUI. And https://www.shadcn-svelte.com/ looks very cool. So why not?

Error: Cannot use cookies.set(...) after the response has been generated

Getting this error. Not every time I run npm run dev at random times but enough times to report issue.

/pathtoproject/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

Error: Cannot use `cookies.set(...)` after the response has been generated
    at event.cookies.set (/pathtoproject/node_modules/@sveltejs/kit/src/runtime/server/respond.js:553:11)
    at SvelteKitServerAuthStorageAdapter.setCookie (file:///pathtoproject/node_modules/@supabase/auth-helpers-sveltekit/dist/index.js:80:24)
    at /pathtoproject/node_modules/@supabase/auth-helpers-shared/dist/index.js:323:12
    at Array.forEach (<anonymous>)
    at SvelteKitServerAuthStorageAdapter.setItem (/pathtoproject/node_modules/@supabase/auth-helpers-shared/dist/index.js:322:19)
    at setItemAsync (/pathtoproject/node_modules/@supabase/gotrue-js/dist/main/lib/helpers.js:129:19)
    at SupabaseAuthClient._saveSession (/pathtoproject/node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:1465:42)
    at SupabaseAuthClient._callRefreshToken (/pathtoproject/node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:1406:24)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async SupabaseAuthClient.__loadSession (/pathtoproject/node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:785:40)

Node.js v20.12.2```

500 The "/" and "/(marketing)" route conflict with each other

Struggling with running the fresh pull starter after following the quick start tutorial on replit.

adding a +page.svelte to / (routes) folder does not resolve issue.

500
The "/" and "/(marketing)" route

Make Login/Signup/Forgot-Password Pages "Sveltey"

The login pages use @supabase/auth-ui-svelte but despite the name, these are wrappers of a general javascript framework, that doesn't produce Svelte. They can't be pre-rendered, are a bit slower to load, and show a visual stutter when applying style. I also don't love the error message handling (shown below, not inline), and the "in progress" indicator (too subtle, and can be below the viewport on mobile).

We can re-implement these in pure svelte for pre-render/consistency/speed, and fix the UX issues mentioned above.

P2: everything is functional and works fine as is.

Open for community input on this one.

Improve SEO with JSON-LD

Google likes JSON-LD data. We should make this automatic for the template.

Site name from src/config.ts:WebsiteName as https://developers.google.com/search/docs/appearance/site-names
Blog posts as https://developers.google.com/search/docs/appearance/structured-data/article

Socail template?

It seems you're targeting eCommerce site, how about social.

"New" Supabase auth ssr package

Amazing project! Exactly what I was looking for.

Curious what are your thoughts on the @supabase/ssr package rather than using auth-helpers?
It seems going forward that it is the package that will get the updates and be maintained. That said, I'm not sure if there are differences now so wouldn't have an influence at this stage, right?

Saw a YouTuber do the migration, if you are interested.

Problem with Stripe integrations for one-off payments

Using a stripe_price_id set to a one-off payment will return unknown SSE error.

"Unknown Error (SSE): If issue persists please contact us.",