A new documentation is available here : https://doc.supanextail.dev/
SupaNexTail is a boilerplate to quickly create a MVP for a SaaS. It’s built with Next.js, Supabase, TailwindCSS, and Stripe.
Simply follow the installation process. You need to have some knowledge with React and know how to set up a database on Supabase.
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
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)
- Go to https://supabase.io/
- Create an account and go to your dashboard
- When your project is created, go to the SQL tab and create a new query
- Paste the content of setupSupabaseSQL.sql and run the query
- Your Supabase account is ready! Don’t forget to retrieve your env variables in settings -> API
- Create a Stripe account and a new project
- Create Products (as many as you want). For example SupaNexTail have 6 prices, 3 monthly plans and 3 annually plans.
- 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.
- Don’t forget to retrieve the variables from Stripe
- customer.subscription.deleted
- checkout.session.completed
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).
- 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 installlocally - 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
- 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.