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!