DEV Community

loading...
Cover image for React + Firebase + Stripe = Fireact, the open-source project for your next SaaS product.

React + Firebase + Stripe = Fireact, the open-source project for your next SaaS product.

chaoming profile image Chaoming Li ・1 min read

Many SaaS products are moving to React these days, and my own product has been through the same journey this year.

As I started the project, I decided to use Firebase for authentication, hosting and storing data. So I was looking for an existing solution. However, I couldn't find one so I built the first version of Fireact back in May 2020.

But that's not enough. As with most SaaS applications, I needed the feature to collect subscription payment. Now, the project version 2 is released.

Key features are:

  • Single-sign-on supporting Google, Facebook, Microsoft and a wild range of sign-in methods.
  • Stripe integration to manage subscription accounts and payments.
  • Supporting multiple subscription accounts per user
  • User permission management in subscription accounts
  • User permission framework for the development of your SaaS functionalities

Why Fireact

I hope the project can be a good starting point for developers working on SaaS projects. It comes with the features you need to manage users and subscriptions so you don't need to spend time on developing these features again. Just focus on the key functionalities of your SaaS project, it will save you tons of time.

Contribution

This is the first open-source project I created. If you like the project, please support it by contributing code, documentation, or simply spreading the word.

Here is the Github link: https://github.com/chaoming/fireact

Here is the demo: https://fireact-e1bdc.firebaseapp.com/
Use testing credit card 4242 4242 4242 4242 to create your testing subscription account.

Any feedback is welcomed.

Cheers,

Discussion

pic
Editor guide
Collapse
samipshah100 profile image
samipshah100

Thanks looks very good!. Docs would be very helpful too. .

Collapse
chaoming profile image
Chaoming Li Author

Thanks, the plan is to start writing docs. At the moment, only got the installation doc.

Collapse
samipshah100 profile image
samipshah100

OK cool. Does this let you manage user subscriptions on your front-end unlike firebase stripe extension (which needs customer to use stripe account to manage subscription)

Thread Thread
chaoming profile image
Chaoming Li Author

Yes, account admin/owner can change subscription plan, update credit card and delete/cancel the subscription plan via the front-end. Customers don't even need to know you are using Stripe.

Feel free to login to the live demo and use the testing credit card 4242 4242 4242 4242 to play around the subscription management as the account owner.

Collapse
peter profile image
Peter Kim Frank

Is there a license associated with the project?

Collapse
chaoming profile image
Collapse
peter profile image
Collapse
surjithctly profile image
Surjith S M

Possible to integrate Next.js?

Collapse
chaoming profile image
Chaoming Li Author

I don't really know Next.js. What would the benefits Next.js can bring in?

Collapse
mohammedijas profile image
Mohammed Ijas

Using the firebase cloud functions. All the backend code is written as cloud functions.

Collapse
chaoming profile image
Chaoming Li Author

I found cloud functions are relatively slow compared to the firebase web sdk. I would only use cloud functions only when necessary for security reasons

Collapse
sm0ke profile image
Sm0ke

This is useful. Thanks

Collapse
mohammedijas profile image
Mohammed Ijas

Firebase is awesome and I have been using it for a long time. But, I am concerned about the scalability for large projects like something with 100k users using it at the same time.

Collapse
saleheen profile image
Md Salehin Khan

Hi,
It's cool

Collapse
mindhash profile image
Amol Umbark

This is really cool. Good work 👏

Collapse
seanmclem profile image
Seanmclem

All the Stripe stuff is on the front end? Don't you need a lot of that server side?

Collapse
chaoming profile image
Chaoming Li Author

Most of the Stripe stuff is on server-side with Cloud Function.

Collapse
liyasthomas profile image
Liyas Thomas

It would be great if there's also a Vue.js implementation.

Collapse
adeviss2 profile image
Alain Deviss

This looks great. Does it have user roles ?

Collapse
chaoming profile image
Chaoming Li Author

Good question. Yes, there are two roles for each subscription account: admin and user. Admin can change plan, view invoices and manage users.

Collapse
jcortes0309 profile image
Juan Cortes

This is great. I have a React/Firestore app and I'm planning to add SaaS functionality so this will be an awesome resource. Thanks for sharing!

Collapse
chaoming profile image
Chaoming Li Author

Feel free to open issues in the Github repo if you have questions. Would love to follow your progress on making your product on top of the project.