React CRUD Netlify Fauna

Developed by: Donald Boulton Living in OKC. Follow Him on Twitter.🙌 0
Nov 10, 20192 min readReact, Netlify, Fauna  Category:  Tech

React FaunaDB

🖥️ Based on 🔗 Nelifty post

And some code functions and the Database schema mixed in from 🔗 Netlify FaunaDB ToDo for Netlify Identity Login and to set up the database.

Serverless functions seem to be all the rage these days. But why?

Devs are adopting the FAAS (Functions-as-a-Service) because of:

Pay per execution

Pay-per-execution pricing: You only pay for the how long your function code runs, not for idle server time. Scalability: Load balancing, security patches, logging, etc. are all handled by the FAAS provider. That leaves more time for companies to focus on their app instead of the underlying infrastructure. Most importantly, perhaps, is that server-less functions give frontend developers superpowers.

If you can write JavaScript, you can build out robust backend applications and APIs using simple AWS Lambda functions.

Need to process payments? Functions have your back.

Need to build a backend API? Yep, functions can do that.

Need to send transactional emails/SMS to users? Functions got you.

We’ve previously explored how functions work together with Identity on Netlify, but today we’re going a step further. This post will focus on using functions to build a backend API for a React App.

We will be walking through how you can use FaunaDB with Netlify Functions to build a CRUD (Create, Read, Update, Delete) API.

FaunaDB
FaunaDB serverless functions

Functions ToDo

This Functions Todo Sample is in the 🔗 Netlify Fauna ToDo, GitHub Repo.

The Fauna post on the 🔗 [FaunaDB ToDo}(https://fauna.com/blog/building-a-serverless-jamstack-app-with-faunadb-cloud-part-1)

See the component in this markdown page at the bottom, Netlify Functions Example!

ToDo

The Below ToDo is build with Netlify Functions and requires no site rebuild for data changes. Try it out its instantaneous and anonymous users can CRUD as Create, Read, edit and Update, Delete and bulk delete. This is not a full todo with lists and user list items, just an example of CRUD.

Netlify + Fauna DB

Create todo



Slack

Bring your team together with Slack, Work collaboration hub.

MailChimp Newsletters
MailChimp Newsletters

Enjoyed this post? Subscribe!
Css Tricks

Front-End UI, Javascript & Functions, HTML Tips, and More!