Gridsome FaunaDB Todo App
Tags: gridsome, fauna, vue, jamstack
Published: 2020-04-30 16:08:18

### 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.

![](https://miro.medium.com/max/1400/0*xVmPXHxmW49m9blj)

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
![](https://miro.medium.com/max/838/0*9xvqjVApYY0_WtjM)

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

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

### Gridsome
![](https://miro.medium.com/max/1000/0*fdDWm4GAPojD4LYl)

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

![](https://medium.com/@vinayak.k160/gridsome-faunadb-todo-app-fae13504dbc3)

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
![](https://miro.medium.com/max/1000/1*6EwWSBknlxfk-zErn-d8DQ.png)

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
![](https://miro.medium.com/max/636/0*53haOdnCVnMMdWyi)
![](https://miro.medium.com/max/718/0*oUl9jep09EFrXkqs)

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.

```javascript
 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

```javascript
        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

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

### Deleting a record

```javascript
         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