clean up readme because apparently people are watching the repo now

This commit is contained in:
Michael Dausmann
2023-03-19 12:33:24 +11:00
parent 7311c13db2
commit 24f3f9d80a
2 changed files with 43 additions and 6 deletions

View File

@@ -1,2 +1,14 @@
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"

View File

@@ -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
@@ -44,6 +56,7 @@ Check out the [deployment documentation](https://nuxt.com/docs/getting-started/d
# 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.
## Setup Nuxt
Follow instructions from here https://nuxt.com/docs/getting-started/installation
```bash
@@ -54,6 +67,7 @@ code nuxt3-boilerplate/
npm install
npm run dev -- -o
```
## Setup Supabase
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']
```
## Setup Google OAuth
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
Integrating Prisma...
## Integrating Prisma
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.
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
```
## 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
- 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)
@@ -101,12 +126,12 @@ npx prisma generate
- 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)
- 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
-- 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)
-- 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)
Pre-condition
User 3 (encumbent id=3) - Owner of own single user account. Admin of Team account