1
0 Comments

How I built a serverless web app

I thought I'd share how I built LandingPing:

First off, here's the stack.

Frontend:

  • React SPA
  • TailwindUI/CSS
  • Fauna JavaScript driver

Database:

  • Fauna (serverless)

Backend:

  • Netlify Functions (serverless)

Hosting:

  • Netlify

Transactional email service:

  • Sendgrid

The real star of the stack is Fauna, it's great not having to worry about servers and knowing that they take care of providing a globally distributed transactional database. Their query language, called FQL, is extremely powerful while also maintaining a shallow progressive learning curve. I love the functional programming approach! Being permissions based, all your calls are made directly from the frontend except for a few cases that I'll cover further on. My preferred flow was writing FQL functions maintained in my repository and then running a simple npm scripts that syncs my functions to my Fauna db. I then go on the web portal and assign roles and privileges to the functions, determining what users have permission to call them and what privileges the function has to limit data access.

Next comes Netlify. Fauna is a wonder to use for it's flexibility and power considering that it's a new-age cloud DB, but Netlify is joy to use due to how easy to use it is. I never once felt frustrated while linking it with my github repo, specifying build configurations and setting up serverless functions. The forums and docs answered the few doubts and issues that I had. Speaking of serverless functions, I needed to use those for things regarding SendGrid since I would have had to specify the API key in the frontend code otherwise. So for the few operations where I needed to also access SendGrid I offloaded the work to Netlify Functions instead to protect the keys and also offload some work which isn't bad. The only issue is usage limits on the free plan which are a bit low, which is why I only offloaded the minimum I needed to. The cool thing about developing with them is that you can still do local dev thanks to their netlify package that allows you to run the functions locally, simulating a deployed environment.

React is sort of the sore thumb, I would have liked working with something with, at the very least, hybrid static/SPA functionality, like Next.js or Nuxt.js. Alas, I could only take on so many new frameworks and technologies and resolved to pass on to Next.js when it'll be worth it. Having static pages for the published, publicly visible pages that users create would be a big UX improvement since loading times would be a fraction of what they are right now!

Honorable mentions:

  • TailwindUI is aaawwesome, so much better dev experience than using Bootstrap and gets you very slick prebuilt UI that you can then easily tweak.
  • SendGrid is pretty good, the APIs are straightforward even for more complex tasks. The online template creator isn't great though, it's hard maintaining a consistent style across templates since you have to do it manually.

Bottom line:
I think this experience has proved to me that serverless is the future for small dev teams and solo founders. There is a lot less context switching going on during your day, not to mention a lot less boilerplate and maintenance. TailwindUI is also a big plus in terms of dev speed. Deployment and iteration also significantly improve, consider that all I need to do to modify anything on the frontend is a commit and push. Netlify can be configured to deploy multiple git branches, each with independent environments and configurations, so A/B testing, staging, previews, etc etc are super easy. Fauna is still a bit immature, some complex things required employing obscure hacks to get done, but consider that I opted to build user auth from scratch only using Fauna so I might have asked for too much.

If you have any questions ask away!

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 18 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments