Production-Ready Next.js, Stripe, Supabase Template For Modern Web App

This ia a modern, production-Ready starter template for building full-stack web applications.

This template uses Next.js for the frontend and server-side rendering, Supabase for authentication and database management, and Stripe for handling payments. It’s built with TypeScript and styled with Tailwind CSS, which provides type safety and a consistent design system.

Features

Use Cases

• SaaS Platform: Create a subscription-based software service. The template handles user registration, recurring payments, and account management. For example, you could launch a project management tool where users pay a monthly fee for access.
• E-commerce Store: Build an online shop with secure checkout and payment processing. You can list products, manage inventory (with additional coding), and process orders through Stripe.
• Membership Site: Develop a platform where users subscribe to access exclusive content. This could be a site for online courses, premium articles, or a community forum.
• Booking System: Set up a service where users can book appointments or services and pay online. Think of a yoga studio offering class packages or a consulting service with hourly rates.
• Donation Platform: Create a website for accepting donations. The Stripe integration can handle one-time or recurring donations, suitable for charities or open-source projects.

Installation

1. Clone the template repository:

git clone https://github.com/ShenSeanChen/yt-stripe-nextjs-supabase my-full-stack-app
cd my-full-stack-app
rm -rf .git
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/YOUR_GITHUB_USERNAME/my-full-stack-app.git
git push -u origin main

2. Install the required dependencies:

npm install
# or
yarn install

3. Create a .env.local file using the variables from .env.example:

NEXT_PUBLIC_APP_URL=http://localhost:8000
NEXT_PUBLIC_API_URL=http://localhost:8080
NEXT_PUBLIC_WS_URL=ws://localhost:8080
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
# OpenAI Configuration
OPENAI_API_KEY=
# Stripe Configuration
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_
NEXT_PUBLIC_STRIPE_BUTTON_ID=buy_btn_
STRIPE_SECRET_KEY=sk_live_
STRIPE_WEBHOOK_SECRET=whsec_
# ANALYTICS
NEXT_PUBLIC_POSTHOG_KEY=
NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com

4. Set up Google Cloud Platform:

• Create OAuth 2.0 credentials in the GCP Console
• Configure authorized JavaScript origins
• Add appropriate redirect URIs
• Save your Client ID and Client Secret

5. Configure Supabase:

• Obtain your API keys from Project Settings > API
• Set up Authentication with Google provider
• Create necessary database tables and security policies
• Implement the trigger function for handling new users:

CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS trigger AS $$
BEGIN
  INSERT INTO public.users (id, email, created_at, updated_at, is_deleted)
  VALUES (NEW.id, NEW.email, NOW(), NOW(), FALSE);
  INSERT INTO public.user_preferences (user_id, has_completed_onboarding)
  VALUES (NEW.id, FALSE);
  INSERT INTO public.user_trials (user_id, trial_start_time, trial_end_time)
  VALUES (NEW.id, NOW(), NOW() + INTERVAL '48 hours');
  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;
CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

6. Set up Stripe:

• Create products in your Stripe dashboard
• Configure promotional codes if needed
• Set up payment links with trial periods
• Configure webhooks with your endpoint URL and required events
• Copy your API keys and webhook secret to your .env file

7. Start the development server:

npm run dev
# or
yarn dev

8. Open http://localhost:3000 in your browser to see your application running.

Related Resources

• Next.js Documentation: Official Next.js Documentation: Learn the fundamentals of Next.js, including routing, data fetching, and API routes.
• Supabase Documentation: Official Supabase Documentation: Explore Supabase’s features, including authentication, database management, and real-time capabilities.
• Stripe Documentation: Official Stripe Documentation: Find guides and API references for integrating Stripe payments into your application.
• Tailwind CSS Documentation: Official Tailwind CSS Documentation: Learn how to use Tailwind CSS classes and customize your styles.

FAQs

Q: Can I use this template for commercial projects?
A: Yes, this template is licensed under the MIT License, allowing for commercial use.

Q: Do I need to know TypeScript to use this template?
A: While the template is built with TypeScript, basic knowledge is sufficient. TypeScript helps with type safety, but you can still write regular JavaScript if needed.

Q: How do I handle database migrations?
A: Supabase provides tools for managing database schema changes. Check the Supabase documentation for details on migrations.

Q: How do I update dependencies?
A: Use npm outdated or yarn outdated to check for updates, then npm update or yarn upgrade to install newer versions.

Q: Is this template suitable for production applications?
A: Yes, this template is specifically designed for production use with security best practices implemented, including secure authentication, environment variable management, and proper API route handling.

Q: Can I customize the subscription plans and pricing?
A: Absolutely. The template integrates with Stripe, allowing you to define and customize subscription plans, pricing tiers, and trial periods directly in your Stripe dashboard without code changes.

Q: Does this template support multiple authentication methods?
A: Yes, the template supports email/password authentication, Google OAuth, and magic links through Supabase. You can easily enable or disable these methods based on your requirements.

Q: How do I deploy this application to production?
A: The template is optimized for deployment on Vercel, which offers seamless integration with Next.js. Simply connect your GitHub repository to Vercel, configure your environment variables, and deploy.

Video