Fireactjs: my open-source NPM packages for building SaaS using React, Firebase, and Stripe

Why Fireactjs

SaaS products typically require essential functionalities such as user authentication, subscription payments, and user permission management. Developing these features from scratch can be time-consuming, often taking several days, and the core requirements are generally consistent across various SaaS products.

To alleviate this, I have developed NPM packages that can enable tech founders and developers to quickly set up a SaaS framework within an hour, allowing them to concentrate on building the distinctive and valuable features of their SaaS product. The framework is based on Reactjs, Firebase and Stripe, so I called it Fireactjs.

The Fireactjs packages

The framework has been developed with a focus on flexibility and scalability. As of now, the framework comprises of three packages, each of which is accompanied by a set of components that can be tailored to suit your specific requirements. Additionally, the framework allows for the development of your own components that can be used to replace existing ones, should the need arise. This ensures that the framework can be easily customised and extended to meet the evolving needs of your SaaS product.

There are three distinct packages included in the framework, namely:

• @fireactjs/core: This is the core package that comprises of essential components such as sign-up, sign-in, and user profile management, which includes the ability to modify passwords, usernames, and other related details.
• @fireactjs/saas: This package is dedicated to subscription management, Stripe payment integration, and user permission management.
• @fireactjs/saas-cloud-functions: This package comprises of server-side functions that are specifically tailored for Firebase, including a webhook integration for Stripe.

Live demo

You can get a firsthand experience of the framework by visiting the live demo, which can be accessed via https://saas-demo.fireactjs.com/.

The live demo provides you with the opportunity to create both free and paid subscriptions, as well as invite other users to your subscription accounts. If you wish to test out the paid subscription feature, you can make use of Stripe testing credit card 4242 4242 4242 4242, along with any future expiry month and a random 3-digit CVV.

How to build your SaaS

To begin, you will first need to create a standard React web application. Following this, you can proceed with the installation instructions outlined in the @fireactjs/core installation guide in order to configure the web app for user authentication. This will enable your users to register, sign in, and manage their user profiles.

Next, you can follow the installation guide for @fireactjs/saas to set up the SaaS package and cloud functions. Additionally, you will need to establish a connection between your React SaaS application and your Stripe account.

Once you have completed these steps, your React web app will be equipped to support user registration, sign-in, subscription account creation via Stripe payment plans, and the ability to invite other users to subscription accounts. The only remaining part would be to develop your SaaS features.

You can create a component for your feature as in the example below. The example simply reads the user information and display it. But you can develop the SaaS feature that your users would use and pay for following the same coding approach.

import React from "react";
import { AuthContext } from "@fireactjs/core";
import { Box, Link, Paper } from "@mui/material";

export const MyComponent = () => {

    return (
        <AuthContext.Consumer>
            {context => (
                <Paper>
                    <Box p={2}>
                        <h1>Example Component</h1>
                        <p>Fireactjs is a framework to build SaaS web application. Replace this component with your SaaS feature components.</p>
                        <p><strong>
                            This is an example component to demostrate how to retrieve the user information.
                            For details, see <Link href="https://fireactjs.com/docs/core-package/development/" target="_blank">the documentation</Link>.
                        </strong></p>
                        <p>User ID: {context.authUser.user.uid}</p>
                        <p>Name: {context.authUser.user.displayName}</p>
                        <p>Email: {context.authUser.user.email}</p>
                        <p>Verified: {context.authUser.user.emailVerified?"Yes":"No"}</p>
                        <p>Avatar URL: {context.authUser.user.photoURL}</p>
                    </Box>
                </Paper>
            )}
        </AuthContext.Consumer>
    )
}

And then simply embed your component to the App.js in the routes with the permission control defined.

<Route path={pathnames.Subscription} element={<SubscriptionProvider loader={<Loader size="large" />} />} >
    <Route element={<AppTemplate logo={<Logo size="large" />} toolBarMenu={<UserMenu />} drawerMenu={<SubscriptionMenu />} />}>
        <Route element={<PermissionRouter permissions={["access"]} />} >
            <Route exact path={pathnames.Subscription+"/"} element={<MyComponent />} />
        </Route>
        <Route element={<PermissionRouter permissions={["admin"]} />} >
            ...
        </Route>
    </Route>
</Route>

Join the project

If you have any problems during the installation process or while building your SaaS, feel free to reach out to me through the Fireactjs GitHub. You can also contribute to the open-source framework by submitting pull requests and suggestions for improvement. I hope that this framework will help you to build your SaaS product more efficiently and effectively.

Upvote on Product Hunt

Please help me promote the project to tech founders and developers by upvoting it on Product Hunt.