Remix Saas Kit

screenshot of Remix Saas Kit
react
remix
tailwind
headless-ui
prisma
supabase

Remix Saas Kit

Remix SaaS kit - Free sample of SaasRock v0.0.1 - The SaaS Building Framework

Overview

The Remix SaaS Kit is a starting point for creating a SaaS (Software as a Service) project. It is currently at version 0.0.1 and is no longer maintained, as the commercial version (SaasRock) has reached version 0.8. However, the Remix SaaS Kit is still a good starting point for individuals looking to create their own SaaS projects.

Features

  • Create a .env file with necessary values such as DATABASE_URL, REMIX_SESSION_SECRET, REMIX_ADMIN_EMAIL, REMIX_ADMIN_PASSWORD, REMIX_STRIPE_SK, REMIX_POSTMARK_SERVER_TOKEN, REMIX_INTEGRATIONS_CONTACT_FORMSPREE, and REMIX_COMPANY_ADDRESS.
  • Generate and seed your database, with the ability to delete and push again if using SQLite.
  • Run the app and log in with the REMIX_ADMIN_EMAIL and REMIX_ADMIN_PASSWORD.
  • Generate Stripe products for pricing.
  • Generate Postmark email templates.
  • Verify created Stripe products on the pricing page.
  • Register with a new email and receive a welcome email.
  • Subscribe to a plan using Stripe checkout.
  • Invite an admin user to a workspace and receive a workspace link invitation email.
  • Reject or accept workspace invitation emails.
  • Add employees and create contracts with PDF attachments, signatories, and viewers.
  • Edit or delete contracts.
  • Add new users and receive user invitation emails.
  • Create, edit, and delete workspaces.

Installation

To install the Remix SaaS Kit, follow these steps:

  1. Create a .env file and set the following values:

    • DATABASE_URL
    • REMIX_SESSION_SECRET (any string)
    • REMIX_ADMIN_EMAIL (this will be your admin user)
    • REMIX_ADMIN_PASSWORD (do not commit the .env file)
    • REMIX_STRIPE_SK (get secret key from Stripe)
    • REMIX_POSTMARK_SERVER_TOKEN (create a free email server)
    • REMIX_INTEGRATIONS_CONTACT_FORMSPREE (create a free form)
    • REMIX_COMPANY_ADDRESS (used on emails)
  2. Generate and seed your database. If using SQLite, delete the dev.db file if your database gets messed up, then run npx prisma db push again.

  3. Run the app and log in with the REMIX_ADMIN_EMAIL and REMIX_ADMIN_PASSWORD.

  4. Generate Stripe products for pricing at /admin/pricing.

  5. Generate Postmark email templates at /admin/emails.

  6. Sign out and verify the created Stripe products at the /pricing page.

  7. Register with a new email at /register and receive a welcome email.

  8. Click on "Click here to subscribe" to subscribe to any plan using Stripe checkout (use any Stripe test card).

  9. Click on the sidebar item "Links" and "New link" to invite your admin user and its workspace. You should receive a workspace invitation email and be redirected to /app/links/pending.

  10. Sign out, log in as your admin user, select the invited workspace, and click on 1 pending link.

  11. Reject the invitation and receive an invitation rejected email.

  12. Sign out, log in as the user registered on step 7, and repeat steps 10 and 11.

  13. Sign out, log in as your admin user, and accept the invitation. You should receive an invitation accepted email.

  14. Click on the sidebar item "Employees" and "Add employee" to add 1 or 2 employees.

  15. Click on the sidebar item "Contracts" and "New contract" to set the name, description, and upload a PDF file. Select signatories, viewers, and employees. You should receive a new contract email with the PDF as an attachment. Edit or delete the contract as desired.

  16. Go to app/settings/members and add a new user to receive a user invitation email.

  17. Go to app/settings/workspaces and create, edit, and delete workspaces.

Summary

The Remix SaaS Kit is a starting point for individuals looking to create a SaaS project. It provides various features such as database configuration, user authentication, email templates, Stripe integration, contract management, and workspace management. The installation process involves setting up environment variables, generating and seeding the database, and running the app. Once set up, users can register, subscribe to plans, invite team members, manage contracts, and create and edit workspaces. While the Remix SaaS Kit is no longer actively maintained, it still serves as a useful foundation for building SaaS projects.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

remix
Remix

Remix is a modern JavaScript framework that focuses on building fast and performant web applications. It emphasizes a combination of server-rendered content and client-side interactivity, offering a robust architecture for creating scalable and maintainable projects.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

headless-ui
Headless UI

Headless UI is a set of completely unstyled, fully accessible UI components for React, Vue, and Alpine.js that empower developers to build their own fully accessible custom UI components. Headless UI allows developers to focus on building accessible and highly functional user interfaces, without the need to worry about styling or layout.

prisma
Prisma

Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.

supabase
Supabase

Supabase is an open source Firebase alternative. Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, and Storage.

fullstack
Fullstack Boilerplates

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

vercel
Vercel

Vercel offers built-in support for deploying and hosting Next.js applications, making it a popular choice among Next.js developers.