DEV Community

Cover image for 🌟Open-source SaaS Starter: React + Firebase + Stripe + i18n

🌟Open-source SaaS Starter: React + Firebase + Stripe + i18n

Chaoming Li on November 26, 2024

After several years of building SaaS businesses, I recognized a recurring challenge: nearly every SaaS application requires implementing a set of...
Collapse
 
matek075 profile image
Matek •

Any advice on how to deal with such a case ->
I have pricing on the landing page. The user clicks on the offer and purchase plan, and then I want to create a user account in Firebase.

Collapse
 
chaoming profile image
Chaoming Li •

If I understand your scenario correctly, this would be the pricing page (website) -> the sign-up form (web app). The system has the route for the sign-up page so you can always link to it.

Collapse
 
matek075 profile image
Matek • • Edited

Just want to give possibility to buy subscription without having account.
So the flow will be following->
User buys subscription then system creates account for user.

Thread Thread
 
chaoming profile image
Chaoming Li •

Using the Stripe data to create accounts?

Thread Thread
 
matek075 profile image
Matek •

Create account in firebase. We can use the same email as for payments details

Thread Thread
 
chaoming profile image
Chaoming Li •

That is a great idea. I have a Hugo theme (github.com/chaoming/hugo-saasify-t...) which could be the starting point of the process. Thank you for the idea!

Don't hesitate to contribute code if you like.

Thread Thread
 
matek075 profile image
Matek •

Sure thank You

Thread Thread
 
matek075 profile image
Matek •

I'm trying to create subscription and I'm getting

CreatePlan.tsx:41
POST http://localhost:5555/my-app-name/us-central1/createSubscription net::ERR_CONNECTION_REFUSED

Thread Thread
 
matek075 profile image
Matek •

Looks like ports are wrong?
Image description

Thread Thread
 
chaoming profile image
Chaoming Li •

Looks like your Cloud Functions are on port 5001. Make sure you configure it the same port in the config.json (docs.fireact.dev/core/getting-star...)

Collapse
 
nfodor profile image
Nicolas Fodor •

Is Firebase replacable by others?

Collapse
 
chaoming profile image
Chaoming Li •

Which tech stack do you have in mind?

The framework is designed to be customizable. It consists of a bunch of React components, so custom-built components can replace them.

The reason for Firebase is that it is serverless and very cost-effective. The current version of components uses Firebase Auth for authentication, Firestore for its database and Cloud Functions for server-side functions.

Collapse
 
eshimischi profile image
eshimischi • • Edited

It’s agnostic. Personally would go with supabase.com/ instead

Collapse
 
cheetah100 profile image
Peter Harrison •

This sounds awesome. Building my own SaaS at the moment, and solving these problems is a pretty major time sink. Will take a look.

Collapse
 
chaoming profile image
Chaoming Li •

Indeed, it takes weeks easily if start from scratch. I hope you find the project helpful. Feel free to give me feedback.

Collapse
 
ceoplaybooks profile image
CEO Playbooks •

Cool!