Next.js SaaS with Shadcn Postgres Project

Building a stock analysis platform inspired by Morningstar, focusing specifically on providing investment insights for individual stocks, analysts, and user ratings. The product will have features for viewing detailed analysis, browsing stocks by sector, and getting actionable insights in an easy-to-navigate interface.

This is a SaaS application using Next.js with support for authentication, Stripe integration for payments, and a dashboard for logged-in users.

Features

• Marketing landing page (/)
• Pricing page (/pricing) which connects to Stripe Checkout
• Dashboard pages with CRUD operations on users/teams
• Basic RBAC with Owner and Member roles
• Subscription management with Stripe Customer Portal
• Email/password authentication with JWTs stored to cookies
• Global middleware to protect logged-in routes
• Local middleware to protect Server Actions or validate Zod schemas
• Activity logging system for any user events

Tech Stack

• Framework: Next.js
• Database: Postgres
• ORM: Drizzle
• Payments: Stripe
• UI Library: shadcn/ui

Getting Started

git https://github.com/xinghehaohan/NextPostgresSaaS.git
cd NextPostgresSaaS
pnpm install

Running Locally

Use the included setup script to create your .env file:

pnpm db:setup

Then, run the database migrations and seed the database with a default user and team:

pnpm db:migrate
pnpm db:seed

This will create the following user and team:

• User: test@test.com
• Password: admin123

You can, of course, create new users as well through /sign-up.

Finally, run the Next.js development server:

pnpm dev

Open http://localhost:3000 in your browser to see the app in action.

Optionally, you can listen for Stripe webhooks locally through their CLI to handle subscription change events:

stripe listen --forward-to localhost:3000/api/stripe/webhook

Testing Payments

To test Stripe payments, use the following test card details:

• Card Number: 4242 4242 4242 4242
• Expiration: Any future date
• CVC: Any 3-digit number

Going to Production

When you're ready to deploy your SaaS application to production, follow these steps:

Set up a production Stripe webhook

1. Go to the Stripe Dashboard and create a new webhook for your production environment.
2. Set the endpoint URL to your production API route (e.g., https://yourdomain.com/api/stripe/webhook).
3. Select the events you want to listen for (e.g., checkout.session.completed, customer.subscription.updated).

Deploy to Vercel

1. Push your code to a GitHub repository.
2. Connect your repository to Vercel and deploy it.
3. Follow the Vercel deployment process, which will guide you through setting up your project.

Add environment variables

In your Vercel project settings (or during deployment), add all the necessary environment variables. Make sure to update the values for the production environment, including:

1. BASE_URL: Set this to your production domain.
2. STRIPE_SECRET_KEY: Use your Stripe secret key for the production environment.
3. STRIPE_WEBHOOK_SECRET: Use the webhook secret from the production webhook you created in step 1.
4. POSTGRES_URL: Set this to your production database URL.
5. AUTH_SECRET: Set this to a random string. openssl rand -base64 32 will generate one.

Deployment Instructions

1. Clone the repository
2. Copy .env.example to .env
3. Set up your environment variables:
   • For local development: Fill in the .env file
   • For production: Add variables to your hosting platform

Environment Variables Required:

• POSTGRES_URL: Your PostgreSQL connection string
• STRIPE_SECRET_KEY: Your Stripe secret key
• STRIPE_WEBHOOK_SECRET: Your Stripe webhook secret
• BASE_URL: Your application's base URL
• AUTH_SECRET: A secure random string for authentication

Important Security Notes:

• Never commit the .env file to version control
• Use different API keys for development and production
• For Stripe webhooks, create separate webhook endpoints for development and production