loading...
Cover image for Gridsome FaunaDB Todo App

Gridsome FaunaDB Todo App

vinayakk160 profile image Vinayak-k160 ・4 min read

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

  1. Register on https://dashboard.fauna.com/accounts/register
  2. Create a new Database.
  3. Create a new Collections named “todos”
  4. 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.
  5. Save secret key in .env variable to use it later
  6. Install the faunadb’s library npm install --save faunadb
  7. 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

  1. gridsome create my-gridsome-site to install default starter
  2. cd my-gridsome-site to open the folder
  3. 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 => {});

To create production build of you application run command gridsome build

It will generate production ready code in the dist folder

To deploy production ready project on netlify

Login to netlify and drag and drop your dist folder on netlify

You can clone the entire app and play around with it.
https://github.com/Vinayak-k160/Gridsome-FaunaDB-Todo

Discussion

pic
Editor guide
Collapse
triptych profile image
Andrew Wooldridge

Hi! Good article! One comment - you should link the article in the readme of your github repo to connect the dots.

Collapse
vinayakk160 profile image
Vinayak-k160 Author

thank you and yes I will link the readme file

Collapse
mangomkt profile image
mangomkt

I noticed you do not mention the user setup... can you explain that further and the proper setup for that?