How to Build a Full Stack App for $175/month
The word “full-stack” makes me cringe because of the cost that is attributed to bringing a full-stack application to life. I remember my first “company” in which I was planning to run a crowdfunding campaign to show investors that my idea had validation, to get investment SO I COULD HIRE FULL STACK DEVELOPERS.
As we started building PubLoft v2, we discovered that there was a way to emulate some of the core aspects of a full stack app, without hiring a developer. Some of these are:
Password-protected front-end interfaces,
An easily configurable database,
User input mechanisms, and
The ability to glue it all together.
Without spending an arm and a leg, the system we came up with feels almost like a full stack application. This is actually just four 3rd party apps that you have probably used before, connected in a way that works as a full-stack app, for a fraction of the cost. I want to explain to you the stack PubLoft uses to power ourselves until we have the revenue to develop a more robust full-stack app:
We’re calling it the WATZ stack: Weebly, Airtable, Typeform, and Zapier. With these four products, we’re able to build interactive web pages with authentication (Weebly) and manage data (Airtable + Typeform + Zapier). It’s not Salesforce, but it’s a start! PubLoft has gotten all the way up to $19,000 MRR on the WATZ stack.
Now, although we are reaching the limits of these softwares, we know how much money and time they’ve saved us, and want to share this insight with you. Note, you won’t be doing any fancy algorithms in the WATZ stack. No custom HTML, CSS, and JavaScript. This stack is best if you need a web application with login and simple data management. Those aren’t the limits of this stack, but it’s what we’re covering in this blog post. With that, let’s start building out your $175 full stack web app.
Weebly: $18/month
It all starts off with Weebly. Here you can build out your web page and show what you want your customers to see. You’re going to want to build out your standard landing page for anyone to see, but spend time thinking about the interfaces your customers need to interact with to get the most out of your service.
With some Weebly plugins, we were able to create custom web pages for each customer, with tabs to help with navigation. Because each customer has proprietary data, you need a way to limit its access. This is where Weebly’s member login features come into play—page visibility.
You can change the default “public” visibility option to members or groups. Now, no one can access this page without being a member of that page. If anyone tries to access it, they will be sent to a login page first.
The best part about this is that our customers don’t know how we’ve built their portals and they don’t care. It works for them and it works for us.
Now, having a login and registration system is great, but if the page they are interacting with doesn’t do anything, it doesn’t really matter. You’re going to need a way to take data. That’s where Typeform comes in.
Typeform Pro: $35/month
Typeform is a form builder with a great user experience and powerful logic; it embeds easily into the front end. For countless variations of user input, Typeform is a robust and embeddable solution that has worked magic for us. We use Typeform in our portals to:
Submit topic requests,
Claim & submit posts through our system, and
Reach out to PubLoft with questions, ideas, and concerns.
Airtable Pro: $20/user/month
If you aren’t already familiar with Airtable, it’s worth getting to know before trying to plug it into the WATZ stack. It’s simple, yet very powerful when leveraged properly.
Alone, Airtable is a database that looks and feels like the coolest spreadsheet you’ve ever used. Each table can contain unique data, have various “views” showing/hiding specific fields and appearing as a grid, calendar, Kanban, form, and more. We embed unique views into each customer’s portal, which allows us to stay very organized and lean, even while scaling.
Beyond serving our customer needs, Airtable is very useful for our internal organization. We have 3 active bases, with several tables in each base. It’s safe to say that PubLoft runs on Airtable, even outside of our core content production.
Now, the last problem is how to connect everything. Right now, it’s not possible to manipulate any of our data in the front end. That’s because we’re missing the last piece of the puzzle: our routing software, Zapier, which integrates seamlessly with Typeform and Airtable among thousands of other popular (and obscure) apps.
See our full base published on Airtable Universe!
Zapier Professional ($62.50)
Zapier is the most technical solution out of the four, yet it requires no coding knowledge. Its only learning curve involves its logic, which is well worth the time. Zapier is similar to Node.js, in that it allows softwares to communicate and interact with one another.
If you’ve embedded an Airtable view in your portal, and want a customer to update that data without changing it directly in Airtable, you have them fill out a Typeform, which triggers a Zap, which translates the Typeform user input into updated record information in Airtable.
Let’s take it a step further. Let’s say a customer submits a request through Typeform, but wants to add or change something later. They could fill out a Typeform with the changes, refresh the page, and those changes are live.
Wrapping up
This all might sound rudimentary when reading, but remember that there aren’t many other ways to manipulate data in this way without paying for web development outright. This method has allowed us to properly test and prove our model, so that we know we’re building the right tech when the time comes.
In the WATZ stack, you’re able to:
Create password-protected front-end interfaces,
Display data from Airtable and manipulate it with Typeforms,
Connect it all (and more) with Zapier, and
More things we have yet to discover!