clean up readme because apparently people are watching the repo now
This commit is contained in:
12
.env_example
12
.env_example
@@ -1,2 +1,14 @@
|
|||||||
SUPABASE_URL=https://xxxxxxxxxxxxxxxxxxxx.supabase.co
|
SUPABASE_URL=https://xxxxxxxxxxxxxxxxxxxx.supabase.co
|
||||||
SUPABASE_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxx.xxxxxx-xxxxx
|
SUPABASE_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxx.xxxxxx-xxxxx
|
||||||
|
|
||||||
|
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||||
|
STRIPE_ENDPOINT_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||||
|
|
||||||
|
# This was inserted by `prisma init`:
|
||||||
|
# Environment variables declared in this file are automatically made available to Prisma.
|
||||||
|
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
|
||||||
|
|
||||||
|
# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
|
||||||
|
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
|
||||||
|
|
||||||
|
DATABASE_URL="postgresql://postgres:xxxxxxxxxxxxx@db.xxxxxxxxxxxxx.supabase.co:5432/postgres"
|
||||||
35
README.md
35
README.md
@@ -1,6 +1,18 @@
|
|||||||
# Nuxt 3 Minimal Starter + Supabase + OAuth + Prisma + TRPC
|
# Nuxt 3 (SAAS) Boilerplate
|
||||||
|
|
||||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
## Not Production Ready
|
||||||
|
Please don't hitch your wagon to this star just yet... I'm coding this in the open and the TODO list is verrrrrry long.
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
- Nuxt 3 (I like it, shut up)
|
||||||
|
- Supabase (Auth including OAuth + Postgresql instance)
|
||||||
|
- Prisma (Schema management + Strongly typed client)
|
||||||
|
- TRPC (Server/Client communication with Strong types)
|
||||||
|
- Pinia (State Store. I liked vuex a lot, in particular explicit mutations but gotta go with the cool crowd)
|
||||||
|
- Stripe (Payments including Webhook integration)
|
||||||
|
|
||||||
|
## Special Mention
|
||||||
|
This https://blog.checklyhq.com/building-a-multi-tenant-saas-data-model/ Article by https://twitter.com/tim_nolet was my inspiration for the user/account/subscription schema. Tim was also generous with his time and answered some of my stoopid questions on the https://www.reddit.com/r/SaaS/ Subreddit.
|
||||||
|
|
||||||
## Setup
|
## Setup
|
||||||
|
|
||||||
@@ -44,6 +56,7 @@ Check out the [deployment documentation](https://nuxt.com/docs/getting-started/d
|
|||||||
# Steps to Create
|
# Steps to Create
|
||||||
This is what I did to create the project including all the extra fiddly stuff. Putting this here so I don't forget.
|
This is what I did to create the project including all the extra fiddly stuff. Putting this here so I don't forget.
|
||||||
|
|
||||||
|
## Setup Nuxt
|
||||||
Follow instructions from here https://nuxt.com/docs/getting-started/installation
|
Follow instructions from here https://nuxt.com/docs/getting-started/installation
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@@ -54,6 +67,7 @@ code nuxt3-boilerplate/
|
|||||||
npm install
|
npm install
|
||||||
npm run dev -- -o
|
npm run dev -- -o
|
||||||
```
|
```
|
||||||
|
## Setup Supabase
|
||||||
|
|
||||||
To setup supabase and middleware, loosely follow instructions from https://www.youtube.com/watch?v=IcaL1RfnU44
|
To setup supabase and middleware, loosely follow instructions from https://www.youtube.com/watch?v=IcaL1RfnU44
|
||||||
|
|
||||||
@@ -67,12 +81,14 @@ add this to nuxt.config.ts
|
|||||||
```
|
```
|
||||||
modules: ['@nuxtjs/supabase']
|
modules: ['@nuxtjs/supabase']
|
||||||
```
|
```
|
||||||
|
## Setup Google OAuth
|
||||||
|
|
||||||
Follow these instructions to add google oath https://supabase.com/docs/guides/auth/social-login/auth-google
|
Follow these instructions to add google oath https://supabase.com/docs/guides/auth/social-login/auth-google
|
||||||
|
|
||||||
|
## Nuxt-Supabase
|
||||||
Then I frigged around trying to get the nuxt-supabase module to work properly for the oauth flow. It's a bit of a mess TBH. Eventually I looked at the demo https://github.com/nuxt-modules/supabase/tree/main/demo like a chump and got it working
|
Then I frigged around trying to get the nuxt-supabase module to work properly for the oauth flow. It's a bit of a mess TBH. Eventually I looked at the demo https://github.com/nuxt-modules/supabase/tree/main/demo like a chump and got it working
|
||||||
|
|
||||||
Integrating Prisma...
|
## Integrating Prisma
|
||||||
This felt like a difficult decision at first. the Subabase client has some pseudo sql Ormy sort of features already
|
This felt like a difficult decision at first. the Subabase client has some pseudo sql Ormy sort of features already
|
||||||
but Prisma has this awesome schema management support and autogeneration of a typed client works great and reduces errors.
|
but Prisma has this awesome schema management support and autogeneration of a typed client works great and reduces errors.
|
||||||
I already had a schema lying around based on this (https://blog.checklyhq.com/building-a-multi-tenant-saas-data-model/) that was nearly what I needed and it was nice to be able to re-use it.
|
I already had a schema lying around based on this (https://blog.checklyhq.com/building-a-multi-tenant-saas-data-model/) that was nearly what I needed and it was nice to be able to re-use it.
|
||||||
@@ -93,6 +109,15 @@ npm install @prisma/client --save-dev
|
|||||||
npx prisma generate
|
npx prisma generate
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Stripe Integration
|
||||||
|
This was a royal pain in the butt. Got some tips from https://github.com/jurassicjs/nuxt3-fullstack-tutorial and https://www.youtube.com/watch?v=A24aKCQ-rf4&t=895s Official docs try to be helpful but succeed only in confusing things https://stripe.com/docs/billing/quickstart
|
||||||
|
|
||||||
|
I set up a Stripe account with a couple of 'Products' with a single price each to represent my different plans. These price id's are embedded into the Pricing page.
|
||||||
|
|
||||||
|
### Key things I learned
|
||||||
|
- You need to need to pre-emptively create a Stripe user *before* you send them to the checkout page so that you know who they are when the webhook comes back.
|
||||||
|
- There are like a Billion Fricking Webhooks you *can* subscribe to but for an MVP, you just need the *customer.subscription* events and you basically treat them all the same.
|
||||||
|
|
||||||
# TODO
|
# TODO
|
||||||
- add role to membership and have methods for changing role, making sure one owner etc (done)
|
- add role to membership and have methods for changing role, making sure one owner etc (done)
|
||||||
- remove @unique so users can have multiple accounts (done)
|
- remove @unique so users can have multiple accounts (done)
|
||||||
@@ -101,12 +126,12 @@ npx prisma generate
|
|||||||
- add spinup script somehow to create plans???.... should I use some sort of generator like sidebase?
|
- add spinup script somehow to create plans???.... should I use some sort of generator like sidebase?
|
||||||
- team invitation thingy (not required, admins can add new members to team)
|
- team invitation thingy (not required, admins can add new members to team)
|
||||||
- actions which mutate the current user account should update the context... (done)
|
- actions which mutate the current user account should update the context... (done)
|
||||||
- integration with stripe including web hooks.
|
- integration with stripe including web hooks (basics done).
|
||||||
-- add email to user record... capture from login same as user name
|
-- add email to user record... capture from login same as user name
|
||||||
-- initial user should be created with an expired plan
|
-- initial user should be created with an expired plan
|
||||||
-- add a pricing page....should be the default redirect from signup if the user has no active plan.. not sure whether to use a 'blank' plan or make plan nullable (basic pricing page is done)
|
-- add a pricing page....should be the default redirect from signup if the user has no active plan.. not sure whether to use a 'blank' plan or make plan nullable (basic pricing page is done)
|
||||||
-- figure out what to do with Plan Name. Could add Plan Name to account record and copy over at time of account creation or updation. could pull from the Plan record for display.... but makes it difficult to change... should be loosely coupled, maybe use first approach
|
-- figure out what to do with Plan Name. Could add Plan Name to account record and copy over at time of account creation or updation. could pull from the Plan record for display.... but makes it difficult to change... should be loosely coupled, maybe use first approach
|
||||||
|
-- figure out when/how plan changes.. is it triggered by webhook?
|
||||||
# Admin Functions Scenario (shitty test)
|
# Admin Functions Scenario (shitty test)
|
||||||
Pre-condition
|
Pre-condition
|
||||||
User 3 (encumbent id=3) - Owner of own single user account. Admin of Team account
|
User 3 (encumbent id=3) - Owner of own single user account. Admin of Team account
|
||||||
|
|||||||
Reference in New Issue
Block a user