Etheonor / supanextail

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

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.