mirror of
https://github.com/fergalmoran/supanextail.git
synced 2025-12-22 01:10:01 +00:00
93 lines
4.6 KiB
Markdown
93 lines
4.6 KiB
Markdown
## Welcome to SupaNexTail!
|
||
|
||
## Documentation 2.0
|
||
|
||
A new documentation is available here : https://doc.supanextail.dev/
|
||
|
||
## 
|
||
|
||
### What is SupaNexTail?
|
||
|
||
SupaNexTail is a boilerplate to quickly create a MVP for a SaaS. It’s built with Next.js, Supabase, TailwindCSS, and Stripe.
|
||
|
||
### How can I use it?
|
||
|
||
Simply follow the installation process. You need to have some knowledge with React and know how to set up a database on Supabase.
|
||
|
||
### Installation
|
||
|
||
#### SupaNexTail project
|
||
|
||
You'll need to fork this repository. I suggest to keep your repository sync with SupaNexTail, in order to get all future updates.
|
||
|
||
To do that, you'll have extended information on this page: https://docs.github.com/en/github/collaborating-with-pull-requests/working-with-forks/syncing-a-fork
|
||
|
||
#### Supabase
|
||
|
||
You need to create a Supabase project and make a SQL Query with the « SetupSupabaseSQL.sql » (You can copy the content and create a query in the Supabase dashboard)
|
||
|
||
1. Go to https://supabase.io/
|
||
2. Create an account and go to your dashboard
|
||
|
||
|
||
|
||
3. When your project is created, go to the SQL tab and create a new query
|
||
|
||
|
||
|
||
4. Paste the content of setupSupabaseSQL.sql and run the query
|
||
5. Your Supabase account is ready! Don’t forget to retrieve your env variables in settings -> API
|
||
|
||
|
||
|
||
#### Stripe
|
||
|
||
1. Create a Stripe account and a new project
|
||
2. Create Products (as many as you want). For example SupaNexTail have 6 prices, 3 monthly plans and 3 annually plans.
|
||
|
||
|
||
|
||
3. You’ll need to retrieve the price ID from each product on Stripe and paste them on utils/priceListjs. Of course you can handle the prices differently if you want. You’ll have to update the Pricing component too if you have a different amount of price ids.
|
||
4. Don’t forget to retrieve the variables from Stripe
|
||
|
||
 5. You also need to configure the webhook section. Two events are needed
|
||
|
||
- customer.subscription.deleted
|
||
- checkout.session.completed
|
||
|
||
|
||
|
||
#### Sendgrid
|
||
|
||
Sendgrid is optional but you’ll need to configure it if you want to use the contact form.
|
||
|
||
|
||
|
||
If you want to use the mailing list system, you’ll need to do a little bit more configuration. I wrote an article about it [here](https://dev.to/michael_webdev/create-a-mailing-list-with-sendgrid-and-next-js-41f7)
|
||
|
||
The backend is ready to use. You just have to add your SENDGRID_MAILING_ID env variables (more explanation about it in the article).
|
||
|
||
#### Misc.
|
||
|
||
- Supabase variables are mandatory, you can skip sendgrid as it’s just for the contact form. Stripe variables are needed if you want the subscription system.
|
||
- Don’t forget to do an `npm install` locally
|
||
- You can launch the website locally with `npm run dev `
|
||
- If you want to setup the website with Vercel, you can install the Vercel CLI and simply enter the command `vercel`
|
||
|
||
Notes:
|
||
|
||
If you want to use Stripe, be sure to set up your webhooks in the dashboard. If you want to test it locally, install Stripe CLI and use this command line:
|
||
|
||
```
|
||
stripe listen --forward-to localhost:3000/api/stripe/webhook
|
||
```
|
||
|
||
The two event needed are:
|
||
|
||
- customer.subscription.deleted
|
||
- checkout.session.completed
|
||
|
||
### Known issues
|
||
|
||
- When a user sign up and you have the confirmation email enabled on Supabase, you don’t have a message that tells you to check your email. It will be fixed with a new version of Supabase UI in a few days.
|