Boilerplate for Remix + Vite + shadcn/ui + Supabase

Demo

Live app: remix-shadcn-boilerplate.vercel.app

What's inside?

• A fullstack app with Remix, Vite, shadcn/ui, and Supabase
• Complete authentication flow with Supabase
  • Signup with email, Google, Github
  • Login with email, Google, Github
  • Forgot password flow
  • Logout
• Protected routes
• A beautiful and professional dashboard layout, credit to shadcn-ui-sidebar
• A documentation page, configurable to point to your own markdown files in a GitHub repo.
• A customisable pricing page with Stripe integration.
• Easily configurable for your own project

Setup

• Clone the repo:

git clone git@github.com:davidculemann/remix-shadcn-boilerplate.git

• Install dependencies:

pnpm install

Stripe

In order to use Stripe Subscriptions and seed the database, you'll need to create a Stripe Account and get the secret key from the Stripe Dashboard.

1. Create a Stripe Account or use an existing one.
2. Visit API Keys section and copy the Secret key.
3. Paste your secret key into .env file as STRIPE_SECRET_KEY.

Stripe Webhook

1. In order to start receiving Stripe Events to our Webhook Endpoint, you need to install the Stripe CLI. Once installed run the following command in your console. (Make sure you're in the root of your project):

stripe login

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

This should give you a Webhook Secret Key. Copy and paste it into your .env file as STRIPE_WEBHOOK_ENDPOINT.

Important

This command should be running in your console while developing, especially when testing or handling Stripe Events.

2. Then, you can run the seed command to populate your stripe store with products and prices (skip this if you want to seed Supabase as well - this is covered in the next section below).

pnpm run seed

Supabase

• Create a new project on Supabase

• enter your Supabase secrets in .env, the service role key is found in the API settings of your Supabase project

SUPABASE_URL=https://<your_supabase_url>.supabase.co
SUPABASE_ANON_KEY=<your_supabase_anon_key>
SUPABASE_SERVICE_ROLE_KEY=<your_supabase_service_role_key>

• connect to the supabase project and run the initialisation migrations:

pnpm supabase link   

pnpm supabase db push

• seed the database:

pnpm run seed

• generate typescript types for your Supabase tables:

supabase gen types typescript --project-id <your_supabase_project_id> > db_types.ts

### Documentation

This project includes a documentation page, which is configured to point to a markdown file in a GitHub repo. If you don't want to use this, simply remove all _landing.docs.* files from the app/routes directory, as well as $.tsx.

To use this feature, you'll need to set the SOURCE_REPO environment variable in .env as a URL to the GitHub repo you want to use, and add the GITHUB_TOKEN environment variable to increase your rate limit (generate one here).

for example:

SOURCE_REPO=https://github.com/davidculemann/remix-shadcn-supabase-boilerplate-docs
GITHUB_TOKEN=ghp_1234567890abcdef1234567890abcdef1234567890

Email

• Supabase aggressively rate limits your email sending on the free plan, so you'll need to use a third-party email service. I recommend Resend for this. Add the supabase integration here: https://resend.com/settings/integrations.

• The auth flow currently works with OTP emailed to the user. To configure this, you'll need to go to /auth/templates in your supabase dashboard and add the following templates:

1. Confirm signup:

<h2>Confirm Your Signup</h2>

<p>Your verification code is: <strong>{{ .Token }}</strong></p>
<p>This code will expire in 15 minutes. Please use it to complete your signup process.</p>

2. Reset Password:

<h2>Reset Password</h2>
<p>Follow this link to reset the password for your user:</p>
<p><a href="{{ .RedirectTo }}/api/auth/confirm?token_hash={{ .TokenHash }}&type=email&email={{ .Email }}">Reset Password</a></p>

### Personalisation

This project is configured to use your own project name, author name, and project description in the meta tags and header of the page. You can change these in the app/config/site.ts file.

Development

1. Seed the database:

pnpm run seed

2. Run the Vite dev server:

npm run dev

Deployment

With Vercel

1. First, install the Vercel CLI:

npm install -g vercel

2. Then deploy your app:

vercel

Manual Deployment

1. First, build your app for production:

npm run build

2. Setup your environment:

NODE_ENV='production'

3. Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

Stack

• Remix
• Vite
• shadcn/ui
• Supabase
• React Query
• Framer Motion
• Resend
• zustand
• Logoipsum
• Stripe

Tooling

• Biome
• pnpm
• Vite
• Vercel

Credits

• shadcn-ui-sidebar: Professional yet beautiful dashboard layout built with shadcn, adapted from Next-js.
• remix-docs-template: A powerful and customisable template for Remix documentation sites.
• pricing-page-shadcn: A pricing page built with shadcn, adapted from Next-js.
• shadcn-admin: Very useful layouts for settings screens.
• remix-saas: The best Remix starter I've seen so far, took some inspiration from the landing page and stripe implementation, adapated from Prisma to Supabase.