See how I built a complex serverless SAAS app using React and Firebase

This is a complex serverless SAAS app built completely on react and Firebase.

(I hope everyone is doing well in these tough COVID time)

What is the problem the app is solving

It is often a challenge to build complex forms for business.Businesses often needs forms for people to connect to them. This is an everyday problem for millions of business around the world (that is one if the reasons why Wix, Squarespace and other players exist today). As not everyone is technically equipped to create and build forms, I have automated this process where people can build forms just with a few clicks. After creating forms, users can just add the forms directly on their website. Entire backend process will be taken care by the app.The app should be able to build complex functionality inside forms.

For example,

If I should be able to set if I want to show a field or not based on input in another field.
If user selects option 1 in question 1, then show question 9.If a user selects a option 2 in a dropdown, show the text filed as input for questions 10
In a food ordering app, if a user selects 'Black Beans' and 'Red Beans', then add $4 to the final price field.
In a business support app, if a user selects 'Production Environment' for an option, then show an extra filed as Phone Number dynamically while user is entering the data.
This way the app has so much of dynamic functionality involved around complex mathematical calculations.

Features of the app

No coding skills required - The form with complex calculations can be build without any technical skills and can be added to your website easily.

Works on every platform including CMS platforms - The form works on every platforms including Wix, SquareSpace, Wordpress or any other CMS.

Works with complex calculations - Include complex calculations in the forms including exponential and logarithmic functions. They work straight out of the box.

Supports rating and review options as well - Collect ratings ❤️ Collect reviews ⭐ Use emojis easily in forms. 😃 and 🍔 as well.

Receive emails with instant email alerts on each form submission - Receive instant alerts for form submissions on email.

Logical display of each form field - Logical display of each field based on the other fields data. Show or hide each element as needed building a logical flow.

What did I decide for the Free plan?

50 forms included
100000 views
5000 submissions
Logical calculations
Email support

How did I decide on the Tech stack?

After deciding to build this app, I have evaluated lot of technical choices like building the entire app on Python or Java and host it on either Digital Ocean or Vultr along with my database. After playing around for some time, I understand that I need a better architecture and need to separate my front end and backend. Some of the decent options on front end that I got are React and Vue. So, I kept both the options open and moved to backend to decide which one to pick. As a developer, one of the main goals for me is to scale the app automatically (Yes, I know premature optimization is the cause of all evil) as the traffic grows. If I am going with either Python/Java app and host it on DigitakOcean or Vultr, I need to have my servers always on and adding more cost over time. So, I decided to move to cloud completely and host it on cloud. Instead of hosting on AWS or GCP instances, I opted for a serverless architecture at this point so that the app can scale automatically. There are some challenges with serverless as sometimes you may have to spend more time in development to play around various component.

Then I evaluated my choices against AWS and GCP. In AWS, I got S3 for my static website/code and APIGateway/Lambda for backend API. While in GCP, I got Firebase to host my static site and GCP Cloud functions for any APIs. After giving some thought, I have decided upon Firebase (more on this in a separate post).As I have opted for my backend APIs to be on cloud, its a natural choice to pick my database also on cloud. As the forms are lot dynamic in field types, sizes, I have opted for a NoSQL database and on Firebase, there are two NoSQL databases - RealTime DB and Firestore. I have opted with Firestore database as it comes with loads of APIs for playing with data.

How did I decide on User Authetication/Signin/SignUp process?

To avoid unnecessary development time, I thought of using any readymade solution for Authentication process. I got Auth0 as one promising option with a decent free plan. AWS also have a service named Cognito to handle authentication. But as I already opted for Firebase for my infrastructure, I have decided to go with Firebase Authentication.

Deciding on coding environment

After deciding to move entire tech stack to serverless environment, for the first time I tried to go to online coding platform for the entire coding. So, instead of using localhost environment, I researched on using Stackblitz and it worked amazingly brilliant. After testing couple of time, I decided to move with Stackblitz.Deciding on UI choices

I wanted to pick one of the two options I know here. One is material ui and the other is bootstrap. A quick check clearly shows there is lot if npm support for material ui components. (Casual note - material ui is a Google product)

Actual development time

After deciding on tech stack and coding environments, I started making a notes of what are my required input fields in my form that I need to support.

Text
Rangeslider
Checkbox
RadioButton
Number
Dropdown
Email
Label
Switch
Date
Ratings/Reviews

I have made each of these into individual components using material ui packages. But some elements were not easy to use. Dropdown, Radio button, Range slider were slightly tougher ones. Then the complexity started to increase. Now, I want these components to talk to each other. Changes in component need to dynamically make changes to other component.If you see the app, the form need to dynamically make loads of complex mathematical calculations based on each input. So, for the components to talk to each other, I had to implement a state management mechanism inside the app. Redux and Flux are two state management libraries in react. Started with Redux and continued with it. As the users may want undo/redo the changes to forms, I need a way to undo/redo the state changes in redux. At this point, the app started to become complex with so many components and redux. I stepped back slightly and made a few changes to the code and re-architected some quick changes.The app also has to make many complex mathematical calculations like log, square root, if else logic inside the forms. So, I had picked up some good libraries to implement all these.Also, I made sure the app works with all Unicode characters like Chinese and Japanese characters.

What is the final goal?

The goal is to build the simplest form builder that can handle calculations, payments, chatbots - all with one single form.

How many hours did I spend?

Good number of hours

Will I do it again from scratch?

I thoroughly enjoyed the proceed and would love to do it all over again.

What if it fails and no subscribers sign up?

I haven't really tested waters or tried beta signups. Its a kind of, I am launching it directly. Lets see how it goes. If it doesn't work as expected, I would probably make a template out of this app and may let users purchase it. Or may be I will create same version on AWS (with S3 Static Hosting, DynamoDB, API Gateway/Lambda) and try to provide both the templates for purchase.

What next?

Throw me your comments on how it looks - great, good, bad, not bad, not good ... anything. Any thoughts are welcome whether you think this will succeed or fail. Whatever it may, let me know.

(Originally posted on reddit)