Gridsome FaunaDB Todo App

#gridsome #fauna #vue #jamstack

Link to Demo: https://gridsome-faunadb-todo.netlify.app/

JAM stack is a very new way of developing modern world applications. When we talk about JAM stack we no longer have to worry about the operating systems, web servers, backend programming languages, and databases. JAM Stack is a software development philosophy that only makes use of Javascript, API's, and Markups. With the help of JAM stack, you can build fast and secure sites and web apps that are delivered directly from the CDN's rather than a specific web server. This allows you to worry less about setting up the servers, databases, hosting, etc and focus mostly on the purpose of the application that you are developing.

During the course of the COVID-19 pandemic, I decided to explore JAM stack and found out that it allowed me to build my apps way more easily and way faster than a traditional approach. So I decided to build a small ToDo application. The following is the Tech Stack that I have used to develop the ToDo application.

FaunaDB

FaunaDB is a globally-distributed, serverless, cloud database management system for modern applications, such as those based on JAMstack. It enables you to instantly create a full-featured data backend for applications, in seconds. Just sign up and query! FaunaDB transforms the traditional DBMS into a Data API that gives you all of the capabilities of an old-guard database, without sacrificing flexibility, scale, and performance. FaunaDB core functions are inspired by Calvin: a clock-less, strictly-serializable transactional protocol for multi-region environments.

Getting started with FaunaDB

Register on https://dashboard.fauna.com/accounts/register
Create a new Database.
Create a new Collections named “todos”
Create the secret key for your application under the security tab. Make sure to save this key because it is only displayed once. This is the key that we are going to use to make a connection with our faunadb’s database form out Gridsome application.
Save secret key in .env variable to use it later
Install the faunadb’s library npm install --save faunadb
Initialize library by follow code

const faunadb = require(“faunadb”);
const client = new faunadb.Client({
secret:process.env.VUE_APP_FAUNA_SECRET
});
const q = faunadb.query;

Gridsome

Gridsome generates static HTML that hydrates into a Vue SPA once loaded in the browser. This means you can build both static websites & dynamic apps with Gridsome. It’s perfect for JAMstack workflow

Getting started with Gridsome
Install Gridsome CLI tool

Using NPM
npm install --global @gridsome/cli

Using Yarn
yarn global add @gridsome/cli

Create a Gridsome Project

gridsome create my-gridsome-site to install default starter
cd my-gridsome-site to open the folder
gridsome develop to start a local dev server at http://localhost:8080

Netlify

Netlify is one of the fastest growing deployment solutions which is a great solution for your serverless webapps. Using netlify is very easy too, you can just drag and drop and your website folder and it’s done in an instance

TailwindCSS and Buefy

TailwindCSS and Buefy are great combinations when it comes to developing the frontend of your application. I have made use of Tailwind’s utilities and Buefy’s components to develop the ToDo app.

Getting started with the application. Firstly we’ll have a look at all the CRUD operations in our ToDo app. We can create a todo, update a todo as completed, and delete a todo.

Let’s first have a look at how to create a todo.

 const faunadbt = require("faunadb");
 const client = new faunadbt.Client({
      Secret: process.env.VUE_APP_FAUNA_SECRET
 });
 const q = faunadbt.query;
 var moment = require("moment");
 export default {
    methods: {
        addTodo() {
          client
          .query(
            q.Create(q.Collection("todo"), {
              data: {
                name: this.todoname,
                completed: false,
                trashed: false,
                user_id: this.$store.state.id,
                date: Date.now()
              }
            })
          )
          .then(res => {
            this.todoname = "";
            this.todo_data.unshift(res);
          });
        },
  }
  };

Fetching all the todo’s and store it in a variable

        client
          .query(
            q.Paginate(
              q.Match(q.Index("all_todo"),       String(this.$store.state.id))
            )
          )
          .then(res => {
            var x = res.data;
            const data = x.map(ref => {
              return q.Get(ref);
            });
            client.query(data).then(res => {
              this.todo_data = res;
              this.todo_data.reverse()
            });
          });

Marks as Complete

      client
        .query(
          q.Update(q.Ref(q.Collection("todo"), id), {
            data: {
              completed: completed
            }
          })
        )
        .then(res => {});

Deleting a record

         client
          .query(
            q.Delete(
              q.Ref(q.Collection(“todo”), id)
            )
          )
          .then(res => {});